@font-face{font-family:"Literata";src:url(fonts/literata.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{
  color-scheme:dark;
  --oil:#171614;      /* the app's dark background */
  --soot:#211F1C;
  --parchment:#ECE7DD;
  --ash:#A8A196;
  --ember:#E0923A;    /* the lamp */
  --wick:#FFD9A0;
  --line:#36322D;
  --serif:"Literata",Georgia,serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--oil);scroll-behavior:smooth}
body{background:var(--oil);color:var(--parchment);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:var(--ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px}

/* Top bar: transparent over the hero, solid once you scroll so text never runs under it */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gut);
  background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.bar.is-solid{background:rgba(23,22,20,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(54,50,45,.8)}
.bar-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;color:var(--parchment);text-decoration:none}
.bar-brand svg{width:24px;height:24px;color:var(--ember)}
.bar-cta{font-size:15px;color:var(--parchment);text-decoration:none;border:1px solid var(--line);padding:8px 16px;border-radius:999px}
.bar-cta:hover{border-color:var(--ember)}

/* Buttons */
.btn{display:inline-block;font:500 16px/1 var(--sans);text-decoration:none;padding:15px 26px;border-radius:999px;transition:background .2s,border-color .2s,color .2s}
.btn-solid{background:var(--ember);color:#1E1D1A}
.btn-solid:hover{background:var(--wick)}
.btn-line{border:1px solid var(--line);color:var(--parchment)}
.btn-line:hover{border-color:var(--ember)}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px var(--gut) 64px;overflow:hidden}
.halo{position:absolute;left:50%;top:42%;width:min(1100px,170vw);aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,146,58,.30),rgba(224,146,58,.10) 45%,transparent 72%);opacity:0;pointer-events:none}
.lamp-big{width:clamp(110px,15vw,160px);aspect-ratio:1;color:var(--ember);margin-bottom:22px}
.lamp-hero{width:100%;height:100%;overflow:visible}
.flame-g{transform-box:fill-box;transform-origin:50% 100%}
.flame-glow{opacity:.85}
.hero-pre{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);font:300 clamp(30px,5.4vw,64px)/1.15 var(--serif);color:var(--parchment);padding:0 var(--gut);opacity:0}
.hero-title{font:400 clamp(64px,13vw,168px)/.95 var(--serif);letter-spacing:-.02em}
.hero-sub{font:300 clamp(20px,2.6vw,30px)/1.3 var(--serif);color:var(--ash);margin-top:18px}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}

/* Opening sequence (the page's one orchestrated moment) */
.js .hero-pre{animation:pre 3.1s ease .2s forwards}
.js .lamp-big,.js .hero-title,.js .hero-sub,.js .hero-actions{opacity:0}
.js .lamp-big{animation:rise 1s ease 2.6s forwards}
.js .flame-g{transform:scale(0);animation:ignite .9s cubic-bezier(.2,1.5,.4,1) 3.0s forwards, flicker 2.8s ease-in-out 3.9s infinite}
.js .flame-glow{animation:glow 2.2s ease-in-out 3.9s infinite alternate}
.js .halo{animation:halo 2.4s ease-out 3.0s forwards}
.js .hero-title{animation:rise 1.1s ease 3.3s forwards}
.js .hero-sub{animation:rise 1s ease 3.7s forwards}
.js .hero-actions{animation:rise 1s ease 4.0s forwards}
@keyframes pre{0%{opacity:0;filter:blur(8px)}25%{opacity:1;filter:blur(0)}75%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(8px)}}
@keyframes rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ignite{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.97,1.04) skewX(-1.5deg)}50%{transform:scale(1.02,.97) skewX(1deg)}75%{transform:scale(.98,1.03) skewX(-.5deg)}}
@keyframes glow{from{opacity:.65}to{opacity:1}}
@keyframes halo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Film */
.film{padding:40px var(--gut) 120px}
.film-frame{position:relative;max-width:1180px;margin:0 auto;border-radius:22px;overflow:hidden;background:#0d0c0b;border:1px solid var(--line);
  box-shadow:0 40px 120px -30px rgba(224,146,58,.28)}
.film-frame video{width:100%;aspect-ratio:16/9;object-fit:cover}
.sound{position:absolute;right:16px;bottom:16px;font:500 14px/1 var(--sans);color:var(--parchment);background:rgba(23,22,20,.7);border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer}
.sound:hover{border-color:var(--ember)}

/* Scene: the app's real screens as floating glass panes, with the key UI lifted off the glass */
.scene{position:relative;aspect-ratio:720/1400}
.pane{position:absolute;inset:0;border-radius:30px;overflow:hidden;background:#171614;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 90px 160px -50px rgba(224,146,58,.42),0 40px 90px -20px rgba(0,0,0,.9)}
.pane img{width:100%;height:100%;object-fit:cover;object-position:top}
.pane::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 26%,transparent 40%),linear-gradient(transparent 70%,rgba(23,22,20,.0) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.float{position:absolute;height:auto;display:block;
  box-shadow:0 0 0 1px rgba(224,146,58,.30),0 28px 60px -12px rgba(0,0,0,.85),0 0 46px -8px rgba(224,146,58,.45)}
.float-bubble{width:85%;left:-16%;top:70%;border-radius:24px}
.float-chip{border-radius:999px;left:3.3%}
.patch{position:absolute;left:0;right:0;top:60%;height:18.2%;background:#181614}
.float-chip.c1{width:41.4%;top:60.2%}
.float-chip.c2{width:88.9%;top:66.5%}
.float-chip.c3{width:52.5%;top:72.8%}

/* Story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.step{min-height:90vh;display:flex;flex-direction:column;justify-content:center;max-width:520px;opacity:.25;transition:opacity .5s}
.step.is-on{opacity:1}
.step h2{font:400 clamp(34px,4.4vw,56px)/1.08 var(--serif);letter-spacing:-.01em}
.step p{color:var(--ash);margin-top:18px;font-size:18px;max-width:38ch}
.scene-step{display:none}
.story-stage{position:relative}
.scene-sticky{position:sticky;top:calc(50vh - min(37vh,360px));height:min(74vh,720px);width:auto;margin:0 auto;perspective:1700px}
.layer{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-16deg) rotateX(6deg) translateY(40px);opacity:0;
  transition:opacity .7s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.layer.is-on{opacity:1;transform:rotateY(-16deg) rotateX(6deg)}
.layer .float{transform:translateZ(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) .25s,opacity .6s ease .25s;opacity:0}
.layer.is-on .float{opacity:1}
.layer.is-on .float-bubble{transform:translateZ(110px) translateX(-4%)}
.layer.is-on .float-chip.c1{transform:translateZ(70px) translateX(10%)}
.layer.is-on .float-chip.c2{transform:translateZ(95px) translateX(14%);transition-delay:.35s}
.layer.is-on .float-chip.c3{transform:translateZ(120px) translateX(18%);transition-delay:.45s}

/* The dark */
.dark{position:relative;height:260vh;--p:0;background:rgb(calc(23 - 20*var(--p)),calc(22 - 19*var(--p)),calc(20 - 18*var(--p)))}
.dark-stage{position:sticky;top:0;height:100vh;height:100lvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,5vh,48px);text-align:center;padding:0 var(--gut);overflow:hidden;
  background:radial-gradient(circle at 50% 46%,rgba(224,146,58,calc(.10 + .22*var(--p))),transparent 46%),rgb(calc(23 - 20*var(--p)),calc(22 - 19*var(--p)),calc(20 - 18*var(--p)))}
.dark-text{display:grid;place-items:center}
.dark-text > *{grid-area:1/1}
.dark-flame{width:64px;flex:none;color:var(--ember);filter:drop-shadow(0 0 calc(10px + 30px*var(--p)) rgba(255,180,90,.8))}
.dark-a{font:300 clamp(44px,8vw,110px)/1.02 var(--serif);opacity:clamp(0,calc(1 - (var(--p) - .32)*6),1)}
.dark-b{max-width:640px;opacity:clamp(0,calc((var(--p) - .5)*5),1);transform:translateY(calc(20px - 20px*clamp(0,calc((var(--p) - .5)*5),1)))}
.dark-b h2{font:400 clamp(36px,5.4vw,72px)/1.06 var(--serif)}
.dark-b p{color:var(--ash);margin:22px auto 0;font-size:18px;max-width:46ch}

/* Good to know */
.know{padding:140px max(var(--gut),calc((100% - 1180px)/2 + var(--gut))) 60px;background:linear-gradient(#030302,var(--oil) 260px)}
.know h2{font:400 clamp(30px,3.6vw,44px)/1.1 var(--serif)}
.know dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px;margin-top:44px}
.know dt{font:500 18px/1.3 var(--sans);color:var(--parchment)}
.know dd{color:var(--ash);margin-top:8px;max-width:48ch}

/* Close */
.close{position:relative;text-align:center;padding:160px var(--gut) 140px;overflow:hidden}
.halo-close{top:46%;opacity:1;transform:translate(-50%,-50%) scale(.85)}
.close > *:not(.halo){position:relative}
.close-lamp{width:64px;height:64px;color:var(--ember);margin:0 auto 26px}
.close h2{font:400 clamp(48px,8vw,104px)/1 var(--serif)}
.close p{color:var(--ash);margin:20px auto 34px;max-width:40ch;font-size:18px}
.socials{list-style:none;padding:0;display:flex;justify-content:center;gap:28px;margin-top:44px}
.socials a{color:var(--parchment);text-decoration:none;font-size:15px;border-bottom:1px solid var(--line);padding-bottom:3px}
.socials a:hover{border-color:var(--ember)}

.foot{max-width:1180px;margin:0 auto;padding:28px var(--gut) 44px;display:flex;flex-wrap:wrap;gap:24px;font-size:14px;color:var(--ash);border-top:1px solid var(--line)}
.foot a{color:var(--ash)}

/* Phones and narrow screens */
@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:0}
  .story-stage{display:none}
  .step{min-height:auto;opacity:1;max-width:none;padding:72px 0 24px}
  .scene-step{display:block;width:min(300px,76%);margin:44px auto 0}
  .scene-step .float-bubble{left:-12%;top:68%;width:90%}
  .scene-step .float-chip{transform:translateX(9%)}
  .scene-step .float-chip.c2{transform:translateX(12%)}
  .scene-step .float-chip.c3{transform:translateX(15%)}
  .know dl{grid-template-columns:1fr;gap:28px}
  .film{padding-bottom:72px}
  .film-frame video{aspect-ratio:9/16;max-height:80svh}
  .film-frame{max-width:440px}
}

/* Respect reduced motion: everything visible, nothing moving */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero-pre{display:none}
  .js .lamp-big,.js .hero-title,.js .hero-sub,.js .hero-actions{opacity:1;animation:none}
  .js .flame-g{animation:none;transform:none}
  .js .flame-glow{animation:none}
  .js .halo{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}
  .layer,.layer .float,.step{transition:none}
}