/* Opening chapter, slides 1-4. All motion keys off .scene.active (entrances) and [data-step] (beats). */

/* Slide 1: cover. Mina and Alex are the two circles of the logo; when they overlap the shared part turns coral. */
.c{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:2vw}
.c-copy{display:flex;flex-direction:column;gap:clamp(18px,3.2vh,34px)}
.c-credit{color:var(--muted)}
.c-word{font-size:clamp(110px,15vw,240px);line-height:.8;letter-spacing:-.065em;margin-left:-.04em}
.c-tag{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(26px,2.6vw,42px);line-height:1.02;letter-spacing:-.02em}
.c-stage{--d:min(36vh,22vw);--mx:calc(var(--d) * -.64);--ax:calc(var(--d) * .64);--cy:0px;position:relative;align-self:stretch;perspective:1500px}
.scene[data-step="1"] .c-stage,.scene[data-step="2"] .c-stage{--mx:calc(var(--d) * -.3);--ax:calc(var(--d) * .3)}
.scene[data-step="2"] .c-stage{--cy:calc(var(--d) * -.24)}
.c-orbit{position:absolute;inset:0;isolation:isolate;perspective:1200px}
.scene.active .c-orbit{animation:c-sway 9s ease-in-out 1.4s infinite alternate}
.c-face,.c-lens i{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;transition:transform 1.15s var(--spring-soft)}
.c-face{overflow:hidden;box-shadow:0 0 0 6px var(--paper),0 34px 60px -26px rgba(48,47,43,.6)}
.c-face img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.c-mina,.c-lens i{transform:translate(var(--mx),var(--cy))}
.c-alex{transform:translate(var(--ax),var(--cy))}
.c-lens{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;clip-path:circle(calc(var(--d) / 2) at calc(50% + var(--ax)) calc(50% + var(--cy)));transition:clip-path 1.15s var(--spring-soft)}
.c-lens i{background:var(--coral)}
.c-name{position:absolute;left:50%;top:calc(50% + var(--d) * .5 + 22px);font-family:Coolvetica,Arial,sans-serif;font-size:24px;transform:translateX(-50%) translateX(var(--nx));transition:opacity .4s,transform 1.15s var(--spring-soft)}
.c-name-m{--nx:var(--mx)}.c-name-a{--nx:var(--ax)}
.scene:not([data-step="0"]) .c-name{opacity:0}
.c-spark{position:absolute;left:50%;top:calc(50% + var(--cy) - var(--d) * .5 - 34px);transform:translateX(-50%);font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127;opacity:0;transition:opacity .5s,top 1.15s var(--spring-soft)}
.scene[data-step="1"] .c-spark{opacity:1;transition-delay:.55s,0s}
.c-ticket{position:absolute;left:50%;top:calc(50% + var(--d) * .3);width:calc(var(--d) * 1.3);margin-left:calc(var(--d) * -.65);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-radius:18px;background:#fff;box-shadow:0 30px 60px -28px rgba(48,47,43,.55);transform-origin:50% 0;transform:rotateX(-100deg);opacity:0;transition:transform 1.25s var(--spring-bounce),opacity .25s}
.c-ticket small{display:block;font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127}
.c-ticket b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(26px,2.4vw,38px);line-height:1.05;margin:4px 0 2px}
.c-ticket>div>span{font-size:14px;color:var(--muted)}
.c-ticket .ui-avatar{width:42px;height:42px}
.scene[data-step="2"] .c-ticket{transform:none;opacity:1;transition-delay:.25s}
.scene.active .c-mina,.scene.active .c-lens i{animation:c-in-l 1.4s var(--spring-soft) .15s both}
.scene.active .c-alex{animation:c-in-r 1.4s var(--spring-soft) .3s both}
@keyframes c-in-l{from{translate:-55vw 0;filter:blur(10px)}}
@keyframes c-in-r{from{translate:55vw 0;filter:blur(10px)}}
@keyframes c-sway{from{transform:rotateY(-7deg) rotateX(3deg)}to{transform:rotateY(7deg) rotateX(-2deg)}}

/* Slide 2: the problem. A real chat stalls while the three gaps light up. */
.g{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:5vw}
.g h2{font-size:clamp(44px,5vw,84px);line-height:.98;letter-spacing:-.035em}
.g h2 em{color:#bd4127}
.g-list{list-style:none;margin:clamp(30px,6vh,64px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px)}
.g-list li{position:relative;display:grid;grid-template-columns:52px auto;align-items:baseline;width:fit-content;font-family:Coolvetica,Arial,sans-serif;font-size:clamp(24px,2.3vw,38px);letter-spacing:-.015em;opacity:.22;transition:opacity .5s,transform .9s var(--spring-snap)}
.g-list b{font:700 13px Arial,sans-serif;letter-spacing:.04em;color:#bd4127}
.g-list i{position:absolute;left:52px;right:0;bottom:-6px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left}
.g-list li.is-current{opacity:1;transform:translateX(12px)}
.g-list li.is-current i{animation:g-bar 3.6s linear both}
@keyframes g-bar{to{transform:scaleX(1)}}
.g-device{--ph:clamp(430px,calc(100vh - 270px),660px);perspective:1500px;margin-right:2vw}
.g-tilt{transform-style:preserve-3d;transform:rotateY(-12deg) rotateX(4deg);transition:transform 1.4s var(--spring-soft)}
.scene[data-step="2"] .g-tilt{transform:rotateY(-22deg) rotateX(8deg) translateZ(-90px)}
.scene.active .g-tilt .phone{animation:dd-phone-in 1.5s var(--spring-soft) .1s both}
.g .phone-screen{transition:filter 1.6s ease}
.scene[data-step="2"] .g .phone-screen{filter:grayscale(.75) brightness(.97)}
.g-head{display:flex;align-items:center;gap:.6em}
.g-head .ui-avatar{width:2.4em;height:2.4em}
.g-head b{display:block;font-size:1.05em}.g-head small{display:block;font-size:.8em;color:var(--muted)}
.g-chat{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:.4em 1.2em .6em}
/* Each message row grows from zero height, so earlier messages glide up instead of jumping. */
.g-row{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.3,.8,.2,1) var(--dl,0s)}
.g-row>div{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.g-row>div>*{margin-block:.22em}
.g-row.is-shown{grid-template-rows:1fr}
.g-row:not(.is-shown){transition-delay:0s;transition-duration:.35s}
.g-row.is-shown .ui-msg{animation:g-pop .65s var(--spring-snap) var(--dl,0s) both}
.g-chat .ui-msg{font-size:1.12em;line-height:1.28;padding:.5em .85em;max-width:76%;border-radius:1.15em}
.g-chat .ui-msg.in{transform-origin:0 100%;border-bottom-left-radius:.35em}
.g-chat .ui-msg.out{transform-origin:100% 100%;border-bottom-right-radius:.35em}
@keyframes g-pop{from{opacity:0;transform:translateY(.6em) scale(.7)}}
/* Typing indicator rows appear, wait, then fold away just as the message lands. */
.g-tr{transition:none}
.g-row.g-tr.is-shown{grid-template-rows:0fr}
.g-tr.is-shown{animation:g-typing-row var(--td,1s) ease var(--dl,0s) both}
@keyframes g-typing-row{0%{grid-template-rows:0fr;opacity:0}18%,80%{grid-template-rows:1fr;opacity:1}100%{grid-template-rows:0fr;opacity:0}}
.g-chat .ui-typing{font-size:1em}
.g-match{display:flex;flex-direction:column;align-items:center;gap:.5em;text-align:center;padding:1.1em 1em 1em;margin-bottom:.8em;border-radius:1.3em;background:linear-gradient(160deg,#d9edf6,#f6e5dc)}
.g-match .ui-avatar{width:3.2em;height:3.2em}
.g-match b{font-size:1.02em}
.g-match small{font-size:.8em;color:var(--muted)}
.g-day{align-self:center;margin:.5em 0 .2em;font-size:.76em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.g-receipt,.g-seen{align-self:flex-end;font-size:.78em;color:var(--muted);padding-right:.3em}
.g-seen{margin-top:.2em}
.g-composer{flex:none;position:relative;display:flex;align-items:center;margin:0 1.2em 2.2em;padding:.75em .6em .75em 1.1em;border-radius:2em;background:#fff;box-shadow:0 0 0 1px rgba(48,47,43,.12);font-size:1em}
.g-placeholder{color:var(--muted)}
.g-draft{position:absolute;left:1.1em;white-space:nowrap;clip-path:inset(0 100% 0 0);background:#fff;padding-right:.2em}
.g-caret{width:1.5px;height:1.2em;background:var(--coral);margin-left:.15em;opacity:0}
.g-send{margin-left:auto;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;background:rgba(48,47,43,.15);color:#fff;font-weight:700}
.scene[data-step="2"] .g-draft{animation:g-draft 3.4s both .5s;animation-timing-function:steps(31)}
.scene[data-step="2"] .g-caret{opacity:1;animation:g-blink .8s steps(1) infinite}
@keyframes g-draft{0%{clip-path:inset(0 100% 0 0)}42%,62%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes g-blink{50%{opacity:0}}

/* Slide 3: the proposition. One card changes shape as the line it illustrates lights up. */
.p{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:3vw}
.p-lines{font-size:clamp(50px,5.6vw,96px);line-height:1;letter-spacing:-.04em}
.p-line{display:block;opacity:.2;transform-origin:0 50%;transition:opacity .6s,transform .9s var(--spring-snap)}
.p-line.is-current{opacity:1;transform:translateX(10px)}
.p-line-c{color:#bd4127}
.p-subs{height:60px;margin-top:clamp(24px,4vh,44px)}
.p-subs p{font-family:Coolvetica,Arial,sans-serif;font-size:clamp(20px,1.8vw,28px);line-height:1.15;color:var(--ink);max-width:470px}
.p-stage{--u:min(54vh,34vw);position:relative;align-self:stretch;perspective:1600px}
.p-card{--w:calc(var(--u) * 1.18);--h:calc(var(--u) * .62);--r:calc(var(--u) * .31);--ry:-14deg;--rx:6deg;position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);border-radius:var(--r);overflow:hidden;background:#fdfcf8;box-shadow:0 50px 90px -40px rgba(48,47,43,.6),0 0 0 1px rgba(48,47,43,.05);transform:rotateY(var(--ry)) rotateX(var(--rx));transition:width 1.1s var(--spring-soft),height 1.1s var(--spring-soft),margin 1.1s var(--spring-soft),border-radius 1.1s var(--spring-soft),transform 1.5s var(--spring-soft)}
.scene[data-step="1"] .p-card{--w:calc(var(--u) * .9);--h:calc(var(--u) * .9);--r:calc(var(--u) * .14);--ry:10deg;--rx:4deg}
.scene[data-step="2"] .p-card{--w:calc(var(--u) * .72);--h:calc(var(--u) * 1.04);--r:calc(var(--u) * .07);--ry:-8deg;--rx:-3deg}
.scene.active .p-card{animation:p-enter 1.4s var(--spring-soft) .1s both}
@keyframes p-enter{from{translate:0 40%;scale:.7;opacity:0}}
.p-layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(1.12);filter:blur(12px);transition:opacity .55s ease,transform 1.1s var(--spring-soft),filter .6s ease}
.p-layer.is-shown{opacity:1;transform:none;filter:none;transition-delay:.12s}
.p-l0{background:linear-gradient(120deg,#cfe8f3,#f7e4da)}
.p-pair{display:flex}
.p-pair img{width:calc(var(--u) * .4);height:calc(var(--u) * .4);border-radius:50%;object-fit:cover;object-position:50% 25%;box-shadow:0 0 0 5px #fdfcf8}
.p-pair img+img{margin-left:calc(var(--u) * -.08)}
.p-badge{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);font:700 12px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:30px}
.p-layer.is-shown .p-badge{animation:dd-pop .8s var(--spring-bounce) .7s both}
.p-l1{background:linear-gradient(160deg,#d6ecf6,#f6e6dc)}
.p-scene{width:86%;height:auto;margin-top:8%}
.p-chip{position:absolute;font-family:Coolvetica,Arial,sans-serif;font-size:clamp(17px,1.5vw,22px);background:#fff;padding:10px 16px;border-radius:30px;box-shadow:0 14px 30px -16px rgba(48,47,43,.5)}
.p-chip-a{left:7%;top:10%;rotate:-5deg}.p-chip-b{right:7%;top:24%;rotate:4deg;background:var(--coral)}
.p-layer.is-shown .p-chip-a{animation:p-chip .8s var(--spring-bounce) .6s both}
.p-layer.is-shown .p-chip-b{animation:p-chip .8s var(--spring-bounce) 1.1s both}
@keyframes p-chip{from{scale:.3;opacity:0;translate:0 20px}}
.p-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-layer.is-shown .p-photo{animation:p-kb 5s ease-out both}
@keyframes p-kb{from{scale:1.15}}
.p-booked{position:absolute;top:6%;right:6%;font:700 12px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:var(--blue);padding:8px 13px;border-radius:30px}
.p-layer.is-shown .p-booked{animation:dd-pop .8s var(--spring-bounce) 1.2s both}
.p-plan{position:absolute;left:6%;right:6%;bottom:5%;padding:16px 18px;border-radius:16px;background:rgba(253,252,248,.94);backdrop-filter:blur(8px)}
.p-plan small{font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#bd4127}
.p-plan b{display:block;font-family:Coolvetica,Arial,sans-serif;font-weight:500;font-size:clamp(32px,3vw,48px);line-height:1}
.p-plan span{font-size:14px;color:var(--muted)}
.p-layer.is-shown .p-plan{animation:p-chip .9s var(--spring-snap) .7s both}

body.motion-paused :is(.c-mina,.c-alex,.c-lens i,.c-orbit,.g-tilt .phone,.g-row,.g-row .ui-msg,.g-draft,.p-card,.p-layer *){animation:none!important}

/* Slide 4: who it is for. One onboarding question carries the three starting points; annotations explain the design. */
.o-aud{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(40px,4vw,72px);height:100%}
.o-aud h2{font-size:clamp(44px,4.6vw,74px);line-height:.95;letter-spacing:-.035em}
.o-aud-quotes{height:150px;margin-top:clamp(28px,5.5vh,56px);max-width:480px}
.o-aud-quotes figure{margin:0}
.o-aud-quotes blockquote{margin:0;text-wrap:balance;font-family:Coolvetica,Arial,sans-serif;font-size:clamp(24px,2.1vw,32px);line-height:1.12;letter-spacing:-.012em}
.o-aud-quotes figcaption{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:14px;letter-spacing:.02em;color:var(--muted)}
.o-aud-quotes figcaption:before{content:'';width:28px;height:2px;background:var(--coral)}
.o-aud-device{--ph:clamp(400px,calc(100vh - 290px),680px);--gap:calc(var(--ph) * .13);margin-right:calc(min(270px,19vw) + var(--gap))}
.o-aud-device .ui-note{left:calc(100% + var(--gap));width:min(270px,19vw)}
/* Slide 4 motion: the phone spins in from below (back first), then tilts toward each answer as it is chosen. */
.o-aud-device{perspective:1500px;perspective-origin:20% 45%}
.o-aud-fly,.o-aud-tilt{transform-style:preserve-3d}
.scene.active .o-aud-fly{animation:o-rise-twist 1.9s var(--spring-soft) .05s both}
@keyframes o-rise-twist{from{transform:translateY(108vh) rotateY(-200deg) rotateX(22deg) rotateZ(-6deg)}to{transform:none}}
.scene.active .o-aud-device{animation:o-float 6s ease-in-out 1.8s infinite alternate}
@keyframes o-float{to{translate:0 -10px}}
.o-aud .ui-option.is-current .ui-radio{animation:dd-pop .8s var(--spring-bounce) .25s both}
.o-aud-quotes .is-shown figcaption{animation:dd-blur-in .7s ease .35s both}
@keyframes o-sway{from{transform:none}to{transform:rotateY(5deg) translateY(-1.2%)}}

body.motion-paused :is(.o-aud-fly,.o-aud-device,.o-aud .ui-radio,.o-aud-quotes figcaption){animation:none!important}