/* ============================================================
   chrome.css — THE SIGNATURE "TELL". Keep this consistent across
   every Bhayson site. This is what makes a site recognizably yours.
   (Blueprint grid substrate · wordmark + reveal · scroll-film hero ·
    two-part captions · scroll-to-begin ritual.)
   ============================================================ */

/* --- Blueprint grid substrate: persistent thin technical lines --- */
.grid-substrate {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 85%);
  opacity: .6;
}

/* --- Top nav + wordmark --- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad);
  mix-blend-mode: difference; color: #fff; /* stays legible over any film */
}
.wordmark { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; }
.wordmark .mark { width: 18px; height: 18px; border-radius: 50%;
  background: conic-gradient(#fff 0 50%, transparent 50% 100%); border: 1.5px solid #fff; }
.nav a.wordmark span { animation: markReveal .9s cubic-bezier(.2,.8,.2,1) both; }
.nav-links { display: flex; gap: 26px; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-links a { opacity: .75; transition: opacity .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-toggle { display: none; background: none; border: 0; color: inherit; font-family: var(--font-mono); font-size: .78rem; letter-spacing:.12em; text-transform: uppercase; cursor: pointer; }

@keyframes markReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Scroll-film hero --- */
.hero {
  position: relative; height: auto; min-height: 100vh; z-index: 1;
  display: grid; place-items: center; overflow: hidden;
}
.hero__pin { position: sticky; top: 0; height: 100vh; width: 100vw; }
.film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__scroll-space { position: relative; z-index: 2; }

/* Opening frame content (before the film takes over) */
.hero__intro {
  position: absolute; inset: 0; z-index: 3; display: grid; align-content: center;
  padding: 0 var(--pad); max-width: var(--maxw); margin: 0 auto; left: 0; right: 0;
  pointer-events: none;
}
.hero__intro h1 { max-width: 14ch; mix-blend-mode: difference; color: #fff; }
.hero__intro .eyebrow { color: rgba(255,255,255,.8); mix-blend-mode: difference; }

/* --- Two-part captions (bold claim + soft qualifier) --- */
.caption {
  position: absolute; z-index: 3; left: var(--pad); bottom: clamp(64px, 12vh, 140px);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; max-width: 340px;
  opacity: 0; transform: translateY(14px); will-change: opacity, transform;
}
.caption.is-active { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.caption .claim { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.05; }
.caption .qual { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }

/* --- Scroll-to-begin ritual --- */
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 34px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.85); mix-blend-mode: difference; text-align: center;
}
.scroll-cue::after { content: ""; display: block; width: 1px; height: 26px; margin: 10px auto 0; background: currentColor; animation: cuePulse 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cuePulse { 0%,100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* --- Loading state for real image frames --- */
.film-loader { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: var(--bg); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); transition: opacity .5s; }
.film-loader.is-done { opacity: 0; pointer-events: none; }

/* --- Footer --- */
.foot { border-top: 1px solid var(--line); padding: 48px 0; position: relative; z-index: 1; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.foot .wordmark { color: var(--ink); }
.foot small { font-family: var(--font-mono); color: var(--ink-faint); letter-spacing: .08em; }

@media (max-width: 720px) {
  .nav-links { position: fixed; inset: 0; background: var(--bg); color: var(--ink); mix-blend-mode: normal;
    flex-direction: column; justify-content: center; align-items: center; gap: 28px; font-size: 1rem;
    transform: translateY(-100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: 45; }
  .nav[data-open="true"] .nav-links { transform: none; }
  .nav-toggle { display: block; z-index: 46; }
}