/* ═══════════════════════════════════════════════════════════════
   KINDA COOL — LANDING
   One fullscreen stage. The story is driven by scroll (landing.js).
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ease-settle: cubic-bezier(.22,1.08,.32,1);
  --serif:-apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scrollbar-width:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html::-webkit-scrollbar{ display:none; }
body{
  font-family:var(--sans);
  background:#08090c;
  color:#eef2f3;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* the tall runway that creates scroll distance */
.scrollway{ position:relative; width:100%; pointer-events:none; }

/* ════════ PAGE ATMOSPHERE — the room the hand lives in ════════ */
.bgfx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 95% at 68% 18%, #2b3038 0%, #15181f 40%, #0a0c10 74%),
    radial-gradient(80% 65% at 12% 92%, #141821 0%, transparent 56%),
    radial-gradient(60% 50% at 88% 80%, #181c26 0%, transparent 60%),
    #08090c;
}
.bgfx::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(125% 125% at 50% 48%, transparent 54%, rgba(3,7,14,.62) 100%);
}
/* drifting colour blobs — repositioned per chapter (sides ↔ middle), tinted by the letters */
.field{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.blob{
  position:fixed; left:0; top:0;
  width:46vw; height:46vw;
  transform:translate(-50%,-50%);
  transition:transform 2.8s var(--ease-settle);
  will-change:transform;
}
.blob i{
  display:block; width:100%; height:100%; border-radius:50%;
  filter:blur(92px); mix-blend-mode:screen;
  opacity:0;
  transition:background 2s ease, opacity 1.8s ease;
  animation:blobFloat 20s ease-in-out infinite alternate;
}
body.ready .blob i{ opacity:.6; }
.blob:nth-child(2) i{ animation-duration:25s; animation-delay:-8s; }
.blob:nth-child(3) i{ animation-duration:30s; animation-delay:-15s; }
body.ready .blob:nth-child(3) i{ opacity:.5; }
@keyframes blobFloat{
  0%{ transform:translate(0,0) scale(1) }
  50%{ transform:translate(4%,-5%) scale(1.08) }
  100%{ transform:translate(-5%,4%) scale(.95) }
}

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  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='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.055; mix-blend-mode:overlay;
}

/* ════════ THE FIXED VIEWPORT ════════ */
.viewport{
  position:fixed; inset:0; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0, .95fr);
  align-items:stretch;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.4s ease;
}
body.ready .viewport{ opacity:1; }

/* ════════ LEFT — THE SENTENCES ════════ */
.lines{
  position:relative; z-index:3;
  display:grid; align-items:center;
  padding-left:clamp(34px, 7vw, 130px);
  padding-right:clamp(10px, 2vw, 40px);
}
.line-block{
  grid-area:1/1;
  opacity:0;
  will-change:transform, opacity, filter;
}
.kicker{
  display:flex; align-items:flex-end; gap:6px;
  height:clamp(34px, 5vh, 52px);
  margin-bottom:clamp(16px, 2.6vh, 30px);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s var(--ease-settle);
}
.line-block.speaking .kicker{ opacity:1; transform:translateY(0); }
.kicker .eq{ display:flex; align-items:flex-end; gap:clamp(4px,.5vw,6px); height:100%; }
.kicker .eq i{
  width:clamp(4px,.42vw,6px); border-radius:99px;
  height:16%;
  background:var(--eq, linear-gradient(180deg,#FFB088,#FF4D3D));
  box-shadow:0 0 16px var(--eqglow, rgba(255,80,60,.55));
}
.line-block.speaking .eq i{ animation:eq 1s ease-in-out infinite; }
.kicker .eq i:nth-child(1){ animation-delay:0s }
.kicker .eq i:nth-child(2){ animation-delay:.13s }
.kicker .eq i:nth-child(3){ animation-delay:.27s }
.kicker .eq i:nth-child(4){ animation-delay:.06s }
.kicker .eq i:nth-child(5){ animation-delay:.2s }
.kicker .eq i:nth-child(6){ animation-delay:.33s }
.kicker .eq i:nth-child(7){ animation-delay:.04s }
@keyframes eq{ 0%,100%{height:16%} 50%{height:100%} }

.line{
  font-size:clamp(34px, 4.1vw, 76px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.032em;
  text-wrap:balance;
  max-width:13em;
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:gradDrift 9s ease-in-out infinite alternate;
}
@keyframes gradDrift{ from{ background-position:0% 50% } to{ background-position:100% 50% } }
.line .wb{ display:inline-block; margin-right:.26em; }
.line .wb:last-child{ margin-right:0; }
.line i .wb{ margin-right:.30em; }
.line i .wb:last-child{ margin-right:0; }
.line .ch{
  opacity:0;
  transition:opacity .12s linear;
}
.line .ch.on{ opacity:1; }

/* brand chapters (intro / finale) */
.line--brand{
  font-size:clamp(46px, 5.6vw, 108px);
  font-weight:600;
  letter-spacing:-.038em;
  line-height:1.12;
  padding-bottom:.1em;
}
.line--brand i{
  font-style:normal; font-weight:770;
  letter-spacing:-.03em;
}
.line-sub{
  margin-top:clamp(18px, 2.8vh, 32px);
  font-size:clamp(19px, 1.7vw, 30px);
  font-weight:500; letter-spacing:.01em;
  color:rgba(238,242,243,.62);
  max-width:34em;
  opacity:0; transform:translateY(10px); filter:blur(6px);
  transition:opacity .9s ease .15s, transform .9s var(--ease-settle) .15s, filter .9s ease .15s;
}
.line-block.subon .line-sub{ opacity:1; transform:translateY(0); filter:blur(0); }

.caret{
  position:absolute; z-index:4; pointer-events:none;
  width:4px; border-radius:3px;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,.4));
  box-shadow:0 0 18px rgba(255,255,255,.65), 0 0 44px rgba(255,120,90,.5);
  opacity:0;
  animation:caretBlink 1.05s steps(2) infinite;
}
@keyframes caretBlink{ 50%{ filter:brightness(.45) } }

/* ════════ RIGHT — THE HAND ════════ */
.hero{
  position:relative; z-index:2;
  display:grid; place-items:center;
  min-width:0;
}
.device{
  position:relative;
  height:min(88vh, 88svh);
  aspect-ratio:100/204;
  max-width:94%;
  border-radius:15.5% / 7.6%;
  padding:1.15%;
  background:
    linear-gradient(150deg, #3a3f49 0%, #14171d 26%, #0c0e13 52%, #20242c 76%, #07090d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 1px rgba(255,255,255,.22),
    inset 0 -2px 3px rgba(0,0,0,.6),
    0 2px 2px rgba(0,0,0,.5),
    0 30px 70px -28px rgba(0,0,0,.85),
    0 60px 130px -44px rgba(0,0,0,.7);
  animation:handFloat 12s ease-in-out infinite;
  will-change:transform;
  --voice:.4; --talk:.3; --kick:0; --vkick:0;
}
@keyframes handFloat{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-1%) rotate(.2deg) } }
.bezel{
  position:relative; z-index:1; width:100%; height:100%;
  border-radius:13.4% / 6.6%;
  background:#04050a;
  box-shadow:inset 0 0 0 1.5px #000;
  overflow:hidden;
}
/* ambient light the screen throws into the room (Siri-style) */
.dev-glow{
  position:absolute; left:50%; transform:translateX(-50%);
  pointer-events:none; border-radius:50%;
  filter:blur(58px); mix-blend-mode:screen;
}
.dev-glow--you{
  bottom:-9%; width:116%; height:46%;
  background:radial-gradient(50% 58% at 50% 62%, rgba(255,72,52,.55), rgba(231,40,150,.2) 52%, transparent 76%);
  opacity:calc(.4 + var(--voice) * .6);
}
.dev-glow--it{
  top:-8%; width:110%; height:40%;
  background:radial-gradient(50% 58% at 50% 38%, rgba(61,139,255,.5), rgba(122,108,255,.18) 52%, transparent 76%);
  opacity:calc(.32 + var(--talk) * .65);
}
.dev-shadow{
  position:absolute; left:50%; bottom:-6%; transform:translateX(-50%);
  width:78%; height:8%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.65), transparent 72%);
  filter:blur(24px);
}

/* the live screen, projected exactly onto the phone in the photo —
   percentages calibrated against assets/hand-phone.png */
.screenfit{
  position:absolute; inset:0;
  container-type:inline-size;
}

/* light spilling out of the screen onto bezel & hand (like the reference shot) */
.spill{ position:absolute; pointer-events:none; }
.spill--you{
  left:-3%; right:-3%; bottom:-3.5%; height:26%;
  background:radial-gradient(58% 95% at 50% 100%, rgba(255,72,50,.34), rgba(215,38,143,.10) 55%, transparent 75%);
  filter:blur(14px);
  opacity:calc(.45 + var(--voice) * .55);
  mix-blend-mode:screen;
}
.spill--it{
  left:-3%; right:-3%; top:-3.5%; height:23%;
  background:radial-gradient(58% 95% at 50% 0%, rgba(70,150,255,.2), rgba(122,108,255,.07) 55%, transparent 75%);
  filter:blur(15px);
  opacity:calc(.24 + var(--talk) * .5);
  mix-blend-mode:screen;
}

/* ════════ THE SCREEN (ported + upgraded from concept v7) ════════ */
.screen{
  position:relative; width:100%; height:100%;
  border-radius:12.3cqw;
  overflow:hidden;
  isolation:isolate;
  background:#0A0C10;
  --text:#F2F4F6; --muted:rgba(242,244,246,.55); --faint:rgba(242,244,246,.30); --hair:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px #000, 0 0 30px -10px rgba(255,150,120,.13);
}
/* faint warm/cool wash in the glass, like the reference shot */
.screen .wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 34% at 12% 0%, rgba(255,150,70,.07), transparent 70%),
    radial-gradient(60% 34% at 88% 100%, rgba(110,90,255,.06), transparent 70%),
    linear-gradient(165deg, rgba(255,255,255,.025), transparent 28%);
}
.screen .noise{
  position:absolute; inset:0; z-index:12; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}
.island{
  position:absolute; z-index:11; top:2.6cqw; left:50%; transform:translateX(-50%);
  width:27cqw; height:7.6cqw; border-radius:999px;
  background:#000;
  box-shadow:0 0 0 .4cqw rgba(0,0,0,.55), inset 0 0 1.4cqw rgba(255,255,255,.05);
}
.island::after{
  content:""; position:absolute; right:2.4cqw; top:50%; transform:translateY(-50%);
  width:3.4cqw; height:3.4cqw; border-radius:50%;
  background:radial-gradient(40% 40% at 40% 35%, #1c2733, #05070a 70%);
}

/* ──── background aurora inside the screen ──── */
.echo{ position:absolute; inset:-16%; z-index:1; pointer-events:none; animation:echoHue 26s ease-in-out infinite alternate; }
@keyframes echoHue{ from{ filter:hue-rotate(-8deg) } to{ filter:hue-rotate(12deg) } }
.echo i{ position:absolute; border-radius:50%; filter:blur(54px); }
.echo i:nth-child(1){ width:70%; height:36%; left:-10%; bottom:6%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(224,49,46,.20), transparent 70%);
  animation:drift1 24s ease-in-out infinite alternate; opacity:calc(.4 + var(--voice) * .6); }
.echo i:nth-child(2){ width:76%; height:38%; right:-12%; top:8%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(61,139,255,.13), transparent 70%);
  animation:drift2 30s ease-in-out infinite alternate; opacity:calc(.35 + var(--talk) * .65); }
.echo i:nth-child(3){ width:52%; height:30%; left:22%; top:40%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(122,108,255,.12), transparent 70%);
  animation:drift3 38s ease-in-out infinite alternate; }
.echo i:nth-child(4){ width:42%; height:24%; right:14%; bottom:26%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(77,216,230,.10), transparent 70%);
  animation:drift4 32s ease-in-out infinite alternate; }
.echo i:nth-child(5){ width:58%; height:26%; left:6%; top:24%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(215,38,143,.08), transparent 70%);
  animation:drift5 44s ease-in-out infinite alternate; }
@keyframes drift1{ from{transform:translate(0,0) scale(1)}    to{transform:translate(11%,-9%) scale(1.2)} }
@keyframes drift2{ from{transform:translate(0,0) scale(1)}    to{transform:translate(-10%,10%) scale(1.14)} }
@keyframes drift3{ from{transform:translate(0,0) rotate(0)}   to{transform:translate(8%,12%) rotate(12deg) scale(1.12)} }
@keyframes drift4{ from{transform:translate(0,0) scale(.92)}  to{transform:translate(-9%,-11%) scale(1.16)} }
@keyframes drift5{ from{transform:translate(0,0) scale(1.05)} to{transform:translate(7%,9%) scale(.9)} }

/* ──── voice fields (red below = you, blue above = it) ──── */
.voice{ position:absolute; left:-6%; right:-6%; z-index:2; pointer-events:none; }
.voice i{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
.voice--you{ bottom:-7%; height:24%;
  -webkit-mask-image:radial-gradient(150% 110% at 50% 102%, #000 36%, rgba(0,0,0,.4) 62%, transparent 86%);
          mask-image:radial-gradient(150% 110% at 50% 102%, #000 36%, rgba(0,0,0,.4) 62%, transparent 86%); }
.voice--you i{ transform-origin:50% 100%; }
.voice--you i:nth-child(1){ left:4%; right:4%; bottom:-4%; height:92%;
  background:radial-gradient(58% 60% at 50% 100%, rgba(224,49,46,.46), rgba(224,49,46,0) 70%);
  filter:blur(26px); transform:scaleY(calc(.62 + var(--voice) * .45)); opacity:calc(.4 + var(--voice) * .55); }
.voice--you i:nth-child(2){ left:10%; width:36%; bottom:-8%; height:68%;
  background:radial-gradient(50% 50% at 50% 85%, rgba(255,122,69,.32), transparent 70%);
  filter:blur(22px); transform:scaleY(calc(.55 + var(--voice) * .5)) translateX(calc(var(--voice) * 6%)); opacity:calc(.3 + var(--voice) * .6); }
.voice--you i:nth-child(3){ right:8%; width:38%; bottom:-6%; height:62%;
  background:radial-gradient(50% 50% at 50% 85%, rgba(215,38,143,.28), transparent 70%);
  filter:blur(24px); transform:scaleY(calc(.6 + var(--voice) * .42)) translateX(calc(var(--voice) * -5%)); opacity:calc(.3 + var(--voice) * .55); }

.voice--it{ top:-7%; height:21%;
  -webkit-mask-image:radial-gradient(150% 110% at 50% -2%, #000 34%, rgba(0,0,0,.38) 60%, transparent 84%);
          mask-image:radial-gradient(150% 110% at 50% -2%, #000 34%, rgba(0,0,0,.38) 60%, transparent 84%); }
.voice--it i{ transform-origin:50% 0%; }
.voice--it i:nth-child(1){ left:4%; right:4%; top:-4%; height:90%;
  background:radial-gradient(60% 58% at 50% 0%, rgba(61,139,255,.42), rgba(61,139,255,0) 72%);
  filter:blur(26px); transform:scaleY(calc(.6 + var(--talk) * .55)); opacity:calc(.3 + var(--talk) * .65); }
.voice--it i:nth-child(2){ left:8%; width:40%; top:-8%; height:64%;
  background:radial-gradient(50% 50% at 50% 18%, rgba(77,216,230,.24), transparent 70%);
  filter:blur(22px); transform:scaleY(calc(.55 + var(--talk) * .55)) translateX(calc(var(--talk) * -5%)); opacity:calc(.25 + var(--talk) * .65); }
.voice--it i:nth-child(3){ right:6%; width:42%; top:-6%; height:58%;
  background:radial-gradient(50% 50% at 50% 18%, rgba(122,108,255,.22), transparent 70%);
  filter:blur(24px); transform:scaleY(calc(.58 + var(--talk) * .5)) translateX(calc(var(--talk) * 5%)); opacity:calc(.25 + var(--talk) * .6); }

/* ──── THE EDGE — red below (you), blue above (it). GPU-rotated flow. ──── */
.rim{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  border-radius:12.3cqw;
}
/* you = a glow pool at the BOTTOM only; it = a pool at the TOP only.
   They must NOT meet — solid at the edge, fully gone by ~40% so the
   mid-sides stay dark (a clear gap between the two voices). */
.rim--you{
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 13%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.14) 33%, transparent 39%);
          mask-image:linear-gradient(to top, #000 0%, #000 13%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.14) 33%, transparent 39%);
}
.rim--it{
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 13%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.14) 33%, transparent 39%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 13%, rgba(0,0,0,.5) 24%, rgba(0,0,0,.14) 33%, transparent 39%);
}
.rim i{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  padding:var(--w,2px);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
}
.rim i b{
  position:absolute; left:50%; top:50%;
  height:165%; aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(0deg);
  will-change:transform;
}
/* warm flow — you (bottom): peach·coral·red·magenta·pink, evenly blended */
.rim--you .eflow b{
  background:conic-gradient(from 0deg,
    #FFC59C 0deg, #FF9A6E 40deg, #FF6A4F 80deg, #F2383C 118deg, #E0218E 156deg,
    #C2186B 196deg, #E83B47 238deg, #FF7A52 286deg, #FFA982 326deg, #FFC59C 360deg);
}
/* cool flow — it (top): ice·blue·indigo·violet·cyan, evenly blended */
.rim--it .eflow b{
  background:conic-gradient(from 0deg,
    #C7E3FF 0deg, #84B9FF 40deg, #4F94FF 80deg, #5277FF 118deg, #8A6CFF 156deg,
    #9F7BFF 196deg, #5AA6F0 238deg, #4DD8E6 286deg, #93D9FF 326deg, #C7E3FF 360deg);
}
/* (1) broad halo — the soft liquid body, very diffuse (kept tight so it
   pools at the edge instead of bleeding across to the other voice) */
.ebloom{ --w:12px; filter:blur(13px) saturate(1.12); mix-blend-mode:screen; }
.rim--you .ebloom{ opacity:calc(.30 + var(--voice) * .5); }
.rim--it  .ebloom{ opacity:calc(.28 + var(--talk) * .5); }
.ebloom b{ animation:edgeSpin 76s linear infinite; }
/* (2) soft colour glow — mid depth */
.eglow{ --w:6.5px; filter:blur(7.5px); mix-blend-mode:screen; }
.rim--you .eglow{ opacity:calc(.40 + var(--voice) * .55); }
.rim--it  .eglow{ opacity:calc(.40 + var(--talk) * .55); }
.eglow b{ animation:edgeSpin 50s linear infinite reverse; }
/* (3) saturated colour — keeps it rich & multi-hue (not just red/blue), gentle drift */
.epool{ --w:4.6px; filter:blur(4.6px); mix-blend-mode:screen; }
.rim--you .epool{ opacity:calc(.28 + var(--voice) * .5); }
.rim--it  .epool{ opacity:calc(.28 + var(--talk) * .5); }
.rim--you .epool b{
  background:conic-gradient(from 0deg,
    rgba(255,150,92,.85) 0deg, rgba(255,74,82,.7) 72deg, rgba(224,33,142,.58) 144deg,
    rgba(194,24,107,.46) 216deg, rgba(243,60,57,.66) 288deg, rgba(255,150,92,.85) 360deg);
}
.rim--it .epool b{
  background:conic-gradient(from 0deg,
    rgba(122,190,255,.85) 0deg, rgba(82,150,255,.7) 72deg, rgba(138,108,255,.58) 144deg,
    rgba(159,123,255,.46) 216deg, rgba(77,216,230,.66) 288deg, rgba(122,190,255,.85) 360deg);
}
.epool b{ animation:edgeSpin 37s linear infinite; }
/* (4) gloss core — a soft bright sheen at the very edge (the "wet glass" definition) */
.eline{ --w:2.4px; filter:blur(1.3px); mix-blend-mode:screen; }
.rim--you .eline{ opacity:calc(.46 + var(--voice) * .5); }
.rim--it  .eline{ opacity:calc(.46 + var(--talk) * .5); }
.eline b{ animation:edgeSpin 29s linear infinite; }
/* (5) travelling sheen — a slow, soft, wide highlight gliding along the edge */
.eglint{ --w:5.5px; filter:blur(5px); mix-blend-mode:screen; }
.rim--you .eglint{ opacity:calc(.16 + var(--voice) * .4); }
.rim--it  .eglint{ opacity:calc(.15 + var(--talk) * .4); }
.eglint b{
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 98deg,
    rgba(255,250,245,.05) 130deg, rgba(255,248,242,.5) 165deg, rgba(255,250,245,.05) 200deg,
    transparent 232deg, transparent 360deg);
  animation:edgeSpin 18s linear infinite;
}
@keyframes edgeSpin{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

/* ──── subtitles ──── */
.subtitles{
  position:absolute; top:0; left:0; right:0; z-index:8;
  padding:13.4cqw 8cqw 0;
  text-align:center;
}
.puck{
  position:absolute; z-index:0; pointer-events:none;
  transform:translate(-50%,-50%);
  height:9.5cqw; border-radius:999px;
  background:radial-gradient(50% 62% at 50% 52%, rgba(125,180,255,.17), rgba(125,180,255,.04) 60%, transparent 78%);
  filter:blur(2.2cqw);
  opacity:0;
  transition:left .22s var(--ease-settle), top .22s var(--ease-settle), width .22s var(--ease-settle), opacity .35s ease;
}
.sub-line{
  position:relative; z-index:1;
  font-size:4.5cqw; line-height:1.52; font-weight:510;
  letter-spacing:.004em;
  min-height:calc(4.5cqw * 1.52 * 2);
  transition:opacity .5s ease;
}
.sub-line .w{
  color:var(--faint);
  display:inline-block;
  transition:color .38s ease, text-shadow .5s ease, transform .38s var(--ease-settle);
}
.sub-line .w.said{ color:rgba(242,244,246,.92); }
.sub-line .w.near{ color:rgba(248,250,252,.96); }
.sub-line .w.now{
  transform:translateY(-.045em);
  color:#fff;
  text-shadow:0 0 14px rgba(165,205,255,.42), 0 0 32px rgba(110,170,255,.18);
}

/* ──── the stage & its generated views ──── */
.stagewrap{
  position:absolute; inset:0; z-index:5;
}
.scene{
  position:absolute; inset:0; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:3.2cqw; padding:0 6.4cqw;
  transform:translateY(2cqw);
  opacity:0; filter:blur(14px);
  transition:opacity .8s var(--ease-settle), filter .8s var(--ease-settle);
  pointer-events:none;
}
.scene.on{ opacity:1; filter:blur(0); }

.card{
  border-radius:7.4cqw; padding:4.2cqw 4.8cqw;
  position:relative; overflow:hidden;
  backdrop-filter:blur(38px) saturate(2);
  -webkit-backdrop-filter:blur(38px) saturate(2);
  background:
    radial-gradient(140% 110% at 50% -12%, rgba(255,255,255,.11), rgba(255,255,255,.012) 56%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01) 55%, rgba(255,255,255,.035) 92%);
  box-shadow:
    inset 0 1.4px 0 rgba(255,255,255,.20),
    inset 1px 0 0 rgba(255,255,255,.055),
    inset -1px 0 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 -14px 30px -20px rgba(255,255,255,.08),
    0 1px 1px rgba(0,0,0,.45),
    0 10px 22px -12px rgba(0,0,0,.65),
    0 32px 64px -34px rgba(0,0,0,.92);
  opacity:0; transform:translateY(18px) scale(.97); filter:blur(12px);
  transition:opacity .9s var(--ease-settle), filter .9s var(--ease-settle), transform .9s var(--ease-settle);
}
.scene.on .card{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.scene.on .card:nth-child(2){ transition-delay:.14s }
.scene.on .card:nth-child(3){ transition-delay:.30s }
.scene.on .card:nth-child(4){ transition-delay:.44s }

.card .rimlite{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  background:conic-gradient(from 218deg at 50% 50%,
    transparent 0deg, transparent 70deg,
    rgba(255,255,255,.08) 120deg, rgba(255,255,255,.5) 160deg, rgba(255,255,255,.08) 200deg,
    transparent 250deg, transparent 360deg);
  filter:blur(.6px);
  opacity:.55;
}
.card:nth-child(2) .rimlite{ animation-duration:27s; animation-delay:-9s }
.card:nth-child(3) .rimlite{ animation-duration:24s; animation-delay:-17s }
.card::before{
  content:""; position:absolute; inset:-32%; pointer-events:none;
  background:
    radial-gradient(30% 22% at 28% 22%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(36% 28% at 76% 88%, rgba(122,108,255,.05), transparent 70%);
  animation:specular 15s ease-in-out infinite alternate;
}
@keyframes specular{
  0%{ transform:translate(0,0) scale(1) }
  50%{ transform:translate(8%,5%) scale(1.06) }
  100%{ transform:translate(-6%,9%) scale(.97) }
}

.row{ display:flex; align-items:center; gap:3.6cqw; position:relative; }
.ic{
  width:11cqw; height:11cqw; flex:none;
  border-radius:3.6cqw;
  display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,.03) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.07);
  color:#BFD6FF;
}
.ic svg{ width:5.2cqw; height:5.2cqw; }
.ic--red{ color:#FFA89C; }
.ic--green{ color:#9CE8C5; }
.card h3{
  flex:1; min-width:0;
  font-size:4.9cqw; font-weight:620; letter-spacing:-.018em;
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.meta{
  flex:none; white-space:nowrap;
  font-size:3.5cqw; font-weight:520; color:var(--muted);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.meta--ask{
  padding:1.6cqw 3cqw; border-radius:999px;
  font-size:3.1cqw; font-weight:580;
  background:rgba(224,49,46,.14); color:#FFB1A4;
  box-shadow:inset 0 0 0 1px rgba(224,49,46,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.meta--ok{
  padding:1.6cqw 3cqw; border-radius:999px;
  font-size:3.1cqw; font-weight:580;
  background:rgba(61,200,140,.12); color:#9CE8C5;
  box-shadow:inset 0 0 0 1px rgba(61,200,140,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

.detail{ margin-top:3.6cqw; }
.detail-row{
  display:flex; align-items:center; gap:3.2cqw;
  padding:3cqw 0;
  border-top:1px solid var(--hair);
  opacity:0; filter:blur(8px); transform:translateY(8px);
  transition:opacity .7s var(--ease-settle), filter .7s var(--ease-settle), transform .7s var(--ease-settle);
}
.scene.on .detail-row{ opacity:1; filter:blur(0); transform:translateY(0); }
.scene.on .detail-row:nth-child(1){ transition-delay:.34s }
.scene.on .detail-row:nth-child(2){ transition-delay:.50s }
.scene.on .detail-row:nth-child(3){ transition-delay:.66s }
.detail-row .n{
  font-size:3cqw; color:var(--faint); font-variant-numeric:tabular-nums; font-weight:560;
  width:3.4cqw; flex:none;
}
.detail-row .dr-t{
  flex:1; font-size:3.9cqw; font-weight:550; color:var(--text); letter-spacing:-.008em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.detail-row .dr-m{ flex:none; font-size:3.1cqw; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.detail-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:3cqw; border-top:1px solid var(--hair);
  opacity:0; filter:blur(8px); transform:translateY(8px);
  transition:opacity .7s var(--ease-settle) .8s, filter .7s var(--ease-settle) .8s, transform .7s var(--ease-settle) .8s;
}
.scene.on .detail-foot{ opacity:1; filter:blur(0); transform:translateY(0); }
.detail-foot .tag{ display:inline-flex; align-items:center; gap:1.6cqw; font-size:3.1cqw; font-weight:560; color:#A8CBFF; white-space:nowrap; }
.detail-foot .tag i{ width:1.5cqw; height:1.5cqw; border-radius:50%; background:currentColor; box-shadow:0 0 2cqw currentColor; }
.detail-foot .meta{ font-size:3.1cqw; color:var(--faint); white-space:nowrap; }

/* check circles (tasks) */
.chk{
  width:6.4cqw; height:6.4cqw; flex:none; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);
  color:transparent;
}
.chk svg{ width:3.4cqw; height:3.4cqw; }
.chk--done{
  background:linear-gradient(160deg, #34d399, #0ea5e9);
  box-shadow:0 0 12px -2px rgba(52,211,153,.55), inset 0 1px 0 rgba(255,255,255,.4);
  color:#06281c;
}

/* rest scene — quiet clock */
.sc-rest{ align-items:center; justify-content:center; gap:1.4cqw; }
.c-date{
  font-size:4.2cqw; font-weight:560; color:rgba(242,244,246,.6); letter-spacing:.02em;
  white-space:nowrap;
  opacity:0; transform:translateY(10px); filter:blur(6px);
  transition:all .9s var(--ease-settle) .1s;
}
.c-time{
  font-size:22cqw; font-weight:240; letter-spacing:-.01em; line-height:1;
  background:linear-gradient(180deg, #ffffff, #b9cce0 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(12px) scale(.97); filter:blur(8px);
  transition:all 1s var(--ease-settle) .2s;
}
.c-hint{
  margin-top:2.4cqw;
  font-size:3.6cqw; font-weight:520; color:rgba(242,244,246,.4);
  white-space:nowrap;
  opacity:0; transform:translateY(8px);
  transition:all .9s var(--ease-settle) .45s;
}
.scene.on .c-date, .scene.on .c-time, .scene.on .c-hint{
  opacity:1; transform:translateY(0) scale(1); filter:blur(0);
}

/* finale wordmark scene */
.sc-fin{ align-items:center; justify-content:center; gap:2.6cqw; }
.wordmark{
  font-size:13cqw; font-weight:640; letter-spacing:-.04em; line-height:1;
  white-space:nowrap;
  color:var(--text);
  opacity:0; transform:translateY(12px) scale(.96); filter:blur(10px);
  transition:all 1.1s var(--ease-settle) .15s;
}
.wordmark i{ font-style:normal; font-weight:720; letter-spacing:-.03em; }
.wm-sub{
  font-size:3.8cqw; font-weight:540; color:rgba(242,244,246,.45); letter-spacing:.26em; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:all .9s var(--ease-settle) .5s;
}
.scene.on .wordmark, .scene.on .wm-sub{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

/* project progress */
.bar{
  margin-top:3.4cqw; height:2cqw; border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
.bar i{
  display:block; height:100%; width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, #2F86FF, #4DD8E6 70%, #9CF2D8);
  box-shadow:0 0 14px rgba(77,216,230,.6);
  transition:width 1.6s var(--ease-settle) .5s;
}
.scene.on .bar i{ width:82%; }
.bar-meta{
  display:flex; justify-content:space-between; margin-top:2cqw;
  font-size:3.1cqw; color:var(--faint); font-variant-numeric:tabular-nums;
  white-space:nowrap; gap:2cqw;
}

/* mail */
.mail-body{
  margin-top:3.4cqw; padding-top:3cqw; border-top:1px solid var(--hair);
  display:flex; flex-direction:column; gap:2.2cqw;
}
.mail-sub{ font-size:4cqw; font-weight:600; color:var(--text); letter-spacing:-.012em; }
.mail-line{ font-size:3.6cqw; line-height:1.55; color:var(--muted); }
.mail-line.dim{ color:var(--faint); }

/* sent confirmation */
.sc-sent{ justify-content:center; }
.sent-big{
  display:flex; flex-direction:column; align-items:center; gap:3cqw; padding:7cqw 4.8cqw;
}
.sent-ring{
  width:16cqw; height:16cqw; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 0%, rgba(77,216,230,.25), rgba(47,134,255,.10) 70%);
  box-shadow:inset 0 0 0 1.5px rgba(140,220,255,.4), 0 0 30px -4px rgba(77,216,230,.5);
  color:#CFF6FF;
}
.sent-ring svg{ width:7cqw; height:7cqw; }
.sent-t{ font-size:5.4cqw; font-weight:620; letter-spacing:-.018em; color:var(--text); }
.sent-m{ font-size:3.6cqw; color:var(--muted); }

/* calendar */
.cal{
  margin-top:3.4cqw;
  display:grid; grid-template-columns:repeat(7,1fr); gap:1.6cqw;
}
.cal b{
  font-size:2.6cqw; font-weight:600; color:var(--faint); text-align:center;
  text-transform:uppercase; letter-spacing:.08em; padding-bottom:1cqw;
}
.cal span{
  aspect-ratio:1; display:grid; place-items:center;
  font-size:3.1cqw; font-weight:540; color:var(--muted);
  font-variant-numeric:tabular-nums;
  border-radius:2cqw;
}
.cal span.away{
  background:rgba(224,49,46,.10);
  color:rgba(255,177,164,.75);
  box-shadow:inset 0 0 0 1px rgba(224,49,46,.16);
}
.cal span.back{
  background:linear-gradient(160deg, rgba(47,134,255,.85), rgba(77,216,230,.75));
  color:#fff; font-weight:680;
  box-shadow:0 0 16px -2px rgba(77,216,230,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
.cal span.today{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); color:var(--text); }

/* slides */
.thumbs{
  margin-top:3.4cqw;
  display:grid; grid-template-columns:1fr 1fr; gap:2.6cqw;
}
.thumb{
  aspect-ratio:16/10; border-radius:2.6cqw;
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, #16202c, #0d141d);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0; transform:translateY(10px) scale(.94); filter:blur(8px);
  transition:opacity .8s var(--ease-settle), transform .8s var(--ease-settle), filter .8s var(--ease-settle);
}
.scene.on .thumb{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
.scene.on .thumb:nth-child(1){ transition-delay:.45s }
.scene.on .thumb:nth-child(2){ transition-delay:.60s }
.scene.on .thumb:nth-child(3){ transition-delay:.75s }
.scene.on .thumb:nth-child(4){ transition-delay:.90s }
.thumb::before{
  content:""; position:absolute; left:12%; top:18%; height:9%; width:56%;
  border-radius:99px; background:linear-gradient(90deg, #7FB2FF, #C9A6FF);
  opacity:1;
}
.thumb::after{
  content:""; position:absolute; left:12%; top:42%; right:14%; bottom:18%;
  border-radius:6px;
  background:
    linear-gradient(rgba(255,255,255,.30) 0 0) 0 0 / 84% 9% no-repeat,
    linear-gradient(rgba(255,255,255,.20) 0 0) 0 34% / 64% 9% no-repeat,
    linear-gradient(rgba(255,255,255,.14) 0 0) 0 68% / 74% 9% no-repeat;
}
.thumb:nth-child(2)::before{ width:38%; background:linear-gradient(90deg, #4DD8E6, #7FB2FF); }
.thumb:nth-child(3)::before{ width:48%; background:linear-gradient(90deg, #FF8E72, #E0218E); }
.thumb:nth-child(4)::after{
  background:
    radial-gradient(circle at 24% 50%, rgba(127,178,255,.5) 0 18%, transparent 19%),
    radial-gradient(circle at 52% 50%, rgba(77,216,230,.45) 0 24%, transparent 25%),
    radial-gradient(circle at 80% 50%, rgba(224,49,46,.4) 0 15%, transparent 16%);
}

/* ──── controls (the only permanent chrome) ──── */
.controls{
  position:absolute; left:0; right:0; bottom:6.4cqw; z-index:9;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 8cqw;
  pointer-events:none;
}
.btn{ display:grid; place-items:center; border-radius:50%; position:relative; }
.btn--kb{
  width:11cqw; height:11cqw;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.07);
  color:rgba(242,244,246,.72);
}
.btn--kb svg{ width:6cqw; height:6cqw; }
.btn--voice{ width:12.6cqw; height:12.6cqw; }
.btn--voice .lens{
  position:absolute; inset:0; border-radius:50%;
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,86,68,calc(.20 + var(--voice)*.22)),
    0 6px 18px -8px rgba(224,49,46,calc(.40 + var(--voice)*.25)),
    0 2px 6px rgba(0,0,0,.35);
}
.btn--voice .tint{
  position:absolute; inset:1px; border-radius:50%;
  background:rgba(255,72,56,1);
  opacity:calc(.10 + var(--voice) * .14);
}
.btn--voice .lens::after{
  content:""; position:absolute; left:8%; right:8%; top:5%; height:42%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}
.caustic{
  position:absolute; left:12%; right:12%; bottom:-16%; height:38%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,70,52,calc(.12 + var(--voice)*.16)), transparent 70%);
  filter:blur(2cqw);
}
.btn--voice svg{ width:5.2cqw; height:5.2cqw; position:relative; z-index:1; color:#FFE9E4; }

/* ════════ CHROME — counter & hint ════════ */
.prog-glow{
  position:fixed; left:-7vw; top:0; z-index:1; pointer-events:none;
  width:20vw; height:26vh; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(150,180,235,.5), rgba(120,150,220,.12) 55%, transparent 72%);
  filter:blur(60px); mix-blend-mode:screen;
  opacity:0;
  transition:opacity 1.4s ease;
  will-change:transform;
}
body.ready .prog-glow{ opacity:.42; }
.hint{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  color:rgba(238,242,243,.42);
  font-size:11px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  opacity:0;
  transition:opacity .9s ease;
}
.hint svg{ width:14px; height:14px; animation:hintBob 2.2s ease-in-out infinite; }
@keyframes hintBob{ 0%,100%{ transform:translateY(0); opacity:.4 } 50%{ transform:translateY(5px); opacity:1 } }
.hint.show{ opacity:1; }

/* ════════ MOBILE — lighter compositing + a layout that always fits ════════ */
@media (max-width: 860px), (max-aspect-ratio: 4/5){
  /* pin to the VISIBLE viewport (svh) so the browser toolbar never crops it */
  .viewport{
    inset:0 0 auto 0;
    height:100svh;
    grid-template-columns:1fr;
    grid-template-rows:21svh 1fr;
  }
  /* you-say on top, the phone below — sized so they never overlap */
  .lines{
    order:1; align-self:center;
    padding:0 8vw;
    align-items:center; justify-items:center; text-align:center;
  }
  .line-block{ width:100%; }
  .kicker{ justify-content:center; margin-bottom:10px; height:auto; }
  .line{ font-size:clamp(24px, 6.6vw, 40px); max-width:none; margin-inline:auto; }
  .line--brand{ font-size:clamp(30px, 8.6vw, 50px); }
  .line-sub{ font-size:14px; margin-top:10px; margin-inline:auto; }
  .hero{ order:2; align-items:start; padding-top:1.5svh; overflow:hidden; min-height:0; }
  .device{
    height:min(66svh, 150vw); width:auto;
    aspect-ratio:100/204; margin-top:0;
  }
  .prog-glow, .hint, .caret, .puck{ display:none; }

  /* ── PERFORMANCE: drop what mobile GPUs choke on ── */
  .grain, .screen .noise{ display:none; }                  /* full-screen blend overlays */
  .card{                                                    /* backdrop-blur = the #1 cost */
    backdrop-filter:none; -webkit-backdrop-filter:none;
    filter:blur(7px);
    background:
      radial-gradient(140% 110% at 50% -12%, rgba(255,255,255,.09), rgba(255,255,255,.014) 56%),
      linear-gradient(180deg, rgba(30,34,42,.72), rgba(18,21,27,.66));
  }
  .btn--kb{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.08); }
  .btn--voice .lens{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .scene{ filter:blur(8px); }                              /* lighter materialise blur */
  .rim i b{ animation:none !important; }                    /* stop the per-frame blur re-raster */
  .rim--you .eflow b{ transform:translate(-50%,-50%) rotate(70deg); }   /* static angle: warm red at the bottom centre, not magenta */
  .epool, .eglint{ display:none; }                          /* fewer edge layers */
  .echo i:nth-child(4), .echo i:nth-child(5){ display:none; }
  .blob i{ filter:blur(58px); }
}

/* ════════ REDUCED MOTION ════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; }
  .scene, .card, .detail-row, .detail-foot, .thumb{ transition-duration:.01ms !important; }
}