/* =====================================================================
   Menu + Hero
   The hero is the title alone on graphite; the film opens out of the
   full stop at the end of "One gesture away." as you scroll.
   ===================================================================== */
:root{ --hair:rgba(236,232,225,.10); --nav-h:72px; --edge:max(var(--gutter),calc((100vw - 1320px) / 2)) }

/* ---------------------------------------------------------------------
   Menu — always present, never jumps.
   It ignores scroll direction and its height never changes. It only
   crossfades its backdrop once you leave the top, and dims in
   proportion to how much of the screen the film fills. Pointing at the
   top edge brings it straight back.
   --------------------------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:env(safe-area-inset-top,0px) max(var(--gutter),calc((100vw - 1320px) / 2)) 0;
  background:none;border:0;backdrop-filter:none;transform:none;
  opacity:var(--nv,1);transition:opacity .45s var(--out)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .8s var(--out);
  background:linear-gradient(180deg,rgba(18,16,14,.9),rgba(18,16,14,.74));
  backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);border-bottom:1px solid var(--hair)}
.nav.scrolled::before{opacity:1}
.nav.scrolled{padding-top:env(safe-area-inset-top,0px);padding-bottom:0;background:none;border:0;backdrop-filter:none}
.nav.dim{pointer-events:none}
.nav.peek{opacity:1;pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.brand-mark{width:24px;height:24px;border-radius:6px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transition:transform .8s var(--spring)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-word{font:400 1.25rem/1 var(--serif);letter-spacing:-.01em}
.nav-links{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--hair);background:rgba(20,18,16,.3);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font:450 .8rem/1 var(--sans);letter-spacing:.015em;color:rgba(236,232,225,.72)}
.nav-links a{position:relative;z-index:1;padding:9px 16px;border-radius:999px;transition:color .5s var(--out)}
.nav-links a::after{display:none}
.nav-links a:hover,.nav-links a.here{color:var(--porcelain)}
.nav-ink{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:rgba(236,232,225,.09);
  box-shadow:inset 0 0 0 1px rgba(236,232,225,.06);opacity:0;transition:transform .6s var(--out),width .6s var(--out),opacity .4s var(--out)}
.nav-end{justify-self:end;display:flex;align-items:center;gap:20px}
.nav-cta{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px 0 18px;border-radius:999px;background:var(--porcelain);color:var(--graphite);
  font:500 .8rem/1 var(--sans);letter-spacing:.01em;transition:background .5s var(--out)}
.nav-cta svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--spring)}
.nav-cta:hover{background:var(--champagne)}
.nav-cta:hover svg{transform:translateY(2px)}
@media (max-width:760px){ .nav{grid-template-columns:1fr auto} .nav-links{display:none} }

/* ---------------------------------------------------------------------
   Hero stage. Only the title on graphite. The full stop of "away." is
   the origin: scrolling opens it into a circular aperture, and the film
   grows out of it until it fills the screen. JS sets --ox/--oy (the
   stop's centre) and --rad (the aperture's radius) from the scroll.
   --------------------------------------------------------------------- */
.film{max-width:none;padding:0;height:300vh}
.film-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 50% 58%,rgba(205,176,122,.07),transparent 70%),var(--graphite);
  --fs:clamp(3rem, min(8.6vw, 13.5vh), 9.6rem)}

/* the aperture */
.window{position:absolute;inset:0;background:#0d0c0b;clip-path:circle(var(--rad,0px) at var(--ox,50%) var(--oy,50%));will-change:clip-path}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - var(--p,0) * .25));transform-origin:var(--ox,50%) var(--oy,50%)}

/* ---------- Lines ---------- */
.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* a hairline rides the aperture's edge while it grows, then lets go */
.ln-ring{fill:none;stroke:var(--champagne);stroke-width:1;opacity:var(--ringo,0)}
.ln-progress{fill:none;stroke:var(--champagne);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--vp,0));opacity:clamp(0, var(--p,0) * 3 - 1.6, 1)}
.ln-under{fill:none;stroke:var(--champagne);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  opacity:clamp(0, 1 - var(--p,0) * 5, 1);animation:draw 1.5s cubic-bezier(.6,0,.2,1) 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Title, centred on the whole screen ---------- */
.hero-type{position:absolute;left:var(--edge);right:var(--edge);top:var(--nav-h);bottom:12vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:clamp(0, 1 - var(--p,0) * 4, 1);filter:blur(calc(var(--p,0) * 16px));pointer-events:none}
.hero-type a{pointer-events:auto}
.h-index{margin:0 0 clamp(20px,3.6vh,36px);display:flex;align-items:center;gap:14px;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--porcelain-dim);
  opacity:0;animation:heroUp 1.2s var(--out) .2s forwards}
.h-index i{width:40px;height:1px;background:var(--champagne);transform:scaleX(0);animation:grow 1.2s var(--out) .7s forwards}
@keyframes grow{to{transform:scaleX(1)}}
.h-title{margin:0;font:300 var(--fs)/.9 var(--sans);letter-spacing:-.055em;color:var(--porcelain)}
.h-l1,.h-l2{display:block;white-space:nowrap}
.h-l2{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.035em;color:#e6d6b4;margin-top:.02em}
.stop{position:relative;color:transparent}   /* the real full stop keeps its space; .origin is drawn in its place */
.pin{position:absolute;left:var(--pin-x,.052em);bottom:var(--pin-y,.29em);width:0;height:0}   /* the full stop's centre, in em */
.dbg .stop{color:red}.dbg .origin{background:rgba(0,120,255,.7)!important}
.mask{display:block;width:max-content;margin:-.04em auto -.2em;overflow:hidden;padding:.04em .12em .2em}
.rise{display:block;transform:translateY(106%);animation:rise 1.6s var(--out) var(--d) forwards}
@keyframes rise{to{transform:none}}

.h-lede{margin:clamp(22px,4vh,40px) 0 0;max-width:52ch;font-size:clamp(.96rem,1.1vw,1.06rem);line-height:1.6;color:var(--porcelain-dim);opacity:0;animation:heroUp 1.2s var(--out) 1.1s forwards}
.h-actions{margin-top:clamp(22px,4vh,36px);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;opacity:0;animation:heroUp 1.2s var(--out) 1.3s forwards}
@keyframes heroUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* the origin: the full stop, in champagne, breathing softly — the only thing that stays */
.origin{position:absolute;left:var(--ox,50%);top:var(--oy,50%);width:var(--dot,12px);height:var(--dot,12px);translate:-50% -50%;border-radius:50%;
  background:var(--champagne);opacity:0;pointer-events:none;
  box-shadow:0 0 0 0 rgba(205,176,122,.5);animation:dotIn .9s var(--out) 1.6s forwards,breathe 3s ease-in-out 3s infinite}
@keyframes dotIn{from{opacity:0;scale:.2}to{opacity:var(--dot-o,1);scale:1}}
@keyframes breathe{50%{box-shadow:0 0 0 8px rgba(205,176,122,0)}}
.film[data-open] .origin{opacity:0;transition:opacity .5s var(--out);animation:none}

.h-primary{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 22px 0 24px;border-radius:999px;background:var(--porcelain);color:var(--graphite);
  font:500 .9rem/1 var(--sans);box-shadow:0 18px 50px -20px rgba(222,208,178,.5);transition:background .5s var(--out)}
.h-primary svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--spring)}
.h-primary:hover{background:var(--champagne)}
.h-primary:hover svg{transform:translateY(2px)}
.h-docs{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 18px 0 14px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(236,232,225,.03);color:var(--porcelain);text-align:left;transition:border-color .5s var(--out),background .5s var(--out)}
.h-docs .book{width:24px;height:18px;flex:none;fill:none;stroke:var(--champagne);stroke-width:1.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--inout) 2.1s forwards}
.h-docs-t{display:flex;flex-direction:column;gap:4px;line-height:1}
.h-docs-t b{font-weight:500;font-size:.86rem}
.h-docs-t small{font-size:.68rem;color:var(--porcelain-dim)}
.h-docs i{font-style:normal;color:var(--champagne);transition:transform .6s var(--spring)}
.h-docs:hover{border-color:rgba(205,176,122,.5);background:var(--champagne-soft)}
.h-docs:hover i{transform:translateX(4px)}

/* bottom rail: before, how to begin; after, where you are in the film */
.h-rail{position:absolute;left:var(--edge);right:var(--edge);bottom:30px;display:flex;justify-content:center;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);opacity:0;animation:heroUp 1.2s var(--out) 2.2s forwards}
.h-rail b{font-weight:400;color:var(--porcelain)}
.h-tc{display:none;color:rgba(236,232,225,.7)}
.film[data-open] .h-tc{display:block}
.film[data-open] .h-scroll{display:none}
.film[data-open] .h-rail{justify-content:flex-start}
.h-scroll{display:flex;align-items:center;gap:12px}
.h-scroll i{position:relative;width:1px;height:16px;background:rgba(236,232,225,.2);overflow:hidden}
.h-scroll i::after{content:"";position:absolute;inset:0;background:var(--champagne);animation:drip 2.4s var(--inout) 3s infinite;transform:translateY(-100%)}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* sound: appears once the film owns the screen */
.sound{position:absolute;right:var(--edge);bottom:22px;display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:999px;
  border:1px solid rgba(236,232,225,.25);background:rgba(18,16,14,.5);backdrop-filter:blur(14px);color:var(--porcelain);font:500 .8rem var(--sans);cursor:pointer;
  opacity:clamp(0, (var(--p,0) - .75) * 5, 1);pointer-events:none;transition:border-color .5s}
.sound.live{pointer-events:auto}
.sound:hover{border-color:var(--champagne)}
.bars{display:flex;gap:2px;align-items:flex-end;height:12px}
.bars i{width:2px;height:3px;background:var(--champagne);border-radius:1px}
.sound.on .bars i{animation:eq .9s ease-in-out infinite}
.sound.on .bars i:nth-child(2){animation-delay:-.3s}.sound.on .bars i:nth-child(3){animation-delay:-.6s}.sound.on .bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

@media (max-height:700px) and (min-width:761px){ .h-lede{display:none} }
/* ---------- Phone ---------- */
@media (max-width:760px){
  .film-sticky{--fs:12.4vw}
  .h-lede{max-width:34ch;font-size:.95rem}
  .h-docs-t small{display:none}
  .h-scroll{font-size:.56rem}
}

@media (prefers-reduced-motion:reduce){
  .rise{transform:none}
  .ln-under,.h-docs .book{stroke-dashoffset:0}
}
/* preview/screenshot mode: ?still jumps every intro animation to its end state */
.still *,.still *::before,.still *::after{animation-delay:-60s!important;transition:none!important}
.still .reveal{opacity:1;transform:none;filter:none}