/* ==========================================================================
   opening.css · the homepage opening and the identity's travel (9.0.0)
   JasonWalker.design · 3 October 2026

   The first viewport: the bar (Carbon, empty until the identity arrives) and
   the stage beneath it, which holds the countdown canvas, then the settled
   lockup. The lockup is an SVG fixed to the viewport while it travels; the
   bar's own lockup takes over the moment it is seated. The navigation's
   name and links assemble left to right after the seat, and withdraw at once
   when the identity leaves the bar again.

   html[data-jw-open] is set by a line in the head before the first paint
   (pending), then by jw-opening.js (playing, settled). Without script the
   attribute is never set and the bar is complete from the first frame.
   ========================================================================== */
@font-face{font-family:'JWRadikal';src:url('../fonts/radikal/radikal-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}

/* ---- the stage: the first viewport less the bar, Carbon, nothing else ---- */
.jw-open{position:relative;height:calc(100vh - var(--jw-head-h,64px));min-height:420px;background:#171717;overflow:hidden}
@supports (height:100svh){.jw-open{height:calc(100svh - var(--jw-head-h,64px))}}
.jw-open__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;transition:opacity .4s ease}
.jw-open__canvas.is-out{opacity:0}
.jw-open__skip{position:absolute;right:clamp(16px,2.4vw,32px);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3;
  background:none;border:1px solid rgba(242,239,233,.26);color:rgba(242,239,233,.72);border-radius:0;
  font:500 11px/1 var(--font-brand,system-ui);letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;min-height:40px;cursor:pointer}
.jw-open__skip:hover{color:#F2EFE9;border-color:rgba(242,239,233,.6)}
.jw-open__skip:focus-visible{outline:2px solid #DFFF00;outline-offset:3px}
.jw-open__skip[hidden]{display:none}

/* ---- the lockup that travels ---- */
.jw-lock{position:fixed;left:0;top:0;z-index:70;display:block;pointer-events:none;overflow:visible;
  transform-origin:0 0;will-change:transform,width,height;visibility:hidden}
html[data-jw-open="settled"] .jw-lock{visibility:visible}
@media (prefers-reduced-motion:reduce){.jw-lock{position:absolute;will-change:auto}}

/* ---- the bar: empty until the identity is seated ---- */
html.pf-html[data-jw-open] .rwordmark{opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}
html.pf-html[data-jw-open][data-jw-seat="nav"] .rwordmark{opacity:1;visibility:visible;transition:opacity .12s ease,visibility 0s}
html.pf-html[data-jw-open] .nav-name{opacity:0;transform:translateX(-6px);transition:opacity .14s ease,transform .14s ease}
html.pf-html[data-jw-open] .nav-links a{opacity:0;transform:translateX(-8px);transition:opacity .14s ease,transform .14s ease}
html.pf-html[data-jw-open] .nav-toggle{opacity:0;transition:opacity .14s ease}
/* nothing invisible takes a pointer; the phone's drawer keeps its own pointer rules (site-nav.css) */
html.pf-html[data-jw-open] .site-nav:not([data-jw-nav="in"]) .nav-toggle{pointer-events:none}
@media (min-width:821px){html.pf-html[data-jw-open] .site-nav:not([data-jw-nav="in"]) .nav-links{pointer-events:none}}
/* the assembly, left to right: the name first, then each link in order, then the menu control */
html.pf-html[data-jw-open] .site-nav[data-jw-nav="in"] .nav-name{opacity:1;transform:none;transition-delay:.06s}
html.pf-html[data-jw-open] .site-nav[data-jw-nav="in"] .nav-links a{opacity:1;transform:none}
html.pf-html[data-jw-open] .site-nav[data-jw-nav="in"] .nav-links a:nth-child(1){transition-delay:.14s}
html.pf-html[data-jw-open] .site-nav[data-jw-nav="in"] .nav-links a:nth-child(2){transition-delay:.22s}
html.pf-html[data-jw-open] .site-nav[data-jw-nav="in"] .nav-links a:nth-child(3){transition-delay:.30s}
html.pf-html[data-jw-open] .site-nav[data-jw-nav="in"] .nav-toggle{opacity:1;transition-delay:.16s}
@media (max-width:820px){
  /* on a phone the links live in the drawer; the control is what assembles after the name */
  html.pf-html[data-jw-open] .site-nav[data-jw-nav="in"] .nav-links.open a{opacity:1;transform:none;transition-delay:0s}
}
/* reduced motion: the bar is complete from the first frame, the identity static in its stage */
@media (prefers-reduced-motion:reduce){
  html.pf-html[data-jw-open] .rwordmark,html.pf-html[data-jw-open] .nav-name,html.pf-html[data-jw-open] .nav-links a,html.pf-html[data-jw-open] .nav-toggle{opacity:1;visibility:visible;transform:none;transition:none}
  html.pf-html[data-jw-open] .site-nav:not([data-jw-nav="in"]) .nav-toggle{pointer-events:auto}
  .jw-open__canvas{transition:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:821px){html.pf-html[data-jw-open] .site-nav:not([data-jw-nav="in"]) .nav-links{pointer-events:auto}}
/* the site's Skip link lands on the work, past the stage */
.pf-skip{z-index:80}