/* ======================================================================
   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-driven, but width-capped: in squarish windows (tablets,
     resized desktop windows) a purely vh-sized pair grows wider
     than the viewport and slides under the copy. min() leaves
     wide monitors exactly as approved. */
  height: min(108vh, 64vw);
  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 ---------- */

/* Lateral legibility gradient (overlay widths): full-height black
   gradient anchored to the hero's left edge, fading to transparent
   left-to-right. Sits above the tire layers (z 2, painted after the
   stage cover) and beneath the copy (z 3) - the text reads against
   it no matter how far the tread reaches. */
@media (min-width: 901px) {
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.62) 30%,
      rgba(0, 0, 0, 0.0) 60%);
  }
}

/* Mobile / portrait tablet: stacked reflow. The desktop layout
   overlays copy on the tire; at narrow widths the copy sits on the
   dark stage ABOVE the tire pair, which scales to viewport width
   below it. Nav wraps to two rows (see ty-nav.js), so the copy
   clears a taller header. */
@media (max-width: 900px) {
  .hero {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    position: relative;
    z-index: 3;
    left: auto; top: auto;
    transform: none;
    max-width: none;
    padding: 8.5rem 8vw 0;
  }
  .hero-body  { max-width: 34rem; }
  .tire-stage {
    position: relative;
    inset: auto;
    margin-top: 2.2rem;
    height: 94vw;              /* pair is near-square: height ~ width */
  }
  .tire-pair {
    top: 0;
    right: -8vw;               /* slight bleed off the right edge */
    transform: none;
    height: 100%;
  }
  .replay {
    position: relative;
    z-index: 3;
    right: auto; bottom: auto;
    align-self: flex-end;
    margin: 1.2rem 8vw 1.6rem;
  }
}