/* The home page: Apple's product-page rhythm and restraint, from blue hour to sunrise.
   A warm night canvas, cream type, one gradient (.sun) from blue hour into amber. Behind the whole
   page a fixed sky turns from blue hour to sunrise as you scroll (--day, set by js/home.js), so the
   page itself tells the gradient's story. The films sit in framed windows that open to full bleed.
   Display type is Manrope, the offhours wordmark face. js/home.js drives every moving part. */

.home{
  --ink:#0b0a0c; --tile:#16131a; --tile-2:#1d1920;
  --cream:#f5f2ec; --muted:rgba(245,242,236,.62); --faint:rgba(245,242,236,.42);
  --line:rgba(245,242,236,.10);
  --amber:#ffb36b; --bluehour:#6f8cff;
  /* blue hour into sunrise: the only gradient on the page */
  --sun-g:linear-gradient(95deg,#6f8cff 0%,#9fb1ff 30%,#ffd2a2 62%,#ffb36b 82%,#ff9d48 100%);
  --lift:0 0 0 1px rgba(255,240,225,.06),0 40px 80px -40px rgba(0,0,0,.9);
  --f-display:Manrope,-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,sans-serif;
  --bg:transparent; --fg:var(--cream); --rule:var(--line); --link-c:var(--amber);
  background:var(--ink); color:var(--cream);
}
html:has(body.home){background:#0b0a0c}
.home ::selection{background:rgba(255,179,107,.38)}
.home :focus-visible{outline-color:var(--amber)}

/* ---------- the sky: blue hour at the top of the page, sunrise by the end ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.sky i{position:absolute;inset:-10%;will-change:opacity}
.sky-blue{opacity:calc(1 - var(--day,0));background:
  radial-gradient(55% 45% at 50% 0%,rgba(111,140,255,.17),rgba(111,140,255,0) 70%),
  radial-gradient(40% 40% at 88% 22%,rgba(159,177,255,.08),rgba(159,177,255,0) 70%),
  radial-gradient(40% 40% at 10% 60%,rgba(80,100,200,.06),rgba(80,100,200,0) 70%)}
.sky-sun{opacity:var(--day,0);background:
  radial-gradient(65% 50% at 50% 108%,rgba(255,157,72,.2),rgba(255,157,72,0) 70%),
  radial-gradient(45% 40% at 12% 85%,rgba(255,210,162,.08),rgba(255,210,162,0) 70%),
  radial-gradient(40% 40% at 90% 40%,rgba(159,177,255,.05),rgba(159,177,255,0) 70%)}

/* type */
.home .headline{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,5.8vw,84px);line-height:1.02;letter-spacing:-.04em}
.home .display{font-family:var(--f-display);font-weight:700;font-size:clamp(52px,8.6vw,128px);line-height:.96;letter-spacing:-.045em}
.home .lead{color:var(--muted)}
.kicker{margin-bottom:12px;font:600 clamp(17px,1.4vw,21px)/1.2 var(--f-display);letter-spacing:-.01em;color:var(--amber)}
.sun{background:var(--sun-g);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.soft{color:var(--faint)}
.sec-intro{max-width:1000px;margin:0 auto clamp(48px,6vw,80px);text-align:center}
.sec-intro .lead{margin:20px auto 0;max-width:34em}

/* headlines rise line by line out of a mask (js/home.js wraps each line in .ln) */
.ln{display:block;overflow:hidden;padding:0 .04em .1em;margin:0 -.04em -.1em}
.ln>span{display:inline-block;transition:transform 1.3s var(--ease-out) calc(var(--d,0s) + var(--li,0) * .09s),filter 1.3s var(--ease-out) calc(var(--d,0s) + var(--li,0) * .09s)}
.reveal .home [data-reveal]:not(.in) .ln>span{transform:translateY(108%);filter:blur(8px)}

/* words that light up as you read (js/home.js wraps each word in .wd and sets --w) */
.wd{opacity:calc(.16 + var(--w,1) * .84);transition:opacity .2s linear}

/* buttons: one filled pill, everything else a link. A soft sheen crosses the pill on hover. */
.btn-glow{position:relative;isolation:isolate;background:var(--cream);color:#16110c;font-weight:600;border:0;transition:background-color .25s var(--ease),transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.btn-glow::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,rgba(255,255,255,0) 35%,rgba(255,226,190,.9) 50%,rgba(255,255,255,0) 65%) no-repeat;background-size:250% 100%;background-position:130% 0;transition:background-position 0s}
.btn-glow:hover{background:#fff;box-shadow:0 12px 36px -12px rgba(255,170,100,.55)}
.btn-glow:hover::after{background-position:-30% 0;transition:background-position .9s var(--ease-out)}
.btn-glow:active{transform:scale(.97)}
.btn-lg{min-height:50px;padding:13px 26px;font-size:17px}
.home .hero .hero-link{color:#fff;font-size:17px}
.home .hero .hero-link:hover{text-decoration:underline;text-underline-offset:.2em}

/* ---------- nav: transparent over the film, glass once you scroll, out of the way while you read ---------- */
.home .gnav{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom:1px solid transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .5s var(--ease),border-color .5s var(--ease),transform .55s var(--ease)}
.home .gnav-in{max-width:1080px;height:calc(var(--nav-h) + 8px)}
.home .gnav{height:calc(var(--nav-h) + 8px + env(safe-area-inset-top))}
.home .brand svg{color:var(--amber)}
.home .gnav.solid{background:rgba(11,10,12,.66);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--line)}
.home .gnav.tuck{transform:translateY(-102%)}
.menu-open .home .gnav{transform:none}
.home .gnav-cta .btn{min-height:28px;padding:4px 14px;font-size:12px}

/* ---------- 1. hero: the film, full bleed, closing into a window as you leave it ---------- */
.hero{--k:min(1,calc(var(--hp,0) * 1.6));position:relative;height:100svh;min-height:620px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0;overflow:hidden;background:#000;color:#fff;isolation:isolate;clip-path:inset(calc(var(--k) * 2.4vw) calc(var(--k) * 2.4vw) 0 round calc(var(--k) * 44px))}
.hero-film{position:absolute;inset:0;z-index:-1;transform:translate3d(0,calc(var(--hp,0) * 18%),0) scale(calc(1 + var(--hp,0) * .05));will-change:transform}
.hero-film video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:film-in 2.8s var(--ease-out) both}
/* the film comes up like first light: dark and soft, then bright and sharp */
@keyframes film-in{from{opacity:0;transform:scale(1.08);filter:brightness(.35) saturate(.6) blur(6px)}60%{filter:brightness(.85) saturate(.9) blur(0)}}
.hero-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,7,10,.5) 0%,rgba(7,7,10,0) 20%),
  radial-gradient(110% 65% at 50% 74%,rgba(7,7,10,.55) 0%,rgba(7,7,10,0) 60%),
  linear-gradient(0deg,#0b0a0c 0%,rgba(7,7,10,.3) 24%,rgba(7,7,10,0) 48%)}
.hero-copy{position:relative;width:100%;max-width:980px;padding:0 var(--gr) clamp(72px,13vh,136px) var(--gl);text-align:center;opacity:calc(1 - var(--hp,0) * 1.6);transform:translateY(calc(var(--hp,0) * -50px))}
.hero-title{font-family:var(--f-display);font-weight:700;font-size:clamp(56px,9.4vw,144px);line-height:.94;letter-spacing:-.05em}
.hero-title .w{display:inline-block;overflow:hidden;padding:0 .02em .1em;margin-bottom:-.1em;vertical-align:top}
.hero-title .w>span{display:inline-block;animation:rise 1.4s var(--ease-out) both}
.hero-title .w:nth-of-type(1)>span{animation-delay:.5s}
.hero-title .w:nth-of-type(2)>span{animation-delay:.62s}
.hero-title .w:nth-of-type(3)>span{animation-delay:.78s}
@keyframes rise{from{transform:translateY(105%) rotate(4deg);filter:blur(10px);opacity:0}}
/* once it has risen, the gradient drifts slowly from blue hour to sunrise and back */
.hero-title .w:nth-of-type(3)>.sun{background-size:140% 100%;animation:rise 1.4s var(--ease-out) .78s both,drift 9s ease-in-out 2.2s infinite alternate}
@keyframes drift{from{background-position:0% 0}to{background-position:100% 0}}
.hero-sub{max-width:32em;margin:22px auto 0;font-size:clamp(17px,1.4vw,21px);line-height:1.42;color:rgba(255,255,255,.8);animation:load-soft 1.2s var(--ease-out) 1.05s both}
.hero-ctas{display:flex;gap:14px 28px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:30px;animation:load-soft 1.2s var(--ease-out) 1.18s both}
.hero-fine{margin-top:18px;font-size:13px;color:rgba(255,255,255,.55);animation:load-soft 1.2s var(--ease-out) 1.3s both}
@keyframes load-soft{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}

/* landscape screens: NOCTIS sits on the nightstand just right of centre, so the words keep to the left */
@media (min-width:1024px) and (min-aspect-ratio:4/3){
  .hero{align-items:flex-start}
  .hero-copy{max-width:min(46vw,640px);margin-left:max(6vw,calc((100vw - 1180px) / 2));padding:0 0 clamp(80px,14vh,140px);text-align:left}
  .hero-title{font-size:clamp(64px,6.6vw,120px)}
  .hero-sub{margin-left:0;max-width:27em}
  .hero-ctas{justify-content:flex-start}
  .hero-shade{background:
    linear-gradient(180deg,rgba(7,7,10,.5) 0%,rgba(7,7,10,0) 20%),
    linear-gradient(90deg,rgba(7,7,10,.72) 0%,rgba(7,7,10,.35) 38%,rgba(7,7,10,0) 55%),
    linear-gradient(0deg,#0b0a0c 0%,rgba(7,7,10,.25) 22%,rgba(7,7,10,0) 45%)}
}

/* ---------- 2. a scroll sequence: three lines, one at a time, over the film ---------- */
/* The sequence and the pull-back are cinematic windows: framed on the night canvas, open to full
   bleed once they pin, and close back into their frame as they let go. --k is 1 framed, 0 full bleed. */
.seq{position:relative;height:320svh}
.seq-stick{--k:max(0,1 - var(--sp,0) * 6,var(--sp,0) * 6 - 5);position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#000;clip-path:inset(calc(var(--k) * 2.4vw) round calc(var(--k) * 44px))}
.seq-film{position:absolute;inset:0;z-index:-1;transform:scale(calc(1.02 + var(--sp,0) * .08));will-change:transform}
.seq-film video{width:100%;height:100%;object-fit:cover}
.seq-film::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 100%,rgba(111,140,255,.14),rgba(111,140,255,0) 70%),rgba(7,7,10,.52)}
.seq-steps{position:absolute;inset:0;display:grid;place-items:start center;padding:clamp(96px,22svh,240px) var(--gr) 0 var(--gl);text-align:center;color:#fff}
.seq-step{grid-area:1/1;opacity:var(--o,0);transform:translate3d(0,calc(var(--y,0) * 36px),0) scale(calc(1 - (1 - var(--o,0)) * .04));filter:blur(calc((1 - var(--o,0)) * 10px));will-change:opacity,transform,filter}
.seq-step p{font-family:var(--f-display);font-weight:700;font-size:clamp(52px,9.4vw,148px);line-height:.98;letter-spacing:-.05em}
.seq-step:first-child{opacity:var(--o,1);filter:blur(calc((1 - var(--o,1)) * 10px))}
.seq-dots{position:absolute;left:50%;bottom:calc(5svh + env(safe-area-inset-bottom));display:flex;gap:8px;translate:-50% 0}
.seq-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.28);transition:background-color .4s var(--ease),width .4s var(--ease)}
.seq-dots i.on{width:22px;background:#fff}

/* ---------- 3. bento: film tiles that open into full-screen pages ---------- */
.bento-sec{overflow-anchor:none}
.bento-sec.has-open{z-index:90}
.bento{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(240px,24vw,340px);grid-auto-flow:dense;gap:clamp(12px,1.3vw,18px)}
.tile-ph{visibility:hidden}
.tile{--tr:.95s;--te:cubic-bezier(.32,.72,0,1);position:relative;overflow:hidden;border-radius:28px;background:var(--tile);color:#fff;isolation:isolate;transform:translateZ(0);cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:var(--lift)}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transition:transform 1.4s var(--ease-out),filter 1.4s var(--ease-out)}
.tile:not(.open):hover video{transform:scale(1.045);filter:brightness(1.08)}
.tile::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(7,7,10,0) 45%,rgba(7,7,10,.76) 100%);pointer-events:none}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,7,10,.52),rgba(7,7,10,0) 72%),rgba(7,7,10,.34);opacity:0;pointer-events:none;transition:opacity var(--tr) var(--te)}
.tile-scroll{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none}
.tile-scroll::-webkit-scrollbar{display:none}
.tile-copy{flex:none;display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;padding:clamp(22px,2.4vw,32px);padding-right:clamp(66px,6vw,84px);transition:padding var(--tr) var(--te)}
.tile .soft{color:rgba(255,255,255,.58)}
.tile-k{font:600 13px/1.2 var(--f-display);letter-spacing:-.005em;color:#ffd2a2;margin-bottom:8px}
.tile h3{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,1.9vw,27px);line-height:1.12;letter-spacing:-.028em;max-width:15em;transition:font-size var(--tr) var(--te)}
.t-hero h3{font-size:clamp(27px,2.9vw,42px)}
.t-hero,.t-voice{grid-row:span 2}
.t-hero{grid-column:span 4}
.t-voice{grid-column:span 2}
.t-room,.t-sleep{grid-column:span 3}

/* the + sits in the corner like Apple's, and turns into the way out */
.tile-plus,.tile-close{position:absolute;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;color:#fff;background:rgba(245,242,236,.2);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);transition:background-color .3s var(--ease),color .3s var(--ease),opacity .35s var(--ease),transform var(--tr) var(--te)}
.tile-plus:hover,.tile-close:hover,.tile:not(.open):hover .tile-plus{background:var(--cream);color:#16110c}
.tile:not(.open):hover .tile-plus{transform:rotate(90deg)}
.tile-plus svg,.tile-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tile-plus{right:clamp(18px,1.8vw,24px);bottom:clamp(18px,1.8vw,24px)}
.tile-close{right:max(20px,env(safe-area-inset-right));top:max(20px,calc(env(safe-area-inset-top) + 8px));width:40px;height:40px;opacity:0;pointer-events:none}

/* the tile's extra page content: folded away until it opens */
.tile-more{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--te),visibility 0s .45s}
.tile-more-in{min-height:0;overflow:hidden;opacity:0;transition:opacity .3s var(--ease)}
.tile-lead{margin-top:clamp(14px,2vw,22px);max-width:30em;font-size:clamp(17px,1.5vw,21px);line-height:1.42;color:rgba(255,255,255,.82)}
.tile-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 clamp(20px,2.4vw,36px);max-width:52em;margin-top:clamp(18px,2.6vw,32px)}
.tile-points li{padding:14px 0;border-top:1px solid rgba(255,255,255,.22)}
.tile-points b{display:block;font:700 17px/1.25 var(--f-display);letter-spacing:-.015em}
.tile-points span{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.7)}
.tile-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(16px,2.4vw,28px)}
.home .tile .tile-back{padding:0;color:#fff;font-size:17px}
.home .tile .tile-back:hover{text-decoration:underline;text-underline-offset:.2em}

/* the in-depth part of a page: below the first screen, only when open */
.tile-deep{display:none;flex:none;background:linear-gradient(180deg,rgba(11,10,12,0) 0,rgba(11,10,12,.84) 160px,rgba(11,10,12,.95) 100%)}
.tile.open .tile-deep{display:block}
.deep-in{max-width:1080px;margin:0 auto;padding:clamp(72px,10vw,140px) max(var(--gr),clamp(24px,6vw,96px)) clamp(56px,8vw,112px) max(var(--gl),clamp(24px,6vw,96px))}
.deep-sec{padding:clamp(28px,4vw,52px) 0;border-top:1px solid rgba(255,255,255,.16)}
.deep-sec:first-child{border-top:0;padding-top:0}
.deep-sec h4{margin-bottom:clamp(18px,2.4vw,30px);font:600 clamp(15px,1.3vw,18px)/1.2 var(--f-display);color:#ffd2a2}
.deep-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
/* the three step numbers walk along the gradient: blue hour, first light, sunrise */
.deep-steps .n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:16px;border-radius:50%;font:600 14px/1 var(--f-display);color:#16110c;background:var(--sun-g);background-size:300% 100%;background-position:calc(var(--n,0) * 50%) 0}
.deep-steps li:nth-child(2) .n{--n:1}
.deep-steps li:nth-child(3) .n{--n:2}
.deep-steps b{display:block;font:700 clamp(21px,2vw,28px)/1.15 var(--f-display);letter-spacing:-.03em}
.deep-steps p{margin-top:10px;font-size:17px;line-height:1.45;color:rgba(255,255,255,.74)}
.deep-rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 32px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.deep-rows>div:first-child{border-top:0;padding-top:0}
.deep-rows dt{font:700 17px/1.35 var(--f-display);letter-spacing:-.01em}
.deep-rows dd{font-size:17px;line-height:1.45;color:rgba(255,255,255,.74)}
.deep-note p{max-width:34em;font-size:clamp(19px,1.8vw,24px);line-height:1.38;letter-spacing:-.015em;color:rgba(255,255,255,.88)}
.deep-in .tile-actions{margin-top:clamp(12px,2vw,24px);padding-top:clamp(28px,4vw,48px);border-top:1px solid rgba(255,255,255,.16)}
.tile-cue{margin-top:clamp(18px,3vw,36px);font-size:14px;color:rgba(255,255,255,.55)}

/* open: the very same tile, grown to fill the screen */
.tile.fx,.reveal .tile[data-tile].fx{position:fixed;z-index:95;aspect-ratio:auto;margin:0;transition:top var(--tr) var(--te),left var(--tr) var(--te),width var(--tr) var(--te),height var(--tr) var(--te),border-radius var(--tr) var(--te)}
.tile.open{cursor:default;border-radius:0;box-shadow:none}
.tile.open::after{opacity:1}
.tile.open video{transform:none;filter:none}
.tile.open .tile-scroll{overflow-y:auto}
.tile.open .tile-copy{padding:calc(var(--nav-h) + 56px) max(var(--gr),clamp(24px,6vw,96px)) max(36px,env(safe-area-inset-bottom)) max(var(--gl),clamp(24px,6vw,96px))}
.tile.open h3{font-size:clamp(34px,6vw,92px);line-height:1.02;letter-spacing:-.045em;max-width:12em}
.tile.open .tile-k{font-size:clamp(15px,1.3vw,18px)}
.tile.open .tile-more{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .8s var(--te) .25s,visibility 0s}
.tile.open .tile-more-in{opacity:1;transition:opacity .7s var(--ease) .5s}
.tile.open .tile-plus{opacity:0;pointer-events:none;transform:rotate(45deg) scale(.8)}
.tile.open .tile-close{opacity:1;pointer-events:auto;transition:background-color .3s var(--ease),color .3s var(--ease),opacity .5s var(--ease) .45s}
.tile.closing .tile-more{transition:grid-template-rows .35s var(--te),visibility 0s .35s}
.tile.closing .tile-more-in{transition:opacity .2s var(--ease)}
.tile.instant,.tile.instant *{transition-duration:0s!important;transition-delay:0s!important}
.tile:not(.open) .tile-close{transition:none}

/* tiles are unveiled from the bottom as they arrive, staggered by their place in the grid */
.reveal .tile[data-tile]:not(.fx){opacity:0;transform:translateY(48px) scale(.97);clip-path:inset(18% 0 0 0 round 28px);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1.3s var(--ease-out) var(--d,0s),clip-path 1.3s var(--ease-out) var(--d,0s)}
.reveal .tile[data-tile].in{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0)}
.reveal .tile[data-tile].in:not(.fx):not(:hover) video{animation:settle 2s var(--ease-out) var(--d,0s) backwards}
@keyframes settle{from{transform:scale(1.12)}}

/* ---------- 4. the pull-back, in its window ---------- */
.face{position:relative;height:300svh}
.face-stick{--k:max(0,1 - var(--fp,0) * 6,var(--fp,0) * 6 - 5);position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;isolation:isolate;background:#000;clip-path:inset(calc(var(--k) * 2.4vw) round calc(var(--k) * 44px))}
/* the silhouette turns toward you as you scroll; its eyes light at the end */
.face-stick video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(calc(1.12 + var(--fp,0) * .08))}
.face-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(var(--nav-h) + 9svh) var(--gr) 10svh var(--gl);text-align:center;color:#fff;pointer-events:none}
.face-title{font-family:var(--f-display);font-weight:700;font-size:clamp(48px,7.4vw,112px);line-height:.96;letter-spacing:-.05em;opacity:calc(.15 + var(--ft,0) * .85);transform:translateY(calc((1 - var(--ft,0)) * 30px));filter:blur(calc((1 - var(--ft,0)) * 8px))}
.face-copy .lead{max-width:30em;color:rgba(255,255,255,.72);opacity:var(--fl,0);transform:translateY(calc((1 - var(--fl,0)) * 20px))}

/* films that grow into place as they arrive, and dim as they leave (--g in, --x out; js/home.js) */
[data-grow]{scale:calc(.9 + var(--g,1) * .1);opacity:calc(.25 + min(var(--g,1),var(--x,1)) * .75)}

/* ---------- 5. the progressive alarm, as a timeline ---------- */
/* Three runs of bars, one above each stage, laid on the same grid so they line up. js/home.js walks a
   playhead through them (--hx) and sets --p (0 to 1) as the alarm builds; the card warms with it. */
.alarm-card{--ac:#ffb36b;--ac-2:#ff9d48;position:relative;max-width:1080px;margin:0 auto;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#141118,#100e12);color:#fff;isolation:isolate;box-shadow:var(--lift)}
.alarm-card[data-theme=forest]{--ac:#8fe3a8;--ac-2:#4fbf7c}
.alarm-card[data-theme=ocean]{--ac:#8fbfff;--ac-2:#5b8cff}
.alarm-card[data-theme=piano]{--ac:#f1ece2;--ac-2:#cfc6b6}
/* the room fills with the theme's light as the alarm builds, from the right, where the playhead is going */
.alarm-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(70% 90% at 85% 100%,color-mix(in srgb,var(--ac-2) 34%,transparent),transparent 70%),
  radial-gradient(50% 60% at 15% 100%,rgba(111,140,255,.16),transparent 70%);opacity:calc(.25 + var(--p,0) * .75);transition:background .8s var(--ease)}
.alarm-ui{padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,32px)}
.alarm-track{position:relative}
.alarm-viz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,40px);height:clamp(120px,16vw,200px)}
.alarm-viz .seg{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(2px,.4vw,5px)}
.alarm-viz i{flex:1;max-width:12px;height:calc(var(--h) * 100%);border-radius:99px;background:rgba(255,255,255,.13);transform-origin:50% 100%;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.alarm-viz i.lit{background:var(--ac);box-shadow:0 0 14px -3px var(--ac);animation:bar var(--s,1.6s) ease-in-out calc(var(--i) * -110ms) infinite alternate}
.alarm-card.paused .alarm-viz i{animation-play-state:paused}
@keyframes bar{from{transform:scaleY(calc(1 - var(--a,.1)))}to{transform:scaleY(1)}}
/* the playhead: a thin line of light at the front of the build-up */
.alarm-head{position:absolute;top:-10px;bottom:-10px;left:0;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,#fff 30%,#fff 70%,transparent);box-shadow:0 0 16px 2px var(--ac);transform:translateX(calc(var(--hx,0) * 1px - 1px))}
.alarm-card.still .alarm-head{display:none}
.alarm-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,40px)}
.alarm-stages li{position:relative;padding-top:16px;opacity:.45;transition:opacity .5s var(--ease)}
/* each stage's rule fills as the playhead crosses it */
.alarm-stages li::before,.alarm-stages li::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:rgba(255,255,255,.18)}
.alarm-stages li::after{height:2px;top:-.5px;background:var(--ac);transform-origin:0 50%;transform:scaleX(clamp(0,calc(var(--p,0) * 3 - var(--n,0)),1))}
.alarm-stages li:nth-child(2){--n:1}
.alarm-stages li:nth-child(3){--n:2}
.alarm-stages li.on,.alarm-stages li.past{opacity:1}
.alarm-stages li.past{opacity:.7}
.alarm-stages b{display:flex;align-items:center;gap:10px;font:700 clamp(17px,1.5vw,21px)/1.25 var(--f-display);letter-spacing:-.02em}
.alarm-stages .alarm-n{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;font:700 12px/1 var(--f-display);color:#16110c;background:rgba(255,255,255,.4);transition:background-color .4s var(--ease)}
.alarm-stages li.on .alarm-n,.alarm-stages li.past .alarm-n{background:var(--ac)}
.alarm-stages span:not(.alarm-n){display:block;margin-top:6px;padding-left:32px;color:rgba(255,255,255,.7);font-size:15px;line-height:1.4}
.alarm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:clamp(16px,2vw,24px);border-top:1px solid rgba(255,255,255,.1)}
.alarm-label{font:600 15px/1.2 var(--f-display);color:rgba(255,255,255,.7)}
.alarm-themes{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:4px;border-radius:99px;background:rgba(255,255,255,.1)}
.alarm-themes button{padding:9px 20px;border-radius:99px;font-size:15px;font-weight:500;color:rgba(255,255,255,.76);transition:color .3s,background-color .3s}
.alarm-themes button:hover{color:#fff}
.alarm-themes button[aria-checked=true]{background:var(--cream);color:#16110c}
.alarm-note{min-height:1.5em;margin-top:-8px;font-size:15px;color:rgba(255,255,255,.7)}

/* ---------- 6. every night, in tabs ---------- */
.tabs{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto clamp(32px,4vw,52px);padding:4px;border-radius:99px;background:rgba(245,242,236,.07);overflow-x:auto;scrollbar-width:none}
.tab{position:relative;overflow:hidden;isolation:isolate;padding:10px 22px;border-radius:99px;font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .3s,background-color .3s}
.tab:hover{color:var(--cream)}
.tab[aria-selected=true]{color:#16110c;background:var(--cream)}
.tab i{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--sun-g)}
.tab[aria-selected=true] i{animation:tabfill var(--dur,7s) linear forwards}
.nights.paused .tab i{animation-play-state:paused}
@keyframes tabfill{to{width:100%}}
.panes{position:relative;max-width:1080px;margin:0 auto}
.pane{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.pane.on .pane-film{animation:pane-film-in 1s var(--ease-out) both}
.pane.on .pane-copy>*{animation:pane-in .9s var(--ease-out) both}
.pane.on .pane-copy>:nth-child(2){animation-delay:.08s}
.pane.on .pane-copy>:nth-child(3){animation-delay:.16s}
@keyframes pane-in{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
@keyframes pane-film-in{from{opacity:0;transform:scale(.97);filter:brightness(.4)}}
.pane-film{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/10;background:var(--tile);box-shadow:var(--lift)}
.pane-film video{width:100%;height:100%;object-fit:cover}
.pane-quote{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em}
.pane-copy .body{margin-top:16px;color:var(--muted)}

/* ---------- 7. privacy: plain promises, a word at a time ---------- */
.privacy{overflow:hidden;isolation:isolate}
.privacy .sec-intro{max-width:1080px}
.privacy .sec-intro .lead{max-width:24em;margin-top:28px;font-family:var(--f-display);font-size:clamp(24px,2.6vw,38px);font-weight:600;line-height:1.22;letter-spacing:-.025em;color:var(--cream)}
.privacy .cols3{max-width:1080px;gap:clamp(12px,1.6vw,20px)}
/* cards with a spotlight that follows the pointer (--mx/--my from js/home.js) */
.home .privacy .cols3>div{position:relative;padding:clamp(24px,2.6vw,36px);border-radius:24px;background:rgba(245,242,236,.035);box-shadow:inset 0 0 0 1px rgba(245,242,236,.07);overflow:hidden;isolation:isolate;transition:box-shadow .4s var(--ease),opacity 1s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s),filter 1.1s var(--ease-out) var(--d,0s)}
.privacy .cols3>div::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(255,179,107,.14),rgba(111,140,255,.05) 45%,transparent 70%);opacity:0;transition:opacity .4s var(--ease)}
.privacy .cols3>div:hover{box-shadow:inset 0 0 0 1px rgba(255,210,162,.2)}
.privacy .cols3>div:hover::before{opacity:1}
.privacy .cols3 h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em}
.privacy .cols3 p{color:var(--muted)}
.ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:14px;color:var(--amber);background:rgba(255,179,107,.1);box-shadow:inset 0 0 0 1px rgba(255,179,107,.18)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home .link{color:var(--amber)}

/* ---------- 8. close: blue hour turns to sunrise behind the form ---------- */
.close{position:relative;overflow:hidden;text-align:center;padding-top:clamp(140px,16vw,220px);padding-bottom:clamp(160px,18vw,240px);background:linear-gradient(180deg,rgba(11,10,12,0) 0%,rgba(5,8,26,.7) 30%,#0c1640 60%,#1d3074 82%,#34509e 100%);isolation:isolate}
.sunrise{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sunrise::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(255,170,90,.16) 76%,rgba(255,160,80,.38) 92%,rgba(255,170,95,.55) 100%);opacity:var(--rp,0)}
.sun-disc{position:absolute;left:50%;bottom:0;width:min(120vw,1400px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,244,222,.95) 0%,rgba(255,214,160,.7) 7%,rgba(255,180,105,.4) 18%,rgba(255,157,72,.16) 34%,rgba(255,157,72,0) 54%);filter:blur(8px);opacity:calc(.2 + var(--rp,0) * .8);translate:-50% calc(80% - var(--rp,0) * 28%)}
/* the horizon: a thin line of light the sun comes up behind */
.sun-haze{position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(0deg,rgba(255,180,110,.18),transparent);mix-blend-mode:screen;opacity:calc(.4 + var(--rp,0) * .6)}
.sun-haze::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,160,.7) 50%,transparent);transform:scaleX(calc(.3 + var(--rp,0) * .7))}
.close-in{position:relative;max-width:880px;margin:0 auto}
.close .lead{margin:22px auto 0;max-width:30em;color:rgba(245,242,236,.82)}
.close-device{position:relative;width:min(44vw,240px);margin:0 auto clamp(20px,3vw,36px)}
.close-device img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.close-device::after{content:"";position:absolute;left:10%;right:10%;bottom:6%;z-index:-1;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,179,107,.35),transparent);filter:blur(18px);opacity:var(--rp,0)}
.home .quick{max-width:520px;margin-top:36px}
.home .quick-row{padding:6px;border-radius:99px;background:rgba(10,10,14,.55);border:1px solid rgba(245,242,236,.18);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:border-color .3s,box-shadow .3s}
.home .quick-row:focus-within{border-color:rgba(255,179,107,.7);box-shadow:0 0 0 4px rgba(255,179,107,.16)}
.home .quick input[type=email]{border:0;background:transparent;min-height:48px;color:var(--cream)}
.home .quick input[type=email]:focus{background:transparent;border:0;box-shadow:none}
.home .quick input[aria-invalid=true]{background:transparent;box-shadow:none}
.home .quick .btn{min-height:48px;padding:0 24px}
.home .form-note{color:rgba(245,242,236,.62)}
.home .form-note a{color:var(--cream);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(245,242,236,.35)}
.home .msgline{color:rgba(245,242,236,.75)}
.home .done .tick{background:var(--sun-g)}
.home .done .tick svg{stroke:#16110c}

/* the dock: a waitlist button that follows you on phones */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;display:none;align-items:center;gap:14px;padding:7px 7px 7px 18px;border-radius:99px;background:rgba(16,14,18,.8);border:1px solid rgba(245,242,236,.12);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);translate:-50% 140%;transition:translate .6s var(--ease-out);white-space:nowrap}
.dock.show{translate:-50% 0}
.dock p{font-size:12px;line-height:1.25;white-space:nowrap}
.dock .btn{flex:none;padding:7px 18px}
.dock b{display:block;font:700 14px/1.1 var(--f-display);letter-spacing:-.01em}
.dock span{color:var(--muted)}

.home .site-footer{background:#08070a;border-top-color:var(--line)}

/* reveals: a simple rise, with a little focus pull */
.reveal .home [data-reveal]{opacity:0;transform:translateY(28px);filter:blur(4px);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s),filter 1.1s var(--ease-out) var(--d,0s)}
.reveal .home [data-reveal].in{opacity:1;transform:none;filter:none}
/* headlines that rise line by line don't need the whole block to move as well */
.reveal .home [data-reveal]:has(.ln){transform:none;filter:none}

/* ---------- responsive ---------- */
@media (max-width:1068px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(260px,46vw,420px)}
  .t-hero,.t-voice{grid-column:span 2;grid-row:span 1}
  .t-room,.t-sleep{grid-column:span 1}
}
@media (max-width:833px){
  .dock{display:flex}
  .pane,.alarm-grid{grid-template-columns:minmax(0,1fr)}
  .privacy .cols3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:734px){
  .deep-steps{grid-template-columns:minmax(0,1fr)}
  .deep-rows>div{grid-template-columns:minmax(0,1fr)}
  .hero{min-height:560px}
  .hero-film video{object-position:38% 50%}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%}
  .hero-copy{padding-bottom:max(92px,12vh)}
  /* phones: a slimmer frame, so the films keep their width */
  .seq-stick,.face-stick{clip-path:inset(calc(var(--k) * 12px) round calc(var(--k) * 28px))}
  .hero{clip-path:inset(calc(var(--k) * 12px) calc(var(--k) * 12px) 0 round calc(var(--k) * 28px))}
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .tile{aspect-ratio:4/5}
  .tile::before{background:linear-gradient(180deg,rgba(7,7,10,0) 30%,rgba(7,7,10,.7) 58%,rgba(7,7,10,.94) 100%)}
  .t-hero{aspect-ratio:3/4}
  .t-hero,.t-voice,.t-room,.t-sleep{grid-column:auto}
  .seq{height:260svh}
  .seq-step p{font-size:clamp(46px,15vw,84px)}
  .alarm-stages b{flex-direction:column;align-items:flex-start;gap:8px;font-size:15px}
  .alarm-stages span:not(.alarm-n){padding-left:0;font-size:13px}
  .alarm-viz i:nth-child(even){display:none}
  .alarm-themes button{padding:9px 14px;font-size:14px}
  .face{height:250svh}
  .face-stick video{object-position:50% 45%}
  .face-copy{padding-bottom:12svh}
  .face-copy .lead{font-size:17px}
  .tab{padding:10px 16px;font-size:14px}
  .tabs{justify-content:flex-start}
  .home .quick-row{flex-direction:column;border-radius:26px}
  .home .quick .btn{width:100%}
  .home .quick input[type=email]{text-align:center}
}

/* motion off: the story still reads, nothing moves on its own */
@media (prefers-reduced-motion:reduce){
  .hero-title .w>span,.hero-title .w:nth-of-type(3)>.sun,.hero-film video,.hero-sub,.hero-ctas,.hero-fine,.pane.on .pane-film,.pane.on .pane-copy>*,.alarm-viz i,.reveal .tile[data-tile].in:not(.fx):not(:hover) video{animation:none}
  .reveal .home [data-reveal],.reveal .tile[data-tile]{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .reveal .home [data-reveal] .ln>span{transform:none;filter:none;transition:none}
  .tile video,.btn-glow::after{transition:none}
  .seq-step,.seq-step:first-child,.face-title{filter:none}
}
.static .seq,.static .face{height:auto}
.static .seq-stick,.static .face-stick{position:relative;height:100svh}
.static .seq-stick{height:auto;min-height:100svh}
.static .seq-steps{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:center;gap:5svh;min-height:100svh;padding-top:0}
.static .seq-step{grid-area:auto;opacity:1;filter:none}