/* ============================================================
   VARIANT A — styles
   Positions, sizes and timings come from config.js (it sets the
   --a-* variables below on <html>). The fallbacks here only apply
   if config.js fails to load. Change numbers in config.js first;
   edit this file only for structural/visual changes.
   ============================================================ */

/* ---- intro state flags (added/removed by variant.js) ---- */
html.a-lock, html.a-lock body{ overflow:hidden; }

/* hide the site chrome until the intro reveals it */
body.a-pre .nav-dock,
body.a-pre .toggle-dock{ animation:none; opacity:0; pointer-events:none; }
.a-clock{ opacity:0; transition: opacity .7s var(--ease); }
body:not(.a-pre) .a-clock{ opacity:1; }

/* ---- the hero: page 1 + page 2 live in the same 100vh screen ---- */
.a-hero{
  position:relative; min-height:100vh; min-height:100dvh; overflow:hidden;
  font-size: var(--a-font-size, clamp(15px, 1.15vw, 22px));
}

/* PNG-sequence canvases: transparent, scaled by CSS only */
.a-seq{ display:block; height:auto; pointer-events:none; }
body[data-theme="dark"] .a-seq{ filter: var(--a-dark-filter, invert(1)); }

.a-logo{
  position:absolute; left:50%; transform:translateX(-50%);
  top: var(--a-logo-top, 10.6vh); width: var(--a-logo-width, 58vw);
}

/* ---- nav: five real links ---- */
.a-nav{
  position:absolute; left:0; right:0; top: var(--a-nav-top, 56.5vh);
  z-index:3; will-change: opacity;
}
.a-nav ul{
  list-style:none; margin:0; padding:0 0 0 var(--a-nav-left, 6.4vw);
  display:grid; grid-template-columns: repeat(5, var(--a-nav-col, 20.65vw));
}
.a-nav li{
  opacity:0; transform: translateY(10px);
  transition: opacity var(--a-nav-fade, 600ms) var(--ease), transform var(--a-nav-fade, 600ms) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--a-nav-stagger, 90ms));
}
.a-nav.is-in li{ opacity:1; transform:none; }
.a-nav a{
  display:inline-flex; flex-direction:column; gap:.55em; text-decoration:none; color: var(--ink);
  padding:.4em .6em .4em 0; position:relative;
}
.a-nav-tag{ font-family: var(--font-mono); font-size:.8em; color: var(--ink-soft); letter-spacing:.02em; transition: color .3s var(--ease); }
.a-nav-label{
  font-family: var(--font-mono); font-weight:500; font-size: var(--a-nav-label, clamp(16px, 1.25vw, 24px));
  position:relative; width:max-content;
}
.a-nav-label::after{
  content:''; position:absolute; left:0; right:0; bottom:-.2em; height:1.5px;
  background: var(--accent-text); transform:scaleX(0); transform-origin:left; transition: transform .35s var(--ease);
}
@media (hover:hover){
  .a-nav a:hover .a-nav-label::after{ transform:scaleX(1); }
  .a-nav a:hover .a-nav-tag{ color: var(--accent-text); }
}
.a-nav a:focus-visible .a-nav-label::after{ transform:scaleX(1); }

/* ---- corner loops ---- */
.a-corner{
  position:absolute; opacity:0; transition: opacity var(--a-corners-fade, 700ms) var(--ease);
}
.a-corner.is-in{ opacity:1; }
.a-corner-left{ left: var(--a-corner-left-x, 4.2vw); bottom: var(--a-corner-left-b, -1.6vw); width: var(--a-corner-left-w, 24.5vw); }
.a-corner-right{ right: var(--a-corner-right-x, 2.3vw); bottom: var(--a-corner-right-b, -5.8vw); width: var(--a-corner-right-w, 28.9vw); }

/* ---- tagline (the centered one that glides down) ---- */
.a-tagline{
  position:absolute; left:50%; top:50%; z-index:4; white-space:nowrap; pointer-events:none;
  font-family: var(--font-mono); font-weight:500; color: var(--ink); text-align:center;
  line-height: var(--a-cue-row, 2em);
  transform: translate(-50%, -50%);
}
.a-tagline.is-moving{
  transform: translate(calc(-50% + var(--a-dx, 0px)), calc(-50% + var(--a-dy, 0px)));
  transition: transform var(--a-tagline-move, 1500ms) var(--a-tagline-ease, cubic-bezier(.7,0,.3,1));
}

/* ---- bottom cue: tagline <-> "See our work | Scroll more", swapping ---- */
.a-cue{
  position:absolute; left:50%; transform:translateX(-50%); z-index:3;
  bottom: var(--a-cue-bottom, 4.2vh); visibility:hidden;
}
.a-cue.is-ready{ visibility:visible; }
.a-cue-window{ height: var(--a-cue-row, 2em); overflow:hidden; }
.a-cue-track{ display:flex; flex-direction:column; align-items:center; will-change: transform; }
.a-cue-item{
  height: var(--a-cue-row, 2em); line-height: var(--a-cue-row, 2em); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:1.1em; white-space:nowrap;
  font-family: var(--font-mono); font-weight:500; color: var(--ink);
}
.a-cue-item a, .a-cue-item button{
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  position:relative; line-height:inherit;
}
.a-cue-item a::after, .a-cue-item button::after{
  content:''; position:absolute; left:0; right:0; bottom:.35em; height:1.5px;
  background: var(--accent-text); transform:scaleX(0); transform-origin:left; transition: transform .35s var(--ease);
}
@media (hover:hover){ .a-cue-item a:hover::after, .a-cue-item button:hover::after{ transform:scaleX(1); } }
.a-cue-item a:focus-visible::after, .a-cue-item button:focus-visible::after{ transform:scaleX(1); }
/* the thin divider keeps the live site's orange scroll tick */
.a-cue-divider{ width:1px; height:1.3em; background: var(--ink-soft); position:relative; overflow:hidden; flex-shrink:0; opacity:.55; }
.a-cue-divider::after{
  content:''; position:absolute; inset:0; background: var(--accent);
  transform: translateY(100%); animation: scrollcue-tick var(--a-tick, 1.8s) var(--ease) infinite;
}

/* ---- live clock, top center ---- */
.a-clock{
  position:fixed; left:50%; transform:translateX(-50%); z-index:60; pointer-events:none;
  top: var(--a-clock-top, 3.4vh); font-family: var(--font-mono); font-weight:500;
  font-size: var(--a-clock-size, clamp(13px, 1.1vw, 21px)); letter-spacing:.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space:nowrap;
}

/* ---- reduced motion: skip straight to the finished layout ---- */
@media (prefers-reduced-motion: reduce){
  .a-nav li, .a-corner, .a-clock{ transition:none !important; }
  .a-cue-divider::after{ animation:none !important; }
}

/* ---- phones ---- */
@media (max-width: 640px){
  .a-logo{ width:88vw; top:17vh; }
  .a-nav{ top:50vh; }
  .a-nav ul{ padding-left: var(--gutter); grid-template-columns: repeat(2, 1fr); row-gap:18px; }
  .a-corner-left{ left:-2vw; bottom:6vh; width:50vw; }
  .a-corner-right{ right:-4vw; bottom:3vh; width:56vw; }
  .a-cue{ bottom:3vh; }
  .a-clock{ display:none; }
}

/* ---- top-left dock: at the top of Variant A show only HOME (like the Figma);
        the full link list returns on hover or once you scroll. Desktop only. ---- */
@media (min-width:641px){
  body.variant-a:not(.scrolled) .nav-dock:not(:hover):not(:focus-within):not(.force-expand) .nav-links li:not(:first-child){ display:none; }
}

/* ============================================================
   VARIANT A — rectangular docks (nav pill + light/dark pill)
   Radii / width are set in config.js (layout.dock*). Scoped to
   body.variant-a so the original variant (B) is untouched.
   ============================================================ */
body.variant-a .nav-dock,
body.variant-a .toggle-dock{
  border-radius: var(--a-dock-radius, 10px);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
}
body.variant-a .toggle-dock{ padding:6px; gap:8px; }
body.variant-a .mode-toggle{
  border-radius: var(--a-dock-inner-radius, 7px);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
body.variant-a .mode-btn{ border-radius: calc(var(--a-dock-inner-radius, 7px) - 1px); padding:9px 18px; }
body.variant-a .mute-btn{ border-radius: var(--a-dock-inner-radius, 7px); }

/* nav pill: plain logo mark (no dark circle), wider, with the accent dot */
body.variant-a .logo-tab{ background:transparent; border-radius: var(--a-dock-inner-radius, 7px); width:46px; }
body.variant-a .logo-tab .logo-mark{ width:22px; }
body.variant-a .logo-tab .logo-mark-light{ display:none; }
body.variant-a .logo-tab .logo-mark-dark{ display:block; }
body.variant-a[data-theme="dark"] .logo-tab .logo-mark-light{ display:block; }
body.variant-a[data-theme="dark"] .logo-tab .logo-mark-dark{ display:none; }
body.variant-a .nav-links a{ border-radius: var(--a-dock-inner-radius, 7px); }

@media (min-width:641px){
  body.variant-a:not(.scrolled) .nav-dock{ min-width: var(--a-navdock-minw, 190px); padding-right:34px; }
  body.variant-a:not(.scrolled) .nav-dock::after{
    content:''; position:absolute; right:18px; top:50%; width:6px; height:6px; margin-top:-3px;
    border-radius:50%; background: var(--accent); transition: opacity .25s var(--ease);
  }
  body.variant-a .nav-dock:hover::after, body.variant-a .nav-dock:focus-within::after, body.variant-a .nav-dock.force-expand::after{ opacity:0; }
}

/* ---- site fonts (set in config.js -> fonts) ---- */
.a-tagline, .a-cue-item, .a-nav-label{ font-family: var(--a-font-title, var(--font-display)); }
.a-nav-tag, .a-clock{ font-family: var(--a-font-meta, var(--font-mono)); }

/* ---- arrived from another page: skip the intro, show the finished state ---- */
.a-skip .a-tagline{ display:none; }
.a-skip .a-cue{ visibility:visible; }
.a-skip .a-nav li{ opacity:1; transform:none; transition:none; }
.a-skip .a-corner{ opacity:1; transition:none; }

/* ---- liquid cursor (replaces the stock ring in Variant A; coordinates stay) ---- */
@media (pointer:fine){
  body.variant-a .cursor{ display:none !important; }
  .a-cursor-ring, .a-cursor-dot{ position:fixed; top:0; left:0; pointer-events:none; z-index:9999; opacity:0; transition: opacity .25s var(--ease); }
  .a-cursor-ring{
    width: var(--a-ring, 34px); height: var(--a-ring, 34px); border:1.5px solid var(--accent); border-radius:50%;
    will-change: transform; transition: opacity .25s var(--ease), background-color .3s var(--ease);
  }
  .a-cursor-ring.is-hover{ background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .a-cursor-dot{ width: var(--a-dot, 6px); height: var(--a-dot, 6px); border-radius:50%; background: var(--accent); will-change: transform; }
  .a-cursor-ring.is-shown, .a-cursor-dot.is-shown{ opacity:1; }
  .a-cursor-ring.is-suppressed, .a-cursor-dot.is-suppressed{ opacity:0 !important; }
}