/* Shared icon style for small inline glyphs on these slides. */
.x-ico{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Slide 6: onboarding as a voice-first conversation. The app speaks each question (waveform + live caption),
   Mina answers out loud (voice message + transcript), types the harder one, and the values it reveals land beside the phone. */
.ob{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.95fr);align-items:center;column-gap:3.5vw}
.ob-device{--ph:clamp(440px,calc(100vh - 250px),680px);perspective:1500px}
.ob-tilt{transform-style:preserve-3d;transform:rotateY(8deg) rotateX(2deg);transition:transform 1.3s var(--spring-soft)}
.scene[data-step="3"] .ob-tilt{transform:rotateY(-12deg) rotateX(2deg)}
.scene.active .ob-tilt .phone{animation:dd-phone-in 1.5s var(--spring-soft) .05s both}

/* Header */
.vc-title{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.vc-title b{font-size:1.05em}
.vc-title small{display:flex;align-items:center;gap:.35em;font-size:.74em;color:var(--muted)}
.vc-title small i{width:.5em;height:.5em;border-radius:50%;background:#e2483a;animation:ob-rec 1.2s ease-in-out infinite}
@keyframes ob-rec{50%{opacity:.25}}
.vc-kb-top .x-ico{width:1.5em;height:1.5em;color:var(--muted)}

/* Conversation */
.vc-chat{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 1.1em .3em;-webkit-mask-image:linear-gradient(transparent,#000 3em);mask-image:linear-gradient(transparent,#000 3em)}
.vc-intro{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8em;padding:.6em 1em 1.6em;color:var(--muted);font-size:.95em}
.vc-orb{display:block;flex:none;width:2.1em;height:2.1em;border-radius:50%;background:radial-gradient(circle at 70% 60%,rgba(243,186,216,.9),transparent 45%),radial-gradient(circle at 25% 75%,#8193d8,transparent 55%),radial-gradient(circle at 45% 35%,#d4ecea,#b9cdee 70%);filter:blur(.5px);box-shadow:0 0 1.2em .2em rgba(243,200,225,.55);animation:aip-spin 9s linear infinite}
.vc-orb-big{width:7.5em;height:7.5em}
.vc-row{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.3,.8,.2,1) var(--dl,0s)}
.vc-row>div{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.vc-row>div>*{margin-block:.3em}
.vc-row.is-shown{grid-template-rows:1fr}
.vc-row:not(.is-shown){transition-delay:0s;transition-duration:.4s}
.vc-row.is-shown :is(.vc-app,.vc-user,.vc-typed){animation:g-pop .65s var(--spring-snap) var(--dl,0s) both}
.vc-app{display:grid;grid-template-columns:2.1em 1fr;gap:.5em;align-items:end;max-width:90%;transform-origin:0 100%}
.vc-b{padding:.65em .85em .7em;border-radius:1.2em 1.2em 1.2em .35em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.07)}
.vc-wave{display:flex;align-items:center;gap:.16em;height:1.5em}
.vc-wave i{display:block;width:.2em;height:calc(var(--h) * 1%);border-radius:.2em;background:var(--coral)}
.vc-wave-a{margin-bottom:.35em}
.vc-row.is-shown .vc-wave-a i{animation:vc-talk .38s ease-in-out calc(var(--dl) + .35s + var(--k) * 25ms) 4 alternate}
@keyframes vc-talk{to{transform:scaleY(.25)}}
.vc-cap{font-size:1.02em;line-height:1.3}
.vc-cap span{color:#c4bfb5}
.vc-row.is-shown .vc-cap span{animation:vc-word .25s ease calc(var(--dl) + .4s + var(--w) * 120ms) both}
@keyframes vc-word{to{color:var(--ink)}}
.vc-user{align-self:flex-end;max-width:84%;padding:.6em .8em .7em;border-radius:1.2em 1.2em .35em 1.2em;background:var(--ink);color:var(--paper);transform-origin:100% 100%}
.vc-uhead{display:flex;align-items:center;gap:.5em}
.vc-play{width:1.8em;height:1.8em;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--coral)}
.vc-play svg{width:.85em;height:.85em;fill:var(--ink)}
.vc-wave-u i{background:rgba(247,245,239,.35)}
.vc-row.is-shown .vc-wave-u i{animation:vc-rec .12s linear calc(var(--dl) + .2s + var(--k) * 65ms) both}
@keyframes vc-rec{to{background:var(--paper)}}
.vc-uhead small{font-size:.78em;opacity:.7}
.vc-trans{display:block;margin-top:.4em;font-size:.95em;line-height:1.3;color:#e8e5dc}
.vc-trans span{opacity:.12}
.vc-row.is-shown .vc-trans span{animation:vc-tword .2s ease calc(var(--dl) + .3s + var(--w) * 140ms) both}
@keyframes vc-tword{to{opacity:1}}
body.motion-paused .vc-trans span{animation:none!important;opacity:1}
.vc-typed{align-self:flex-end;max-width:84%;padding:.6em .85em .7em;border-radius:1.2em 1.2em .35em 1.2em;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:1em;line-height:1.3;transform-origin:100% 100%}
.vc-typed small{display:flex;align-items:center;gap:.3em;margin-bottom:.25em;font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vc-typed .x-ico{width:1.2em;height:1.2em}
.vc-sum{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.5em}
.vc-sum span{display:inline-flex;align-items:center;gap:.25em;font-size:.85em;font-weight:700;padding:.32em .6em .32em .4em;border-radius:2em;background:#e6f2ea;color:#245c3b}
.vc-sum .x-ico{width:1em;height:1em;stroke-width:2.6}

/* Composer: voice by default, typing when chosen */
.vc-comp{position:relative;flex:none;height:5.6em;margin:0 1.1em 1.8em}
/* The voice blob (WebGL, see DD_UI in ui.js) with its live status underneath */
.vc-stage{flex:none;display:flex;flex-direction:column;align-items:center;gap:.15em;padding:0 0 .5em}
.vc-blobwrap{position:relative;width:10.5em;height:10.5em}
.vc-blob{position:relative;z-index:1;display:block;width:100%;height:100%}
.vc-blobwrap .vc-orb-big{width:7.5em;height:7.5em}
.has-webgl .vc-blobwrap .vc-orb-big,.has-webgl .vc-ava .vc-orb{display:none}
html:not(.has-webgl) .vc-blob,html:not(.has-webgl) .vc-blob-mini{display:none}
.vc-ava{position:relative;width:2.1em;height:2.1em}
.vc-blob-mini{display:block;width:2.4em;height:2.4em;margin:-.15em}
.vc-status{position:relative;width:100%;height:1.3em;text-align:center;font-size:.82em;font-weight:700;color:var(--muted)}
.vc-status span{position:absolute;left:0;right:0;opacity:0}
.vc-status .vc-s0{opacity:1;transition:opacity .3s}
@keyframes vc-idle0{0%,5.2%{opacity:1}8.3%,78.1%{opacity:0}81.2%,100%{opacity:1}}
@keyframes vc-idle1{0%,5.2%{opacity:1}8.3%,78.1%{opacity:0}81.2%,100%{opacity:1}}
@keyframes vc-idle2{0%,5.2%{opacity:1}8.3%,40.6%{opacity:0}43.8%,100%{opacity:1}}
@keyframes vc-idle3{0%,5.2%{opacity:1}8.3%,40.6%{opacity:0}43.8%,100%{opacity:1}}
.scene.active[data-step="0"] .vc-s0{animation:vc-idle0 4.8s linear both}
.scene.active[data-step="1"] .vc-s0{animation:vc-idle1 4.8s linear both}
.scene.active[data-step="2"] .vc-s0{animation:vc-idle2 4.8s linear both}
.scene.active[data-step="3"] .vc-s0{animation:vc-idle3 4.8s linear both}
.vc-s1{color:#2a46ff}
@keyframes vc-speak0{0%,6.2%{opacity:0}10.4%,39.6%{opacity:1}42.7%,100%{opacity:0}}
@keyframes vc-speak1{0%,6.2%{opacity:0}10.4%,39.6%{opacity:1}42.7%,100%{opacity:0}}
@keyframes vc-speak2{0%,6.2%{opacity:0}10.4%,39.6%{opacity:1}42.7%,100%{opacity:0}}
@keyframes vc-speak3{0%,6.2%{opacity:0}10.4%,39.6%{opacity:1}42.7%,100%{opacity:0}}
@keyframes vc-listen0{0%,42.7%{opacity:0}45.8%,75.0%{opacity:1}78.1%,100%{opacity:0}}
@keyframes vc-listen1{0%,42.7%{opacity:0}45.8%,75.0%{opacity:1}78.1%,100%{opacity:0}}
@keyframes vc-mic0{0%,42.7%{background:var(--coral);color:var(--ink);transform:none}46.9%,74.0%{background:var(--ink);color:var(--paper);transform:scale(1.08)}79.2%,100%{background:var(--coral);color:var(--ink);transform:none}}
@keyframes vc-mic1{0%,42.7%{background:var(--coral);color:var(--ink);transform:none}46.9%,74.0%{background:var(--ink);color:var(--paper);transform:scale(1.08)}79.2%,100%{background:var(--coral);color:var(--ink);transform:none}}
@keyframes vc-ring0{0%,43.8%{opacity:0;transform:scale(1)}47.9%{opacity:.8}62.5%{opacity:0;transform:scale(1.9)}62.7%{opacity:0;transform:scale(1)}64.6%{opacity:.8}79.2%,100%{opacity:0;transform:scale(1.9)}}
@keyframes vc-ring1{0%,43.8%{opacity:0;transform:scale(1)}47.9%{opacity:.8}62.5%{opacity:0;transform:scale(1.9)}62.7%{opacity:0;transform:scale(1)}64.6%{opacity:.8}79.2%,100%{opacity:0;transform:scale(1.9)}}
.scene.active[data-step="0"] .vc-s1{animation:vc-speak0 4.8s linear both}
.scene.active[data-step="1"] .vc-s1{animation:vc-speak1 4.8s linear both}
.scene.active[data-step="2"] .vc-s1{animation:vc-speak2 4.8s linear both}
.scene.active[data-step="3"] .vc-s1{animation:vc-speak3 4.8s linear both}
.scene.active[data-step="0"] .vc-s2{animation:vc-listen0 4.8s linear both}
.scene.active[data-step="1"] .vc-s2{animation:vc-listen1 4.8s linear both}
.vc-voice{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:opacity .35s,transform .5s var(--spring-snap)}
.vc-kb{position:relative;justify-self:start;width:2.8em;height:2.8em;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.12)}
.vc-kb .x-ico{width:1.45em;height:1.45em}
.vc-kb .ui-tap{left:50%;top:50%;right:auto}
.vc-skip{justify-self:end;font-size:.9em;color:var(--muted)}
.vc-mic{position:relative;width:4.8em;height:4.8em;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:var(--ink);box-shadow:0 .8em 1.6em -.8em rgba(255,104,64,.9)}
.vc-mic .x-ico{position:relative;width:2em;height:2em}
.vc-mic i{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--coral);opacity:0}
.scene.active[data-step="0"] .vc-mic{animation:vc-mic0 4.8s ease both}
.scene.active[data-step="1"] .vc-mic{animation:vc-mic1 4.8s ease both}
.scene.active[data-step="0"] .vc-mic i{animation:vc-ring0 4.8s ease-out both}
.scene.active[data-step="1"] .vc-mic i{animation:vc-ring1 4.8s ease-out both}
.vc-mic i+i{animation-delay:.35s!important}
.vc-type{position:absolute;left:0;right:0;bottom:.9em;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.45em;opacity:0;transform:translateY(1em);pointer-events:none}
.vc-field{position:relative;display:flex;align-items:center;min-height:2.9em;padding:0 .9em;border-radius:2em;background:#fff;box-shadow:0 0 0 1.5px var(--ink);font-size:1em;overflow:hidden}
.vc-ftext{white-space:nowrap}
.vc-caret{width:1.5px;height:1.2em;margin-left:.1em;background:var(--coral);flex:none;animation:g-blink .8s steps(1) infinite}
.vc-send,.vc-mic-sm{width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center}
.vc-send{background:var(--ink);color:var(--paper)}
.vc-mic-sm{background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.12)}
.vc-send .x-ico,.vc-mic-sm .x-ico{width:1.3em;height:1.3em}
.scene.active[data-step="2"] .vc-kb .ui-tap{animation:ui-tap 1.2s cubic-bezier(.2,.7,.2,1) 1.55s both}
.scene.active[data-step="2"] .vc-voice{animation:vc-swap-out .45s ease 1.95s both}
.scene.active[data-step="2"] .vc-type{animation:vc-swap-in .6s var(--spring-snap) 2s both}
.scene.active[data-step="2"] .vc-send{animation:dd-press .4s ease 3.3s both}
.scene.active[data-step="2"] .vc-ftext{animation:vc-sent .25s ease 3.42s both}
@keyframes vc-swap-out{to{opacity:0;transform:translateY(1.2em)}}
@keyframes vc-swap-in{to{opacity:1;transform:none}}
@keyframes vc-sent{to{opacity:0}}

/* Values learned, landing beside the phone */
.ob-learn{display:flex;flex-direction:column;align-items:flex-start;gap:14px;container-type:inline-size}
.ob-heard{font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127;margin-bottom:4px}
.ob-row{position:relative;width:100%;height:clamp(62px,8vh,78px)}
.ob-row:has(.ob-val.is-shown) .ob-val{position:absolute;left:0;top:0;bottom:0;display:inline-flex;align-items:center;gap:14px;white-space:nowrap;padding:0 26px 0 12px;border-radius:60px;background:#fff;box-shadow:0 22px 44px -26px rgba(48,47,43,.55);transform-origin:0 50%}
.ob-val i,.ob-front>i,.ob-back>i{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-style:normal}
.ob-val .x-ico{width:20px;height:20px}
.ob-val b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(16px,6cqi,26px);line-height:1}
.ob-val small{display:block;margin-top:4px;font-size:clamp(11px,3.3cqi,13px);color:var(--muted)}
.ob-val.on-pop{translate:-14vw 0;scale:.5;transition:opacity .3s ease,scale .9s var(--spring-snap),translate .9s var(--spring-soft)}
.ob-val.on-pop.is-shown{translate:0 0;scale:1}
.ob-flip{padding:0;background:none;box-shadow:none;transform-style:preserve-3d;transition:opacity .3s ease,scale .9s var(--spring-snap),translate .9s var(--spring-soft),transform 1s var(--spring-snap)}
.ob-front,.ob-back{position:absolute;left:0;top:0;bottom:0;display:inline-flex;align-items:center;gap:14px;white-space:nowrap;padding:0 26px 0 12px;border-radius:60px;backface-visibility:hidden;box-shadow:0 22px 44px -26px rgba(48,47,43,.55)}
.ob-front{position:relative;height:100%;background:#fff}
.ob-back{background:var(--coral);transform:rotateX(180deg)}
.ob-back>i{background:var(--paper);color:var(--ink)}
.ob-back small{color:rgba(48,47,43,.7)}
.scene[data-step="3"] .ob-flip{transform:rotateX(180deg);transition-delay:0s,0s,0s,2.2s}
.ob-flip .ui-tap{right:auto;left:31px;top:50%;margin:-20px;width:40px;height:40px}
.scene[data-step="3"] .ob-flip .ui-tap{animation:ui-tap 1.4s cubic-bezier(.2,.7,.2,1) 1.8s both}
.ob-note{font-size:clamp(15px,1.2vw,18px);color:var(--muted);max-width:330px;margin-top:4px}
@keyframes ob-shimmer{to{background-position:-150% 0}}
body.motion-paused :is(.vc-orb,.vc-s0,.vc-title small i,.vc-caret,.vc-wave i,.vc-cap span,.vc-s1,.vc-s2,.vc-mic,.vc-mic i,.vc-voice,.vc-type,.vc-ftext,.vc-send,.vc-kb .ui-tap,.vc-row :is(.vc-app,.vc-user,.vc-typed),.ob-flip .ui-tap){animation:none!important}
body.motion-paused .vc-cap span{color:var(--ink)}

/* Slide 7: introductions. The profile assembles in layers: a person, a detail, a reason. */
.itr{height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;column-gap:3vw}
.in-stage{--u:min(66vh,44vw);position:relative;align-self:center;height:var(--u);perspective:1600px}
.in-card{position:absolute;border-radius:26px;box-shadow:0 40px 70px -36px rgba(48,47,43,.6),0 0 0 1px rgba(48,47,43,.05);overflow:hidden;transition:transform 1.1s var(--spring-soft),opacity .5s ease,filter .8s ease}
.in-card small{display:block;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127;margin-bottom:10px}
.in-card p{font-family:Coolvetica,Arial,sans-serif;font-size:calc(var(--u) * .055);line-height:1.08;letter-spacing:-.01em}
.in-photo{left:4%;top:0;width:52%;height:96%;transform:rotate(-3deg)}
.scene.active .in-photo{animation:in-photo 1.4s var(--spring-soft) .1s both}
@keyframes in-photo{from{transform:translateY(30%) rotateX(35deg) rotate(-8deg);opacity:0}}
.in-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:in-kb 9s ease-out both}
@keyframes in-kb{from{scale:1.14}}
.in-name{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 22px;background:linear-gradient(transparent,rgba(24,23,21,.8));color:#fff}
.in-name b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:calc(var(--u) * .08);line-height:1}
.in-name span{font-size:15px;opacity:.9}
.scene:not([data-step="0"]) .in-photo{transform:rotate(-5deg) translateX(-6%) scale(.95);filter:saturate(.85)}
.in-prompt{right:2%;top:12%;width:50%;padding:28px 28px 30px;background:#fff;opacity:0;transform:translateX(30%) rotateY(-50deg)}
.in-prompt.is-shown{opacity:1;transform:rotate(2.5deg)}
.in-like{position:absolute;right:20px;bottom:18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:var(--ink);font-size:20px;scale:0}
.in-prompt.is-shown .in-like{animation:in-like .9s var(--spring-bounce) 1s both}
@keyframes in-like{from{scale:0}to{scale:1}}
.in-reason{right:0;bottom:-2%;width:54%;padding:26px 96px 28px 28px;background:var(--blue);opacity:0;transform:translateY(40%) rotateX(55deg)}
.in-reason.is-shown{opacity:1;transform:rotate(-1.5deg)}
.in-reason .ui-duo{position:absolute;right:18px;top:20px;font-size:15px}
.in-reason .ui-avatar{width:44px;height:44px}
.in-reason.is-shown .ui-duo{animation:in-like .9s var(--spring-bounce) .9s both}

/* Slide 8: personality. A prism turns to the first date that suits the pair. */
.pe{height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;column-gap:2vw}
.pe-seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);width:min(480px,100%);margin-top:clamp(26px,5vh,48px);padding:6px;border-radius:40px;background:rgba(48,47,43,.08)}
.pe-seg span{position:relative;z-index:1;text-align:center;padding:12px 0;font-size:15px;font-weight:700;transition:color .4s}
.pe-seg span.is-current{color:var(--ink)}
.pe-seg span:not(.is-current){color:var(--muted)}
.pe-pill{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 4);border-radius:40px;background:var(--coral);box-shadow:0 10px 20px -10px rgba(255,104,64,.8);transition:transform .9s var(--spring-snap)}
.scene[data-step="1"] .pe-pill{transform:translateX(100%)}
.scene[data-step="2"] .pe-pill{transform:translateX(200%)}
.scene[data-step="3"] .pe-pill{transform:translateX(300%)}
.pe-caps{height:96px;margin-top:22px}
.pe-caps p{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(22px,2vw,30px);line-height:1.1}
.pe-caps small{display:block;margin-top:8px;font-family:Arial,sans-serif;font-size:16px;color:var(--muted)}
.pe-stage{--w:min(38vw,60vh * 1.35);--h:calc(var(--w) * .72);--tz:calc(var(--w) * .5);position:relative;align-self:stretch;perspective:1800px;perspective-origin:50% 40%}
.pe-prism{--k:0;position:absolute;left:50%;top:48%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);transform-style:preserve-3d;transform:translateZ(calc(var(--tz) * -1)) rotateX(-6deg) rotateY(calc(var(--k) * -90deg));transition:transform 1.35s var(--spring-soft)}
.scene[data-step="1"] .pe-prism{--k:1}.scene[data-step="2"] .pe-prism{--k:2}.scene[data-step="3"] .pe-prism{--k:3}
.scene.active .pe-prism{animation:pe-enter 1.6s var(--spring-soft) .1s both}
@keyframes pe-enter{from{translate:0 0 -600px;rotate:y 140deg}}
.pe-face{position:absolute;inset:0;margin:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.pe-f0{background:linear-gradient(160deg,#d3eaf5,#f6e5db);transform:rotateY(0deg) translateZ(var(--tz))}
.pe-f1{background:linear-gradient(160deg,#dcebd2,#f3ecd9);transform:rotateY(90deg) translateZ(var(--tz))}
.pe-f2{background:linear-gradient(160deg,#efe4f3,#f8e1d3);transform:rotateY(180deg) translateZ(var(--tz));container-type:size}
.pe-f3{background:linear-gradient(160deg,#eee6f4,#f8e2d6);transform:rotateY(270deg) translateZ(var(--tz));container-type:size;place-items:stretch}
.pe-face img{width:88%;height:auto}
.pe-floor{position:absolute;left:50%;top:calc(48% + var(--h) * .56);width:calc(var(--w) * .8);height:40px;margin-left:calc(var(--w) * -.4);border-radius:50%;background:radial-gradient(closest-side,rgba(48,47,43,.25),transparent);filter:blur(6px)}

/* Slide 9: world. An introduction notification opens into a shared canvas; two live cursors shape the date. */
.wv{height:100%;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:center;column-gap:3vw}
.wv-stage{position:relative;align-self:center;display:grid;place-items:center}
.wv-stage>*{grid-area:1/1}
.wv-card{position:relative;width:min(100%,calc((100vh - 250px) * 1.45));aspect-ratio:1.45;container-type:size;border-radius:28px;background:#fdfcf9;box-shadow:0 60px 100px -50px rgba(48,47,43,.55),0 0 0 1px rgba(48,47,43,.06);overflow:hidden}
.wv-card>*{font-size:2.2cqw}
.wv-card>*{position:absolute}

/* Beat 0: the notification grows into the canvas (a shared-element morph). */
.wv-intro{z-index:4;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 14px;border-radius:24px;background:#fff;box-shadow:0 30px 60px -28px rgba(48,47,43,.55);white-space:nowrap;opacity:0;pointer-events:none}
.wv-intro .ui-avatar{width:42px;height:42px}
.wv-intro small{display:block;font:700 11px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#bd4127}
.wv-intro b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:22px}
.wv-open{margin-left:10px;font-size:14px;font-weight:700;padding:10px 16px;border-radius:30px;background:var(--ink);color:var(--paper)}
.scene.active[data-step="0"] .wv-intro{animation:wv-intro 1.5s ease both}
.scene.active[data-step="0"] .wv-open{animation:dd-press .4s ease .55s both}
@keyframes wv-intro{0%{opacity:0;transform:translateY(24px) scale(.92)}18%,55%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.6)}}
.scene.active[data-step="0"] .wv-card{animation:wv-morph 1.2s var(--spring-soft) .62s both}
@keyframes wv-morph{from{clip-path:inset(42% 26% 42% 26% round 40px)}to{clip-path:inset(0 round 28px)}}
.scene.active[data-step="0"] :is(.wv-top,.wv-scene,.wv-tray){animation:wv-fade .7s ease 1.05s both}
@keyframes wv-fade{from{opacity:0;filter:blur(10px)}}

/* Top bar: presence and the setting switcher */
.wv-top{left:0;right:0;top:0;height:13cqh;display:flex;align-items:center;gap:.8em;padding:0 2.4cqw;border-bottom:1px solid rgba(48,47,43,.07)}
.wv-presence{display:flex}
.wv-presence img{width:2.2em;height:2.2em;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 3px #fdfcf9}
.wv-presence img:first-child{box-shadow:0 0 0 3px #fdfcf9,0 0 0 5px var(--coral)}
.wv-presence img+img{margin-left:-.5em;box-shadow:0 0 0 3px #fdfcf9,0 0 0 5px #6fb7d8}
.wv-title b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:1.15em;line-height:1}
.wv-title small{display:block;font-size:.72em;color:var(--muted);margin-top:.2em}
.wv-seg{position:relative;margin-left:auto;display:grid;grid-template-columns:1fr 1fr;padding:.25em;border-radius:2em;background:rgba(48,47,43,.07);font-size:.82em;font-weight:700}
.wv-seg span{position:relative;z-index:1;padding:.45em 1em;text-align:center;white-space:nowrap;transition:color .4s}
.wv-seg-pill{position:absolute;top:.25em;bottom:.25em;left:.25em;width:calc(50% - .25em);border-radius:2em;background:#fff;box-shadow:0 .2em .6em rgba(48,47,43,.18);transition:transform .7s var(--spring-snap)}
.scene:not([data-step="0"]) .wv-seg-pill{transform:translateX(100%)}
.scene[data-step="1"] .wv-seg-pill{transition-delay:1.25s}

/* The scene: café, then mini golf. Only the visible one plays. */
.wv-scene{left:0;right:0;top:13cqh;bottom:15cqh;overflow:hidden;background:linear-gradient(170deg,#eef6fa,#f8efe8)}
.wv-s{position:absolute;inset:0;display:grid;place-items:center;transition:transform 1s var(--spring-soft),opacity .5s,filter .6s}
.wv-s .live{width:min(80cqw,108cqh)}
.wv-s1{transform:translateX(60%) scale(.8);opacity:0;filter:blur(8px)}
.scene:not([data-step="0"]) .wv-s0{transform:translateX(-60%) scale(.8);opacity:0;filter:blur(8px)}
.scene:not([data-step="0"]) .wv-s1{transform:none;opacity:1;filter:none}
.scene[data-step="1"] .wv-s{transition-delay:1.3s}
.scene:not([data-step="0"]) .wv-s0 .live *,.scene[data-step="0"] .wv-s1 .live *{animation-play-state:paused!important}

/* The tray of touches */
.wv-tray{left:0;right:0;bottom:0;height:15cqh;display:flex;align-items:center;justify-content:center;gap:1.2em;border-top:1px solid rgba(48,47,43,.07)}
.wv-tool{display:flex;align-items:center;gap:.45em;font-size:.82em;font-weight:700;padding:.5em .9em .5em .6em;border-radius:2em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.1)}
.wv-tool .x-ico,.wv-stk .x-ico{width:1.5em;height:1.5em;padding:.25em;border-radius:50%;background:var(--coral);color:var(--ink)}

/* Stickers that get placed on the scene */
.wv-stk{z-index:2;left:0;top:0;display:flex;align-items:center;gap:.45em;white-space:nowrap;font-size:.95em;padding:.45em .5em .45em .5em;border-radius:1em;background:#fff;box-shadow:0 1em 2em -1em rgba(48,47,43,.55);opacity:0}
.wv-stk b{font-family:Coolvetica,Arial,sans-serif;font-weight:500}
.wv-stk img{width:1.6em;height:1.6em;border-radius:50%;object-fit:cover;object-position:50% 25%;margin-left:.2em}
.wv-stk-a{transform:translate(30.5cqw,91.5cqh) translate(-50%,-50%)}
.wv-stk-b{transform:translate(20cqw,32cqh) translate(-50%,-50%)}
.wv-stk-c{transform:translate(70cqw,91.5cqh) translate(-50%,-50%)}
.scene[data-step="2"] .wv-stk-a{animation:wv-drag-a 3.8s both}
.scene[data-step="2"] .wv-stk-c{animation:wv-drag-c 3.8s both}
.scene[data-step="2"] .wv-stk-b{animation:wv-pop-b 3.8s both}
@keyframes wv-drag-a{0%,19%{opacity:0;transform:translate(30.5cqw,91.5cqh) translate(-50%,-50%) scale(.6)}24%{opacity:1;transform:translate(30.5cqw,91.5cqh) translate(-50%,-50%) scale(1.12) rotate(-4deg);animation-timing-function:cubic-bezier(.45,0,.3,1)}50%{opacity:1;transform:translate(43cqw,56cqh) translate(-50%,-50%) scale(1.12) rotate(-4deg);animation-timing-function:var(--spring-bounce)}62%,100%{opacity:1;transform:translate(43cqw,56cqh) translate(-50%,-50%) rotate(-3deg)}}
@keyframes wv-drag-c{0%,33%{opacity:0;transform:translate(70cqw,91.5cqh) translate(-50%,-50%) scale(.6)}38%{opacity:1;transform:translate(70cqw,91.5cqh) translate(-50%,-50%) scale(1.12) rotate(4deg);animation-timing-function:cubic-bezier(.45,0,.3,1)}63%{opacity:1;transform:translate(74cqw,30cqh) translate(-50%,-50%) scale(1.12) rotate(4deg);animation-timing-function:var(--spring-bounce)}75%,100%{opacity:1;transform:translate(74cqw,30cqh) translate(-50%,-50%) rotate(3deg)}}
@keyframes wv-pop-b{0%,70%{opacity:0;transform:translate(20cqw,32cqh) translate(-50%,-50%) scale(.3)}80%{opacity:1;transform:translate(20cqw,32cqh) translate(-50%,-50%) scale(1.1) rotate(-2deg)}88%,100%{opacity:1;transform:translate(20cqw,32cqh) translate(-50%,-50%) rotate(-2deg)}}

/* Live cursors */
.wv-cur{z-index:3;left:0;top:0;display:flex;align-items:flex-start;gap:.1em;pointer-events:none;opacity:0}
.wv-cur svg{width:1.6em;height:1.75em;filter:drop-shadow(0 .15em .25em rgba(0,0,0,.25))}
.wv-cur svg path{stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.wv-cur em{font-style:normal;font-size:.78em;font-weight:700;padding:.25em .6em;border-radius:.6em;margin-top:1.1em;color:#fff}
.wv-cur-m svg path{fill:var(--coral)}.wv-cur-m em{background:var(--coral);color:var(--ink)}
.wv-cur-a svg path{fill:#4f9fc4}.wv-cur-a em{background:#4f9fc4}
.scene.active .wv-cur{opacity:1}
.scene[data-step="0"] .wv-cur-m{animation:wv-m0 3.8s both}
.scene[data-step="0"] .wv-cur-a{animation:wv-a0 3.8s both}
.scene[data-step="1"] .wv-cur-m{animation:wv-m1 3.8s both}
.scene[data-step="1"] .wv-cur-a{animation:wv-a1 3.8s both}
.scene[data-step="2"] .wv-cur-m{animation:wv-m2 3.8s both}
.scene[data-step="2"] .wv-cur-a{animation:wv-a2 3.8s both}
@keyframes wv-m0{0%,50%{opacity:0;transform:translate(4cqw,40cqh)}70%{opacity:1;transform:translate(30cqw,55cqh);animation-timing-function:ease-in-out}100%{opacity:1;transform:translate(33cqw,52cqh)}}
@keyframes wv-a0{0%,55%{opacity:0;transform:translate(96cqw,80cqh)}75%{opacity:1;transform:translate(72cqw,68cqh);animation-timing-function:ease-in-out}100%{opacity:1;transform:translate(69cqw,71cqh)}}
@keyframes wv-m1{0%{transform:translate(33cqw,52cqh);animation-timing-function:cubic-bezier(.45,0,.25,1)}30%{transform:translate(86cqw,6.5cqh) scale(1)}34%{transform:translate(86cqw,6.5cqh) scale(.82)}38%{transform:translate(86cqw,6.5cqh) scale(1);animation-timing-function:ease-in-out}70%,100%{transform:translate(56cqw,46cqh)}}
@keyframes wv-a1{0%{transform:translate(69cqw,71cqh)}50%{transform:translate(64cqw,64cqh)}100%{transform:translate(70cqw,70cqh)}}
@keyframes wv-a2{0%{transform:translate(70cqw,70cqh);animation-timing-function:cubic-bezier(.45,0,.25,1)}18%{transform:translate(31cqw,91cqh) scale(1)}22%{transform:translate(31cqw,91cqh) scale(.82);animation-timing-function:cubic-bezier(.45,0,.3,1)}50%{transform:translate(43.5cqw,56cqh) scale(.82)}55%{transform:translate(43.5cqw,56cqh) scale(1);animation-timing-function:ease-in-out}100%{transform:translate(52cqw,74cqh)}}
@keyframes wv-m2{0%,8%{transform:translate(56cqw,46cqh);animation-timing-function:cubic-bezier(.45,0,.25,1)}32%{transform:translate(70.5cqw,91cqh) scale(1)}36%{transform:translate(70.5cqw,91cqh) scale(.82);animation-timing-function:cubic-bezier(.45,0,.3,1)}63%{transform:translate(74.5cqw,30cqh) scale(.82)}68%{transform:translate(74.5cqw,30cqh) scale(1);animation-timing-function:ease-in-out}76%{transform:translate(28cqw,40cqh) scale(1)}80%{transform:translate(28cqw,40cqh) scale(.82)}84%,100%{transform:translate(29cqw,42cqh) scale(1)}}
body.motion-paused :is(.wv-intro,.wv-card,.wv-top,.wv-scene,.wv-tray,.wv-cur,.wv-open){animation:none!important}
body.motion-paused .wv-intro{opacity:0}
body.motion-paused .scene[data-step="2"] .wv-stk{animation:none!important;opacity:1}
body.motion-paused .scene[data-step="2"] .wv-stk-a{transform:translate(43cqw,56cqh) translate(-50%,-50%) rotate(-3deg)}
body.motion-paused .scene[data-step="2"] .wv-stk-c{transform:translate(74cqw,30cqh) translate(-50%,-50%) rotate(3deg)}

/* Recap slide (after the shared scene): what the pair agreed on, both loved, and where they differ.
   Sections reveal one per beat; each has a pinned note that draws in when its beat starts. */
.rc{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(40px,4vw,72px)}
.rc-device{--ph:clamp(430px,calc(100vh - 260px),680px);--gap:calc(var(--ph) * .11);margin-right:calc(min(300px,21vw) + var(--gap))}
.scene.active .rc-device .phone{animation:dd-phone-in 1.5s var(--spring-soft) .05s both}
.scene.active .rc-device{animation:o-float 6s ease-in-out 1.8s infinite alternate}
.rc-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:.6em;padding:.1em 1.2em 1.9em}
.rc-hero{position:relative;flex:none;height:8.6em;border-radius:1.3em;overflow:hidden;background:linear-gradient(160deg,#dcebd2,#f3ecd9)}
.rc-hero .live{position:absolute;left:50%;top:56%;width:140%;translate:-50% -50%}
.rc-hero>span{position:absolute;left:.6em;bottom:.55em;font-size:.76em;font-weight:700;padding:.35em .7em;border-radius:1em;background:rgba(255,255,255,.92)}
.rc-sec{position:relative;padding:.8em .9em .85em;border-radius:1.2em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.07);opacity:.28;filter:saturate(0);transition:opacity .5s,filter .5s,box-shadow .5s,transform .7s var(--spring-snap)}
.scene.active .rc-s0,.scene:not([data-step="0"]) .rc-s1,.scene[data-step="2"] .rc-s2{opacity:1;filter:none}
.scene[data-step="0"] .rc-s0{transition-delay:1.5s}
.rc-sec.is-current{box-shadow:0 0 0 2px var(--coral),0 1em 2em -1.3em rgba(48,47,43,.55);transform:scale(1.025)}
.scene[data-step="0"] .rc-s0.is-current{transition-delay:1.5s}
.rc-k{display:flex;align-items:center;gap:.45em;font-size:.74em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.55em}
.rc-k i{width:.65em;height:.65em;border-radius:50%;background:#4c9a6a}
.rc-s1 .rc-k i{background:var(--coral)}.rc-s2 .rc-k i{background:#e0a33a}
.rc-chips{display:flex;flex-wrap:wrap;gap:.35em}
.rc-chips span{display:inline-flex;align-items:center;gap:.3em;font-size:.92em;font-weight:700;padding:.38em .7em .38em .5em;border-radius:2em;background:#e6f2ea;color:#245c3b}
.rc-chips .x-ico{width:1.05em;height:1.05em;stroke-width:2.6}
.rc-s0.is-current .rc-chips span{animation:dd-pop .7s var(--spring-bounce) calc(var(--start,.2s) + var(--k) * .16s) both}
.scene[data-step="0"] .rc-s0{--start:1.7s}
.rc-loves{display:flex;flex-direction:column;gap:.35em}
.rc-loves span{display:flex;align-items:center;gap:.5em;font-size:.98em}
.rc-loves b{width:1.6em;height:1.6em;flex:none;border-radius:50%;display:grid;place-items:center;background:#ffe3da;color:var(--coral);font-size:.9em}
.rc-s1.is-current .rc-loves span{animation:j-slide .8s var(--spring-snap) calc(.3s + var(--k) * .18s) both}
.rc-hearts{position:absolute;right:1em;bottom:1em;width:2em;height:5em;pointer-events:none}
.rc-hearts i{position:absolute;left:calc(var(--h) * .6em);bottom:0;width:.9em;height:.9em;opacity:0}
.rc-hearts i:before{content:'♥︎';position:absolute;inset:0;font-size:1em;line-height:1;color:var(--coral);font-style:normal}
.rc-s1.is-current .rc-hearts i{animation:rc-heart 1.8s ease-out calc(.6s + var(--h) * .45s) infinite}
@keyframes rc-heart{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1;transform:translateY(-.8em) scale(1.1)}100%{opacity:0;transform:translateY(-4.4em) scale(.8) rotate(12deg)}}
.rc-line{position:relative;height:.4em;margin:1.4em 1.4em 1.5em;border-radius:1em;background:linear-gradient(90deg,#add9ed,#f2d6b0,#ffc4b2)}
.rc-line img{position:absolute;left:50%;top:50%;width:2.5em;height:2.5em;margin:-1.25em 0 0 -1.25em;border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 .2em #fff,0 .4em .8em -.3em rgba(48,47,43,.5);transition:left 1.1s var(--spring-snap) .5s}
.scene[data-step="2"] .rc-pm{left:4%}.scene[data-step="2"] .rc-pa{left:96%}
.rc-mid{position:absolute;left:50%;top:50%;width:.8em;height:.8em;margin:-.4em;background:var(--ink);transform:rotate(45deg) scale(0);transition:transform .7s var(--spring-bounce) 1.2s}
.scene[data-step="2"] .rc-mid{transform:rotate(45deg) scale(1)}
.rc-ends{display:flex;justify-content:space-between;font-size:.76em;color:var(--muted)}
.rc-tip{margin-top:.55em;font-size:.86em;line-height:1.3;padding:.5em .7em;border-radius:.8em;background:#fff4e2;color:#6b4a10;opacity:0;transform:translateY(.5em);transition:opacity .4s,transform .7s var(--spring-snap)}
.scene[data-step="2"] .rc-tip{opacity:1;transform:none;transition-delay:1.7s}

/* Notes: pinned to their sections, revealed one per beat (the line grows from the note to the section, then the dot lands). */
.rc-device .ui-note{left:calc(100% + var(--gap));width:min(300px,21vw);--nd:.7s}
.rc-device .ui-note h4{white-space:nowrap}
.rc-device .ui-note p{white-space:nowrap}
.scene[data-step="0"] .rc-n0{--nd:1.9s}
.rc .ui-note,.rc .ui-note:before,.rc .ui-note:after,.rc .ui-note-dot,.rc .ui-note>div,.rc .ui-note-lead{animation:none!important}
.rc .ui-note{opacity:0;translate:-12px 0;transition:opacity .45s,translate .8s var(--spring-snap),top .8s var(--spring-snap)}
.rc .ui-note-lead{clip-path:inset(-4px 0 -4px 100%);transition:clip-path .55s cubic-bezier(.6,0,.2,1),top .8s var(--spring-snap),height .8s var(--spring-snap)}
.rc .ui-note:after{scale:0;transition:scale .6s var(--spring-bounce),top .8s var(--spring-snap)}
.rc .ui-note.is-shown{opacity:1;translate:0 0;transition-delay:var(--nd)}
.rc .ui-note.is-shown .ui-note-lead{clip-path:inset(-4px 0 -4px 0);transition-delay:calc(var(--nd) + .2s),0s,0s}
.rc .ui-note.is-shown:after{scale:1;transition-delay:calc(var(--nd) + .65s),0s}
body.motion-paused :is(.rc-device,.rc-chips span,.rc-loves span,.rc-hearts i){animation:none!important}

/* Slide 10: icebreakers. Each person's choice flies out of their phone into one shared plan. */
.ic{height:100%;display:grid;grid-template-rows:auto 1fr;row-gap:clamp(8px,2vh,22px)}
.ic-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:3vw;perspective:1600px}
.ic-dev{--ph:clamp(340px,calc(100vh - 430px),540px);display:flex;flex-direction:column;align-items:center;gap:14px}
.ic-tilt{transform-style:preserve-3d;transition:transform 1.2s var(--spring-soft)}
.ic-dev-m .ic-tilt{transform:rotateY(24deg) rotateX(4deg)}
.ic-dev-a .ic-tilt{transform:rotateY(-24deg) rotateX(4deg)}
.scene[data-step="0"] .ic-dev-m .ic-tilt,.scene[data-step="1"] .ic-dev-a .ic-tilt{transform:rotateY(0) rotateX(0) translateZ(40px)}
.scene.active .ic-dev-m .phone{animation:dd-phone-in 1.5s var(--spring-soft) .1s both}
.scene.active .ic-dev-a .phone{animation:dd-phone-in 1.5s var(--spring-soft) .28s both}
.ic-who{font-family:Coolvetica,Arial,sans-serif;font-size:22px}
.ic-opt{position:relative;display:grid;grid-template-columns:3em 1fr auto;align-items:center;gap:.8em;padding:.7em .8em;margin-bottom:.5em;border-radius:1.1em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.08)}
.ic-opt img,.ic-dot{width:3em;height:3em;border-radius:.8em;object-fit:cover;background:var(--stone)}
.ic-opt b{display:block;font-size:1.02em}.ic-opt small{display:block;font-size:.82em;color:var(--muted)}
.ic-check{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.8em;background:var(--ink);color:var(--paper);opacity:0;scale:.3;transition:opacity .3s,scale .7s var(--spring-bounce)}
.scene[data-step="0"] .ic-opt-on{box-shadow:0 0 0 2px var(--coral)}
.scene:not([data-step="0"]) .ic-opt-on .ic-check,.scene[data-step="0"] .ic-opt-on .ic-check{opacity:1;scale:1;transition-delay:.7s}
.scene[data-step="0"] .ic-opt-on .ui-tap,.scene[data-step="1"] .ic-tart .ui-tap{animation:ui-tap 1.4s cubic-bezier(.2,.7,.2,1) .35s both}
.ic-ask{font-size:1.1em;line-height:1.3;margin-bottom:1em}
.ic-tart{position:relative;transition:background .4s,box-shadow .4s}
.scene[data-step="1"] .ic-tart,.scene[data-step="2"] .ic-tart{background:var(--coral);box-shadow:none;font-weight:700;transition-delay:.7s}
.ic-plan{position:relative;justify-self:center;width:min(100%,380px);padding:26px 26px 30px;border-radius:26px;background:rgba(253,252,248,.9);box-shadow:0 40px 70px -40px rgba(48,47,43,.6);outline:2px dashed rgba(48,47,43,.2);outline-offset:8px;display:flex;flex-direction:column;gap:12px;min-height:250px;transition:transform 1s var(--spring-snap)}
.scene[data-step="2"] .ic-plan{transform:scale(1.06);outline-color:transparent}
.ic-plan>small{font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127}
.ic-row{display:flex;align-items:center;gap:12px;font-family:Coolvetica,Arial,sans-serif;font-size:clamp(20px,1.7vw,26px)}
.ic-row .ui-avatar{width:40px;height:40px}
.ic-final{margin-top:auto;padding-top:14px;border-top:1px dashed rgba(48,47,43,.3);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ic-final b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(26px,2.3vw,36px);white-space:nowrap}
.ic-stamp{white-space:nowrap;font:700 12px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;border-radius:30px;background:var(--coral);rotate:-6deg}
.ic-final.is-shown .ic-stamp{animation:ic-stamp .8s var(--spring-bounce) .9s both}
@keyframes ic-stamp{from{scale:2.4;opacity:0;rotate:-20deg}}
.ic-wait{font-size:15px;color:var(--muted);margin-top:auto}
.ic-fly{position:absolute;left:50%;top:52%;font-family:Coolvetica,Arial,sans-serif;font-size:22px;white-space:nowrap;padding:12px 18px;border-radius:30px;background:var(--coral);box-shadow:0 20px 40px -20px rgba(48,47,43,.6);opacity:0;pointer-events:none}
.ic-fly-m.is-shown{animation:ic-fly-m 1.5s cubic-bezier(.5,0,.2,1) .7s both}
.ic-fly-a.is-shown{animation:ic-fly-a 1.5s cubic-bezier(.5,0,.2,1) .7s both}
@keyframes ic-fly-m{0%{opacity:0;transform:translate(-50%,-50%) translate(-32vw,-6vh) scale(.6)}15%{opacity:1}50%{transform:translate(-50%,-50%) translate(-15vw,-20vh) scale(1.1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translate(-2vw,-5vh) scale(.8)}}
@keyframes ic-fly-a{0%{opacity:0;transform:translate(-50%,-50%) translate(32vw,-2vh) scale(.6)}15%{opacity:1}50%{transform:translate(-50%,-50%) translate(15vw,-18vh) scale(1.1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) translate(2vw,1vh) scale(.8)}}

body.motion-paused :is(.ob-tilt .phone,.in-photo,.in-photo img,.in-like,.in-reason .ui-duo,.pe-prism,.ic-tilt .phone,.ic-fly,.ic-stamp){animation:none!important}
body.motion-paused .ic-fly{opacity:0}

/* Slide 5: the journey as a 3D carousel of four app screens. Each step the next phone swings to the front,
   the front one recedes to the left, and the front screen plays its own small interaction. */
.j-board{height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;column-gap:2vw}
.j-copy{display:flex;flex-direction:column;gap:clamp(22px,4.2vh,44px)}
.j-copy h2{font-size:clamp(44px,4.7vw,78px);line-height:.95;letter-spacing:-.035em}
.j-caps{height:clamp(120px,17vh,160px)}
.j-cap{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-content:start}
.j-cap b{font:700 13px/1 Arial,sans-serif;letter-spacing:.04em;color:#bd4127;padding-top:12px}
.j-cap h3{font-size:clamp(30px,2.7vw,44px);line-height:1;letter-spacing:-.02em}
.j-cap p{grid-column:2;font-size:clamp(16px,1.25vw,19px);line-height:1.35;color:var(--muted);margin-top:10px}
.j-cap.is-shown p{animation:dd-blur-in .8s ease .3s both}
.j-dots{display:flex;gap:8px;align-items:center}
.j-dots i{display:block;height:6px;width:6px;border-radius:6px;background:var(--ink);opacity:.2;transition:width .85s var(--spring-snap),opacity .4s,background .4s}
.j-dots i.is-current{width:36px;opacity:1;background:var(--coral)}
.j-sub{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(18px,1.45vw,22px);line-height:1.15;color:var(--muted)}
.j-deck{position:relative;align-self:stretch;perspective:1800px;perspective-origin:50% 42%}
.j-ring{--ph:clamp(360px,calc(100vh - 290px),640px);position:absolute;inset:0;transform-style:preserve-3d;font-size:calc(var(--ph) / 46)}
.j-card{--x:0;--z:0px;--ry:0deg;--o:1;--dim:0;position:absolute;left:50%;top:50%;width:calc(var(--ph) * .4865);height:var(--ph);margin:calc(var(--ph) / -2) 0 0 calc(var(--ph) * -.24325);transform-style:preserve-3d;transform:translateX(calc(var(--x) * 1%)) translateZ(var(--z)) rotateY(var(--ry));opacity:var(--o);transition:transform 1.05s var(--spring-soft),opacity .55s ease}
.j-card .phone{transition:none}
.scene.active .j-ring{animation:dd-phone-in 1.6s var(--spring-soft) .05s both}
.j-card.is-current .phone{animation:j-sway 7s ease-in-out .9s infinite alternate;box-shadow:inset 0 0 0 .14em #4d4b45,inset 0 0 0 .32em #12110f,0 4em 6em -2em rgba(48,47,43,.55),0 1.2em 2em -.8em rgba(48,47,43,.35)}
@keyframes j-sway{from{transform:rotateY(0) rotateX(0)}to{transform:rotateY(-5deg) rotateX(2deg)}}
.scene[data-step="0"] .j-c0{--x:0;--z:0px;--ry:0deg;--o:1;--dim:0}
.scene[data-step="0"] .j-c1{--x:80;--z:-280px;--ry:-26deg;--o:1;--dim:.38}
.scene[data-step="0"] .j-c2{--x:0;--z:-620px;--ry:0deg;--o:0;--dim:.6}
.scene[data-step="0"] .j-c3{--x:-80;--z:-280px;--ry:26deg;--o:1;--dim:.38}
.scene[data-step="1"] .j-c0{--x:-80;--z:-280px;--ry:26deg;--o:1;--dim:.38}
.scene[data-step="1"] .j-c1{--x:0;--z:0px;--ry:0deg;--o:1;--dim:0}
.scene[data-step="1"] .j-c2{--x:80;--z:-280px;--ry:-26deg;--o:1;--dim:.38}
.scene[data-step="1"] .j-c3{--x:0;--z:-620px;--ry:0deg;--o:0;--dim:.6}
.scene[data-step="2"] .j-c0{--x:0;--z:-620px;--ry:0deg;--o:0;--dim:.6}
.scene[data-step="2"] .j-c1{--x:-80;--z:-280px;--ry:26deg;--o:1;--dim:.38}
.scene[data-step="2"] .j-c2{--x:0;--z:0px;--ry:0deg;--o:1;--dim:0}
.scene[data-step="2"] .j-c3{--x:80;--z:-280px;--ry:-26deg;--o:1;--dim:.38}
.scene[data-step="3"] .j-c0{--x:80;--z:-280px;--ry:-26deg;--o:1;--dim:.38}
.scene[data-step="3"] .j-c1{--x:0;--z:-620px;--ry:0deg;--o:0;--dim:.6}
.scene[data-step="3"] .j-c2{--x:-80;--z:-280px;--ry:26deg;--o:1;--dim:.38}
.scene[data-step="3"] .j-c3{--x:0;--z:0px;--ry:0deg;--o:1;--dim:0}

/* The front screen's interaction, replayed each time a phone reaches the front. */
.scene.active .j-card .rw>span{animation-delay:calc(.6s + var(--i,0) * 60ms)}
.j-card:not(.is-current) .rw>span{animation:none}
.j-card .ui-tap{right:auto;left:50%;top:50%}
.j-card.is-current .ui-tap{animation-delay:2.05s}
.j-card.is-current .j-press{animation:dd-press .45s ease 2.1s both}
.j-profile img{transition:transform 5s cubic-bezier(.2,.6,.2,1)}
.j-c0.is-current .j-profile img{transform:scale(1.09)}
.j-c0.is-current .j-why{animation:dd-blur-in .7s ease 1s both}
.j-c1.is-current .j-scene img{animation:j-rise .9s var(--spring-bounce) .45s both}
.j-c1.is-current .j-move-a{animation:j-slide .8s var(--spring-snap) .75s both}
.j-c1.is-current .j-move-b{animation:j-slide .8s var(--spring-snap) .95s both}
.j-c1.is-current .j-pick{animation:j-pick .6s var(--spring-bounce) 1.5s both}
.j-c2.is-current .j-ticket{animation:j-ticket 1s var(--spring-soft) .4s both}
.j-c2.is-current .j-booked{animation:dd-pop .9s var(--spring-bounce) 1.25s both}
.j-c2.is-current .j-type{animation:j-type .9s steps(18) 1.55s both}
.j-c2.is-current .j-type+.j-type{animation-delay:1.95s}
.j-c3.is-current .j-duo-big .ui-avatar:first-child{animation:j-meet-a 1s var(--spring-bounce) .45s both}
.j-c3.is-current .j-duo-big .ui-avatar:last-child{animation:j-meet-b 1s var(--spring-bounce) .45s both}
@keyframes j-rise{from{transform:translateY(40%) scale(.8);opacity:0}}
@keyframes j-slide{from{transform:translateX(-30%);opacity:0}}
@keyframes j-pick{0%{background:transparent;box-shadow:inset 0 0 0 1px rgba(48,47,43,.22);font-weight:400;transform:scale(1)}40%{transform:scale(1.12)}100%{transform:none}}
@keyframes j-ticket{from{transform:translateY(55%) rotateX(18deg);opacity:0}}
@keyframes j-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes j-meet-a{from{transform:translateX(-2.6em) rotate(-8deg)}}
@keyframes j-meet-b{from{transform:translateX(2.6em) rotate(8deg)}}
body.motion-paused .j-card *,body.motion-paused .j-cap p{animation:none!important}

/* Slide 5 screen details */
.j-profile{position:relative;flex:1;min-height:0;margin:0 1.2em;border-radius:1.6em;overflow:hidden}
.j-profile img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.j-profile div{position:absolute;left:0;right:0;bottom:0;padding:3.5em 1.2em 1.1em;background:linear-gradient(transparent,rgba(24,23,21,.78));color:#fff}
.j-profile b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:2.1em;line-height:1;letter-spacing:-.02em}
.j-profile div>span{display:block;margin-top:.35em;font-size:.95em;opacity:.9}
.j-why{margin:.8em 1.2em 0;padding:.85em 1.05em;border-radius:1.2em;background:var(--blue)}
.j-why small{display:block;font-size:.78em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.3em}
.j-why p{font-size:1.06em;line-height:1.3}
.j-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:.5em;padding:.8em 1.2em 2.1em}
.j-chat-head{display:flex;align-items:center;gap:.6em}
.j-chat-head .ui-avatar{width:2.2em;height:2.2em}
.j-scene{height:8.6em;margin:0 0 .9em;border-radius:1.3em;background:linear-gradient(160deg,#d9edf6,#f4e8df);display:grid;place-items:center;overflow:hidden}
.j-scene img{height:10.4em;width:auto;margin-top:1em}
.j-move{display:grid;grid-template-columns:2.4em 1fr auto;align-items:center;gap:.7em;padding:.7em .85em;margin-bottom:.5em;border-radius:1.15em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.08)}
.j-move .ui-avatar{width:2.4em;height:2.4em}
.j-move small{display:block;font-size:.84em;color:var(--muted)}
.j-move b{display:block;font-size:1.06em;margin-top:.1em}
.j-check{width:1.7em;height:1.7em;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:.8em;font-style:normal}
.j-move-open{background:transparent;box-shadow:none;outline:1px dashed rgba(48,47,43,.35);outline-offset:-1px}
.j-booked{background:var(--blue)}
.j-ticket{margin:.2em 1.2em 0;border-radius:1.5em;background:#fff;overflow:hidden;box-shadow:0 1em 2em -1.2em rgba(48,47,43,.45)}
.j-ticket>img{display:block;width:100%;height:8.6em;object-fit:cover}
.j-ticket-body{padding:.9em 1.2em 1.1em}
.j-ticket-top{display:flex;justify-content:space-between;align-items:center}
.j-ticket-top small,.j-gift small{font-size:.8em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.j-ticket-top .ui-avatar{width:2em;height:2em}
.j-ticket-body>b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:3.1em;line-height:1;letter-spacing:-.03em;margin:.05em 0 .12em}
.j-ticket-body>p{font-size:.98em}
.j-ticket-cut{position:relative;margin:1em -1.2em .9em;border-top:1px dashed rgba(48,47,43,.28)}
.j-ticket-cut:before,.j-ticket-cut:after{content:'';position:absolute;top:-.7em;width:1.4em;height:1.4em;border-radius:50%;background:var(--paper)}
.j-ticket-cut:before{left:-.7em}.j-ticket-cut:after{right:-.7em}
.j-gift small{display:block;color:#bd4127;margin-bottom:.4em}
.j-gift p{display:flex;justify-content:space-between;font-size:.98em;margin-top:.25em}
.j-gift p span{color:var(--muted)}
.j-push{margin-top:auto}
.j-duo-big{margin-bottom:1.6em}
.j-duo-big .ui-avatar{width:5.6em;height:5.6em;box-shadow:0 0 0 .3em var(--paper)}
.j-duo-big .ui-avatar+.ui-avatar{margin-left:-1.6em}
.j-lock{display:flex;align-items:center;justify-content:center;gap:.4em;font-size:.9em;color:var(--muted);margin-top:.3em}
.j-lock svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* The desktop presentation is the primary canvas; smaller screens remain readable. */

/* Slide 11: the gesture. The choice made on the phone lands on the real table, with Mina's note. */
.ge{height:100%;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center;column-gap:2vw}
.ge-stage{position:relative;align-self:stretch;container-type:size;perspective:1600px}
.ge-photo{position:absolute;right:0;top:4%;width:76cqw;height:90cqh;border-radius:28px;overflow:hidden;box-shadow:0 50px 90px -50px rgba(48,47,43,.7);transform:scale(.92) translateX(6%);filter:saturate(.85) brightness(.95);transition:transform 1.5s var(--spring-soft),filter 1s ease}
.ge-photo img{width:100%;height:100%;object-fit:cover}
.scene[data-step="2"] .ge-photo{transform:none;filter:none}
.ge-dev{--ph:clamp(400px,calc(100vh - 290px),620px);position:absolute;left:4cqw;top:50%;margin-top:calc(var(--ph) / -2);perspective:1400px;transition:transform 1.3s var(--spring-soft),opacity .6s}
.ge-tilt{transform-style:preserve-3d;transform:rotateY(14deg) rotateZ(-2deg);transition:transform 1.2s var(--spring-soft)}
.scene.active .ge-tilt .phone{animation:dd-phone-in 1.5s var(--spring-soft) .1s both}
.scene[data-step="2"] .ge-dev{transform:translate(-18%,10%) scale(.74)}
.ge-menu{position:relative;display:grid;grid-template-columns:3.6em 1fr auto;align-items:center;gap:.8em;padding:.6em .8em;margin-bottom:.5em;border-radius:1.1em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.08)}
.ge-menu b{display:block;font-size:1.02em}.ge-menu small{display:block;font-size:.8em;color:var(--muted)}
.ge-thumb{display:grid;place-items:center;width:3.6em;height:3.2em;border-radius:.8em;background:#fbf3e3}
.ge-thumb svg{width:3.2em}
.ge-thumb-b{background:linear-gradient(135deg,#f6d9a2,#e8b468)}.ge-thumb-c{background:linear-gradient(135deg,#6b4a3a,#3b2a22)}
.ge-menu-on{box-shadow:0 0 0 2px var(--coral)}
.ge-tick{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.8em;background:var(--ink);color:var(--paper);scale:0;transition:scale .7s var(--spring-bounce) .9s}
.scene.active .ge-tick{scale:1}
.scene[data-step="0"] .ge-menu-on .ui-tap{animation:ui-tap 1.4s cubic-bezier(.2,.7,.2,1) .55s both}
.ge-label{font-size:.8em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:1em 0 .5em}
.ge-input{position:relative;min-height:4.4em;padding:.75em .9em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.12);font-size:1em;line-height:1.35}
.ge-caret{display:inline-block;width:1.5px;height:1.1em;vertical-align:-.15em;background:var(--coral);margin-left:.1em;opacity:0}
.scene[data-step="1"] .ge-caret{opacity:1;animation:g-blink .8s steps(1) infinite}
.ge-card{position:absolute;right:3cqw;top:9cqh;width:min(330px,34cqw);padding:22px 24px 24px;border-radius:18px;background:#fff;box-shadow:0 30px 60px -30px rgba(48,47,43,.6);rotate:4deg;opacity:0;transform:translateY(-40px) rotateX(70deg);transform-origin:50% 0}
.scene[data-step="2"] .ge-card{opacity:1;transform:none;transition:transform 1.2s var(--spring-bounce) 1.1s,opacity .3s 1.1s}
.ge-card small{display:block;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127;margin-bottom:8px}
.ge-card p{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(20px,1.8vw,27px);line-height:1.1}

.ge .hd h2{font-size:clamp(40px,4vw,68px)}
.ge-ring{position:absolute;left:63%;top:64%;width:22%;aspect-ratio:1.6;border-radius:50%;translate:-50% -50%;box-shadow:0 0 0 3px var(--coral),0 0 0 9999px rgba(30,29,26,0);opacity:0;scale:1.6;transition:opacity .4s,scale 1s var(--spring-snap),box-shadow 1s ease}
.scene[data-step="2"] .ge-ring{opacity:1;scale:1;box-shadow:0 0 0 3px var(--coral),0 0 0 9999px rgba(30,29,26,.32);transition-delay:.5s}
.scene[data-step="2"] .ge-ring:after{content:'';position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 3px var(--coral);animation:ge-ping 1.6s ease-out 1.4s infinite}
@keyframes ge-ping{from{opacity:1;scale:1}to{opacity:0;scale:1.5}}

/* Slide 12: why people return. Notifications only arrive when the other person did something. */
.rt{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr);align-items:center;column-gap:4vw}
.rt-dev{--ph:clamp(420px,calc(100vh - 270px),650px);perspective:1500px}
.rt-tilt{transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(4deg)}
.scene.active .rt-tilt .phone{animation:dd-phone-in 1.5s var(--spring-soft) .1s both,rt-buzz .5s ease 1.6s}
@keyframes rt-buzz{20%,60%{translate:-1.5% 0}40%,80%{translate:1.5% 0}}
.rt .phone-screen{background:linear-gradient(170deg,#9fcfe6 0%,#f0c7b6 60%,#ff8e6a 100%)}
.rt .ui-status{color:#fff}
.rt-lock{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 1em;color:#fff}
.rt-date{font-size:1.1em;font-weight:700;margin-top:.8em;opacity:.9}
.rt-time{font-family:Coolvetica,Arial,sans-serif;font-size:6.2em;line-height:.95;letter-spacing:-.02em}
.rt-stack{width:100%;margin-top:auto;margin-bottom:2.4em;display:flex;flex-direction:column;gap:.5em}
.rt-n{display:grid;grid-template-columns:2.6em 1fr auto;gap:.7em;align-items:start;padding:.9em .9em;border-radius:1.4em;background:rgba(253,252,248,.78);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1em 2em -1.4em rgba(48,47,43,.5)}
.rt-n:not(.is-shown){display:none}
.rt-n.is-shown{animation:rt-drop .9s var(--spring-snap) .25s both}
@keyframes rt-drop{from{transform:translateY(-120%) scale(.9);opacity:0}}
.rt-app{width:2.6em;height:2.6em;border-radius:.7em;background:var(--ink);position:relative}
.rt-app:before,.rt-app:after{content:'';position:absolute;top:.75em;width:1.1em;height:1.1em;border-radius:50%}
.rt-app:before{left:.5em;box-shadow:inset 0 0 0 .14em var(--paper)}.rt-app:after{left:1em;background:var(--coral);mix-blend-mode:screen}
.rt-app-c{background:var(--coral)}.rt-app-c:after{background:var(--ink);mix-blend-mode:normal}
.rt-n b{display:block;font-size:1.02em}.rt-n p{font-size:.94em;line-height:1.3;color:#4f4e48}
.rt-n small{font-size:.8em;color:var(--muted)}
.rt-side{display:flex;flex-direction:column;gap:clamp(18px,3vh,30px)}
.rt-row{display:flex;flex-direction:column;gap:4px;font-size:clamp(15px,1.2vw,18px);color:var(--muted);opacity:.3;transform:translateX(-14px);transition:opacity .5s,transform .8s var(--spring-snap)}
.rt-row b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(26px,2.3vw,36px);color:var(--ink)}
.rt-row.is-current{opacity:1;transform:none}

/* Slide 13: the forecast. A dial runs out, and the date simply keeps going. */
.fc{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:3vw}
.fc-caps{height:110px;margin-top:clamp(28px,5vh,52px)}
.fc-caps p{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(22px,2vw,30px);line-height:1.1;max-width:440px}
.fc-caps small{display:block;font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.fc-stage{--s:min(58vh,36vw);position:relative;align-self:stretch;display:grid;place-items:center;perspective:1400px}
.fc-dial{position:relative;width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle at 50% 40%,#3d3c37,#24231f 70%);box-shadow:0 0 0 1px rgba(247,245,239,.12),0 60px 100px -50px #000,inset 0 2px 0 rgba(255,255,255,.08);transform:rotateX(12deg);transition:transform 1.4s var(--spring-soft)}
.scene.active .fc-dial{animation:fc-in 1.5s var(--spring-soft) .1s both}
@keyframes fc-in{from{transform:rotateX(70deg) scale(.6);opacity:0}}
.scene[data-step="2"] .fc-dial{transform:rotateX(0) scale(1.04)}
.fc-ticks i{position:absolute;left:50%;top:50%;width:2px;height:8px;margin:-4px 0 0 -1px;border-radius:2px;background:rgba(247,245,239,.25);transform:rotate(var(--a)) translateY(calc(var(--s) * -.455))}
.fc-ring{position:absolute;inset:6%;width:88%;height:88%;transform:rotate(-90deg)}
.fc-track{fill:none;stroke:rgba(247,245,239,.1);stroke-width:7}
.fc-arc{fill:none;stroke:var(--coral);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 8px rgba(255,104,64,.7))}
.scene[data-step="0"] .fc-arc{animation:fc-run 3.8s linear both}
.scene[data-step="1"] .fc-arc{stroke-dashoffset:1}
.scene[data-step="2"] .fc-arc{stroke:#add9ed;filter:drop-shadow(0 0 10px rgba(173,217,237,.8));animation:fc-fill 1.6s var(--spring-soft) both}
@keyframes fc-run{to{stroke-dashoffset:1}}
@keyframes fc-fill{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.fc-num{position:absolute;inset:0;display:grid;place-items:center;font-family:Coolvetica,Arial,sans-serif;color:var(--paper)}
.fc-count{position:relative;height:calc(var(--s) * .22);overflow:hidden;font-size:calc(var(--s) * .2);line-height:1.1;letter-spacing:-.02em}
.fc-count b{display:block;font-weight:500;text-align:center;font-variant-numeric:tabular-nums}
.fc-count{--n:0}
.fc-count b{transform:translateY(calc(var(--n) * -100%));transition:transform .5s var(--spring-snap)}
.scene[data-step="0"] .fc-count b{animation:fc-tick 3.8s steps(1) both}
.scene[data-step="1"] .fc-count{--n:4}
.scene[data-step="1"] .fc-count{animation:fc-pulse 1s ease .2s 2}
@keyframes fc-tick{0%{transform:translateY(0)}25%{transform:translateY(-100%)}50%{transform:translateY(-200%)}75%{transform:translateY(-300%)}100%{transform:translateY(-400%)}}
@keyframes fc-pulse{50%{scale:1.08;color:var(--coral)}}
.fc-inf{position:absolute;font-size:calc(var(--s) * .34);line-height:1;opacity:0;scale:.3;transition:opacity .4s,scale 1s var(--spring-bounce)}
.scene[data-step="2"] .fc-count{opacity:0;transition:opacity .3s}
.scene[data-step="2"] .fc-inf{opacity:1;scale:1;transition-delay:.25s}
.fc-pair{position:absolute;left:50%;bottom:16%;display:flex;transform:translateX(-50%)}
.fc-pair img{width:calc(var(--s) * .13);height:calc(var(--s) * .13);border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 3px #2d2c28}
.fc-pair img+img{margin-left:calc(var(--s) * -.03)}
.fc-burst{position:absolute;left:50%;top:50%;width:0;height:0}
.fc-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--coral);opacity:0}
.scene[data-step="2"] .fc-burst i{animation:fc-burst 1.3s cubic-bezier(.2,.7,.2,1) .2s both}
.fc-burst i:nth-child(even){background:#add9ed}
@keyframes fc-burst{0%{opacity:1;transform:rotate(var(--r)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--r)) translateY(calc(var(--s) * -.72)) scale(.4)}}

/* Slide 14: the invitation. Two yeses turn a proposal into a confirmed table. */
.dt{height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;column-gap:3vw}
.dt-stage{position:relative;align-self:stretch;display:grid;place-items:center;perspective:1600px}
.dt-card{position:relative;width:min(560px,40vw);border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 60px 100px -50px rgba(48,47,43,.7),0 0 0 1px rgba(48,47,43,.05);transform:rotateY(-12deg) rotateX(5deg);transition:transform 1.5s var(--spring-soft)}
.scene[data-step="2"] .dt-card{transform:rotateY(0) rotateX(0) scale(1.02)}
.scene.active .dt-card{animation:dt-in 1.5s var(--spring-soft) .1s both}
@keyframes dt-in{from{transform:translateY(30%) rotateX(-50deg) scale(.8);opacity:0}}
.dt-photo{height:min(26vh,230px);overflow:hidden}
.dt-photo img{width:100%;height:100%;object-fit:cover;animation:p-kb 8s ease-out both}
.dt-body{padding:24px 28px 28px}
.dt-body>small{font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127}
.dt-when{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(36px,3.4vw,54px);line-height:1;margin:6px 0 6px}
.dt-body>p{font-size:15px;color:var(--muted)}
.dt-rows{display:flex;justify-content:space-between;margin:16px 0;padding:14px 0;border-top:1px dashed rgba(48,47,43,.25);border-bottom:1px dashed rgba(48,47,43,.25);font-size:15px}
.dt-yes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dt-p{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--paper);transition:background .5s,box-shadow .5s}
.dt-p img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 25%}
.dt-p b{font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:20px}
.dt-state{position:relative;height:22px;overflow:hidden;font:700 12px/22px Arial,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.dt-state span{display:block;transition:transform .7s var(--spring-snap)}
.dt-state span:first-child{color:var(--muted)}
.dt-state span:last-child{color:#2d7a4b}
.scene[data-step="1"] .dt-pm .dt-state span,.scene[data-step="2"] .dt-p .dt-state span{transform:translateY(-100%)}
.scene[data-step="1"] .dt-pm,.scene[data-step="2"] .dt-p{background:#e6f2e9;box-shadow:inset 0 0 0 1.5px #8cc29f}
.scene[data-step="1"] .dt-pm,.scene[data-step="2"] .dt-pa{animation:dt-tap .6s var(--spring-bounce) .2s}
@keyframes dt-tap{30%{scale:.94}}
.dt-confirm{position:absolute;right:22px;top:22px;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:40px;background:var(--ink);color:var(--paper);font:700 14px Arial,sans-serif;letter-spacing:.04em;opacity:0;scale:.4;transition:opacity .3s,scale .9s var(--spring-bounce)}
.dt-confirm span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--coral);color:var(--ink)}
.scene[data-step="2"] .dt-confirm{opacity:1;scale:1;transition-delay:.8s}

/* Slide 15: after the date. Two private answers, then a mutual yes unlocks chapter two. */
.cp{height:100%;display:grid;grid-template-rows:auto 1fr;row-gap:clamp(6px,1.5vh,16px)}
.cp-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:3vw;perspective:1600px}
.cp-dev{--ph:clamp(320px,calc(100vh - 470px),520px);display:flex;flex-direction:column;align-items:center;gap:14px}
.cp-tilt{position:relative;transform-style:preserve-3d;transition:transform 1.2s var(--spring-soft),filter .8s}
.scene.active .cp-dev-m .phone{animation:dd-phone-in 1.5s var(--spring-soft) .05s both}
.scene.active .cp-dev-a .phone{animation:dd-phone-in 1.5s var(--spring-soft) .22s both}
.cp-dev-m .cp-tilt{transform:rotateY(18deg)}.cp-dev-a .cp-tilt{transform:rotateY(-18deg)}
.scene[data-step="0"] .cp-dev-m .cp-tilt,.scene[data-step="1"] .cp-dev-a .cp-tilt{transform:translateZ(50px)}
.scene[data-step="0"] .cp-dev-a .cp-tilt{filter:blur(2px) brightness(.97)}
.cp-face{width:6em;height:6em;border-radius:50%;object-fit:cover;object-position:50% 25%;margin-bottom:1.2em;box-shadow:0 0 0 .3em #fff}
.cp-yes{transition:transform .5s}
.scene[data-step="0"] .cp-dev-m .ui-tap,.scene[data-step="1"] .cp-dev-a .ui-tap{animation:ui-tap 1.4s cubic-bezier(.2,.7,.2,1) .5s both}
.cp-lock{position:absolute;inset:.62em;border-radius:3.3em;display:grid;place-items:center;background:rgba(173,217,237,.55);backdrop-filter:blur(10px);font-style:normal;opacity:0;transition:opacity .6s;transform:translateZ(2px);font-size:calc(var(--ph) / 46)}
.cp-lock svg{width:4em;height:4em;fill:none;stroke:var(--ink);stroke-width:1.6}
.scene:not([data-step="0"]) .cp-dev-m .cp-lock,.scene[data-step="2"] .cp-dev-a .cp-lock{opacity:1;transition-delay:1.1s}
.scene[data-step="2"] .cp-lock{opacity:0!important;transition-delay:0s!important}
.cp-who{font-family:Coolvetica,Arial,sans-serif;font-size:22px}
.cp-mid{position:relative;display:grid;place-items:center;min-height:260px}
.cp-dots{display:flex;gap:18px}
.cp-dots i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(48,47,43,.3);transition:background .4s,box-shadow .4s,transform 1s var(--spring-snap)}
.scene:not([data-step="0"]) .cp-dots i:first-child,.scene[data-step="2"] .cp-dots i{background:var(--ink);box-shadow:none}
.scene[data-step="2"] .cp-dots i:first-child{transform:translateX(20px)}.scene[data-step="2"] .cp-dots i:last-child{transform:translateX(-20px)}
.scene[data-step="2"] .cp-dots i{transition-delay:.15s}
.cp-unlock{position:absolute;width:min(360px,100%);padding:28px 28px 30px;border-radius:28px;background:#fff;text-align:center;box-shadow:0 40px 80px -40px rgba(48,47,43,.6);opacity:0;scale:.3;transition:opacity .3s,scale 1.1s var(--spring-bounce)}
.scene[data-step="2"] .cp-unlock{opacity:1;scale:1;transition-delay:.7s}
.cp-unlock small{font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127}
.cp-unlock b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(28px,2.5vw,40px);line-height:1;margin:10px 0 16px}
.cp-sug{display:inline-block;font-size:14px;padding:9px 14px;border-radius:30px;background:var(--blue)}

body.motion-paused :is(.ge-tilt .phone,.rt-tilt .phone,.rt-n,.fc-dial,.fc-arc,.fc-count b,.fc-count,.fc-burst i,.dt-card,.dt-photo img,.dt-p){animation:none!important}
/* Slide 8: the café and mini golf faces are live scenes; only the face in front plays. */
.pe-face .live{width:108%;flex:none}
.scene:not([data-step="0"]) .pe-f0 .live *,.scene:not([data-step="1"]) .pe-f1 .live *{animation-play-state:paused!important}

/* Slide 8, isometric dates. Intimate: the candle-lit booth with flickering warm light.
   Shared: a photography exhibition, then a vermouth bar, joined by a path. Sized in cqw/cqh of the face. */
.pe-iso{position:relative;width:92%;margin-top:2%}
.pe-iso img{display:block;width:100%;height:auto;filter:drop-shadow(0 2.4cqw 2cqw rgba(48,47,43,.18))}
.pe-glow{position:absolute;width:var(--g);height:var(--g);margin:calc(var(--g) / -2) 0 0 calc(var(--g) / -2);border-radius:50%;background:radial-gradient(circle,rgba(255,214,150,.75),rgba(255,190,120,0) 68%);mix-blend-mode:screen;pointer-events:none;opacity:.55}
.scene[data-step="2"] .pe-glow{animation:pe-flicker 2.4s ease-in-out var(--gd) infinite alternate}
.scene[data-step="2"] .pe-glow-candle{animation-duration:.9s}
@keyframes pe-flicker{0%{opacity:.4;transform:scale(.9)}35%{opacity:.85;transform:scale(1.06)}60%{opacity:.6}100%{opacity:.95;transform:scale(1.12)}}
.scene[data-step="2"] .pe-iso{animation:pe-bob 6s ease-in-out .9s infinite alternate}
@keyframes pe-bob{to{translate:0 -1.2cqh}}

.pe-f3>*{position:absolute}
.sh-scene{width:44cqw;filter:drop-shadow(0 2cqw 1.8cqw rgba(48,47,43,.18))}
.sh-scene img{display:block;width:100%;height:auto}
.sh-a{left:3cqw;top:16cqh}
.sh-b{right:3.5cqw;top:22cqh}
.sh-path{left:24cqw;top:9cqh;width:52cqw;height:16cqh;overflow:visible}
.sh-path path{fill:none;stroke:var(--coral);stroke-width:.5;stroke-dasharray:.02 .015;stroke-linecap:round}
.sh-then{left:50%;top:6.5cqh;translate:-50% 0;font:700 1.25cqw Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127;padding:.4cqw 1cqw;border-radius:2cqw;background:rgba(255,255,255,.85)}
.sh-time{bottom:4cqh;font-size:1.6cqw;font-weight:700;white-space:nowrap;padding:.6cqw 1.2cqw;border-radius:2cqw;background:#fff;box-shadow:0 .6cqw 1.2cqw -.6cqw rgba(48,47,43,.5)}
.sh-ta{left:13cqw}.sh-tb{right:13cqw}
.sh-tag{z-index:3;left:3cqw;top:3.5cqh;display:flex;align-items:center;gap:.9cqw;font-size:1.55cqw;font-weight:700;padding:.5cqw 1.3cqw .5cqw .5cqw;border-radius:3cqw;background:#fff;box-shadow:0 .8cqw 1.6cqw -.8cqw rgba(48,47,43,.55)}
.sh-tag .ui-avatar{width:3.2cqw;height:3.2cqw;box-shadow:0 0 0 .25cqw #fff}
.sh-path{clip-path:inset(-2cqw 100% -2cqw 0)}

/* When the Shared date turns to the front: the gallery rises, the path draws across, the bar follows. */
.scene[data-step="3"] .sh-a{animation:sh-rise 1.1s var(--spring-bounce) .85s both,sh-float 6s ease-in-out 2.4s infinite alternate}
.scene[data-step="3"] .sh-b{animation:sh-rise 1.1s var(--spring-bounce) 1.75s both,sh-float 6s ease-in-out 3.2s infinite alternate-reverse}
.scene[data-step="3"] .sh-path{animation:sh-draw .8s cubic-bezier(.6,0,.2,1) 1.35s both}
.scene[data-step="3"] .sh-then{animation:dd-pop .7s var(--spring-bounce) 1.55s both}
.scene[data-step="3"] .sh-ta{animation:sh-chip .7s var(--spring-snap) 1.25s both}
.scene[data-step="3"] .sh-tb{animation:sh-chip .7s var(--spring-snap) 2.15s both}
.scene[data-step="3"] .sh-tag{animation:dd-pop .8s var(--spring-bounce) 2.4s both}
.scene:not([data-step="3"]) .sh-path{clip-path:inset(-2cqw 0 -2cqw 0)}
@keyframes sh-rise{from{transform:translateY(14cqh) scale(.82);opacity:0}}
@keyframes sh-float{to{translate:0 -1.4cqh}}
@keyframes sh-draw{from{clip-path:inset(-2cqw 100% -2cqw 0)}to{clip-path:inset(-2cqw 0 -2cqw 0)}}
@keyframes sh-chip{from{transform:translateY(2cqh);opacity:0}}
.scene:not([data-step="3"]) .pe-f3 *,.scene:not([data-step="2"]) .pe-f2 *{animation-play-state:paused!important}
body.motion-paused :is(.pe-f2,.pe-f3) *{animation:none!important}
body.motion-paused .sh-path{clip-path:none}