*{box-sizing:border-box}html,body{margin:0;background:#080405;color:#f3dfd9;min-height:100%;font-family:Georgia,serif}main{position:relative;height:100svh;min-height:420px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#21060c50,transparent 65%)}#phrases{position:absolute;inset:7% 7% 32%;pointer-events:none}.floating-phrase{position:absolute;white-space:nowrap;color:#e794a6;opacity:0;text-shadow:0 0 22px #bb34512b;line-height:1.4}.final-phrase{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(26px,5vw,44px);color:#e794a6}button{background:transparent;border:0;color:#d8a7b1;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:1px solid #e794a6;outline-offset:5px;border-radius:50%}#begin{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font:48px Georgia;padding:25px}.controls{position:absolute;bottom:4%;left:0;right:0;display:flex;justify-content:center;gap:25px}.controls button{font:22px Georgia;width:44px;height:44px}#lyrics{position:absolute;bottom:14%;left:6%;right:6%;min-height:90px;display:grid;place-items:center;text-align:center}#line{max-width:850px;margin:0;font-size:clamp(20px,2.5vw,30px);line-height:1.5;text-wrap:balance}#line span{opacity:0;color:#c496a0;transition:opacity .1s}#line span.sung{opacity:1}#line span.current{color:#fff1e9;text-shadow:0 0 16px #eea0b150}#error{position:absolute;bottom:10%;width:100%;text-align:center;font:12px Arial;color:#e794a6}[hidden]{display:none!important}@media(max-width:600px){#phrases{inset:6% 7% 38%}#lyrics{bottom:15%;min-height:130px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#backing{font:italic 15px Georgia;color:#ba8e98;min-height:22px;margin:8px 0 0}
#phrases{transition:opacity .3s ease}.missing-you #phrases{opacity:.1}
#focus-phrase{position:absolute;left:5%;right:5%;top:33%;text-align:center;pointer-events:none;font-size:clamp(48px,10vw,100px);color:#fff0f0;text-shadow:0 0 28px #ed7299aa,0 0 70px #d83a6966;letter-spacing:-.03em}
#focus-phrase span{display:inline-block;opacity:0;transform:scale(.94);transition:opacity .16s,transform .3s}
#focus-phrase span.revealed{opacity:1;transform:scale(1)}
#line span.crossed-out{text-decoration-line:line-through;text-decoration-color:#ff9caf;text-decoration-thickness:2px}
.missing-you #line span.sung{color:#997b83}.missing-you #line span.current{color:#ffe4ed}
@media(prefers-reduced-motion:reduce){#focus-phrase span{transform:none}}

/* Soft bubbles, a few quiet hearts, and playful lyric lettering. */
main{background:radial-gradient(ellipse at 18% 80%,#58132926,transparent 55%),radial-gradient(ellipse at 85% 20%,#43112a2b,transparent 60%),#080405}
#bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity .4s}
.bubble{position:absolute;left:var(--x);bottom:-90px;width:var(--size);height:var(--size);border-radius:50%;border:1px solid #f2a6be26;background:radial-gradient(circle at 30% 25%,#ffc8db17,transparent 65%);box-shadow:inset 0 0 12px #eb7ca609;animation:bubble-rise var(--duration) linear infinite;animation-delay:var(--delay);animation-play-state:paused;opacity:0}
.bubble.tiny-heart{border:0;background:none;box-shadow:none;color:#ee94b04d;font:22px 'Segoe UI',sans-serif}
.is-playing .bubble{animation-play-state:running}
.missing-you #bubbles{opacity:.3}
#line{font-family:'Segoe Print','Comic Sans MS','Trebuchet MS',sans-serif;font-size:clamp(20px,2.6vw,32px);font-weight:600;letter-spacing:.015em;line-height:1.7}
#line span{display:inline-block;white-space:pre;transform-origin:50% 85%}
#line span.sung{animation:word-pop .32s ease-out both;color:#d5a8ba}
#line span.current{color:#ffe0ed;text-shadow:0 2px 0 #6e2c43,0 0 20px #e878a253}
#line span.crossed-out{text-decoration-thickness:3px}
#focus-phrase{font-family:'Segoe Print','Comic Sans MS','Trebuchet MS',sans-serif;font-weight:600}
@keyframes word-pop{0%{transform:translateY(5px) scale(.93)}65%{transform:translateY(-2px) scale(1.035)}100%{transform:translateY(0) scale(1)}}
@keyframes bubble-rise{0%{transform:translate(0,0) scale(.8);opacity:0}12%{opacity:.65}80%{opacity:.5}100%{transform:translate(var(--drift),-115vh) scale(1.12);opacity:0}}
@media(prefers-reduced-motion:reduce){.bubble{animation:none;bottom:calc(var(--x) * .8);opacity:.22}#line span.sung{animation:none}}

/* A quiet romantic edit: diffuse light, fine grain, and soft bokeh. */
main{isolation:isolate;background:radial-gradient(ellipse at center,#16090f 0%,#080405 75%)}
main::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 22% 40%,#9e37573b,transparent 38%),radial-gradient(ellipse at 78% 65%,#73304b30,transparent 40%);filter:blur(55px);opacity:.55;animation:soft-light 19s ease-in-out infinite alternate;animation-play-state:paused}
main::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E")}
.is-playing main::before{animation-play-state:running}
#bubbles{z-index:0;opacity:.5;filter:blur(1.2px)}
.bubble{border:0;box-shadow:none;background:radial-gradient(circle,#f1adc01c 0%,#d67b9a0b 45%,transparent 72%)}
.bubble.tiny-heart{color:#e6a4bc35;filter:blur(.5px)}
#phrases{z-index:1}#lyrics{z-index:2}.controls,#begin,#focus-phrase,#error{z-index:3}
.missing-you #bubbles{opacity:.15}.missing-you main::before{opacity:.35}
@keyframes soft-light{from{transform:translate(-2%,-1%) scale(1);opacity:.45}to{transform:translate(2%,2%) scale(1.08);opacity:.65}}
@media(prefers-reduced-motion:reduce){main::before{animation:none;opacity:.5}}

/* Chorus movement stays gentle, driven by the song's word cues. */
#chorus-light{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,#b44b795e,transparent 65%);opacity:0}
#phrases{transform-origin:50% 50%;transition:opacity .4s ease,filter .6s ease}
body[data-scene="distance"] #phrases{filter:blur(1.3px);opacity:.7}
body[data-scene="near"] #phrases{filter:blur(0);opacity:.9}
body[data-scene="leave"] .floating-phrase{text-shadow:7px 3px 5px #e794a62b,15px 7px 12px #e794a61a}
body[data-scene="thinking"] #line{color:#f4c6d8}
body[data-scene="missing"] #phrases{opacity:.15}
#line span.crossed-out{position:relative;text-decoration:none}
#line span.crossed-out::after{content:"";position:absolute;left:.12em;right:0;top:54%;height:3px;border-radius:3px;background:#ff9caf;box-shadow:0 0 6px #ec71955c;transform:scaleX(var(--strike,0));transform-origin:left center}
#come-here{position:absolute;z-index:3;top:51%;left:5%;right:5%;text-align:center;color:#e8aec2;font:italic clamp(22px,4vw,38px) 'Segoe Print','Comic Sans MS',sans-serif;pointer-events:none;animation:come-close .5s ease-out both}
@keyframes come-close{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#phrases{filter:none!important}#come-here{animation:none}}

/* Brief zoom/blur cuts and trailing type inspired by the reference edit. */
#transition-sweep{position:absolute;inset:-15%;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#eab5cb42 48%,#fce7e62b 52%,transparent 75%);filter:blur(25px);opacity:0;mix-blend-mode:screen}
#line{transform-origin:50% 60%;will-change:transform,filter}
#lyrics{isolation:isolate}
#lyric-echo{position:absolute;top:0;left:0;right:0;max-width:850px;margin:0 auto;pointer-events:none;font:600 clamp(20px,2.6vw,32px)/1.7 'Segoe Print','Comic Sans MS','Trebuchet MS',sans-serif;letter-spacing:.015em;text-wrap:balance;color:#dba3bc;opacity:0;z-index:-1}
@media(prefers-reduced-motion:reduce){#transition-sweep,#lyric-echo{display:none!important}#line{transform:none!important;filter:none!important;opacity:1!important}}

/* Crossfade static red gradients; animate transforms and opacity, not blur. */
#red-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#080405}
.red-tone{position:absolute;inset:0;opacity:0;transition:opacity .75s cubic-bezier(.22,.61,.36,1);will-change:opacity}
main{background:transparent}
main::before{filter:none;inset:-10%;background:radial-gradient(ellipse at 22% 40%,#9e375721,transparent 48%),radial-gradient(ellipse at 78% 65%,#73304b18,transparent 50%);will-change:transform,opacity}
#bubbles,.bubble.tiny-heart{filter:none}
#transition-sweep{filter:none;mix-blend-mode:normal;background:linear-gradient(115deg,transparent 20%,#eab5cb1c 49%,transparent 80%);will-change:transform,opacity}
#line{filter:none;will-change:transform,opacity;backface-visibility:hidden}
#lyric-echo{filter:none;will-change:transform,opacity}
#phrases{filter:none!important;will-change:transform,opacity;backface-visibility:hidden;transition:opacity .45s ease}
#line span.sung{animation:word-settle .24s ease-out both}
@keyframes word-settle{from{transform:translateY(2px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.red-tone{transition:none}#line span.sung{animation:none}}