/* ======================================================================
   TY Graphics LLC — Home Page Hero (wireframe-to-render SVG)
   Thomas D. Young — Copyright (c) 2026 TY Graphics LLC
   Date: July 5, 2026  20:18:00 EDT (24-hour)  Epoch: 1783383480
   Purpose: Dark-locked home page styles. Hero opens on wireframe
   tire views (no fill, light hairline stroke) and crossfades to the
   rendered versions. No light-mode CSS. No !important declarations.
   ====================================================================== */

:root {
  --stage:      #23282a;   /* dark stage base            */
  --stage-deep: #16191b;   /* vignette edge              */
  --ink:        #f2efe8;   /* headline / body on dark    */
  --ink-dim:    #c8c4ba;   /* secondary text             */
  --gold:       #b8923e;   /* accent (eyebrow, italic)   */
  --wire:       #5c6461;   /* wireframe stroke tone      */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
}



/* Self-hosted fonts (shipped in /fonts) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--stage-deep);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ---------- Navigation: dark-locked ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  height: 4.5rem;
  background: rgba(22, 25, 27, 0.92);
  border-bottom: 1px solid rgba(242, 239, 232, 0.08);
  backdrop-filter: blur(6px);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.nav-brand strong { font-weight: 700; }
.nav-brand .llc   { font-size: 0.6em; color: var(--ink-dim); letter-spacing: 0.12em; }

.nav-mark {
  width: 1.4rem; height: 1.4rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  position: relative;
}
.nav-mark::after {
  content: "";
  position: absolute;
  inset: 30%;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
}

.nav-links { display: flex; gap: 2.4vw; }

.nav-links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--ink); }
.nav-links a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- Hero stage ---------- */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(to top, rgba(126, 136, 140, 0.22) 0%, rgba(126, 136, 140, 0.0) 55%),
    radial-gradient(120vw 90vh at 68% 45%, var(--stage) 0%, var(--stage-deep) 78%);
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%);
  max-width: 26rem;
}

.hero-eyebrow {
  color: var(--gold);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  margin-bottom: 1.6rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.15;
}

.hero-lede {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  margin-top: 1rem;
}

.hero-body {
  margin-top: 1.8rem;
  color: var(--ink-dim);
  font-size: clamp(0.9rem, 1.05vw, 1.02rem);
  line-height: 1.7;
  max-width: 30rem;
}

.hero-cta {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  transition: background 0.3s ease, color 0.3s ease;
}
.hero-cta:hover,
.hero-cta:focus-visible { background: var(--gold); color: var(--stage-deep); }
.hero-cta:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---------- Tire stage: stacked wireframe + render layers ---------- */

.tire-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

/* Single composed pair (Thomas's registration; viewBox 388.44 x 390).
   Sized by stage HEIGHT so the near-square composition fits the
   viewport; width follows the aspect ratio. Both layers are
   absolutely stacked in the same box: identical position always. */
/* Ratios measured from Thomas's July 6 mock:
   tire top 8.8vh, bottom 97.3vh (height 88.5vh, center 53vh),
   right edge touching the viewport edge. */
.tire-pair {
  position: absolute;
  top: 62.5%;
  right: -0.5vw;
  transform: translateY(-50%);
  height: 108vh;
  aspect-ratio: 388.44 / 390;
}

.layer-render,
.layer-wire {
  position: absolute;
  inset: 0;
  will-change: opacity;              /* GPU-composited fades: the large
                                        SVGs otherwise repaint per frame
                                        and the fade snaps/blinks */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tire-pair svg,
.tire-pair img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wireframe layer: styled entirely by the source file's own
   classes (Thomas's line art) — no page-level stroke override. */
/* Initial states (JS animates; these hold pre-script and no-script) */
.layer-render { opacity: 0; }
.layer-wire   { opacity: 0; }   /* blank stage at load; JS fades it in */

/* No-JS and reduced motion: land on the rendered art immediately */
@media (prefers-reduced-motion: reduce) {
  .layer-render { opacity: 1; }
  .layer-wire   { opacity: 0; }
}
noscript.hero-fallback ~ .hero .layer-render { opacity: 1; }

/* ---------- Stage cover (return-flash shield) ----------
   Sits ABOVE the tire layers (z 2) and BELOW the copy (z 3),
   painted with the hero's own gradients so it is invisible
   while raised. Raised by default and on pagehide; dropped by
   the script the moment the arrival sequence starts. */
.stage-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(126, 136, 140, 0.22) 0%, rgba(126, 136, 140, 0.0) 55%),
    radial-gradient(120vw 90vh at 68% 45%, var(--stage) 0%, var(--stage-deep) 78%);
}

/* ---------- Replay control ---------- */

.replay {
  position: absolute;
  z-index: 3;
  right: 2.5vw;
  bottom: 2.5vh;
  background: transparent;
  border: 1px solid rgba(242, 239, 232, 0.25);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.replay:hover,
.replay:focus-visible { color: var(--ink); border-color: var(--ink-dim); }
.replay:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* ---------- Breakpoint reflow ---------- */

@media (max-width: 900px) {
  .hero-copy {
    left: 8vw; right: 8vw;
    top: auto; bottom: 8vh;
    transform: none;
    max-width: none;
  }
  .tire-stage {
    right: -18vw;
    top: 38%;
    width: 110vw;
    min-width: 0;
    height: 60vh;
  }
  .hero-body { max-width: 34rem; }
}