/* ───────────────────────────────────────
   FILE: css/hero.css
   PURPOSE: Homepage hero — ambient layers (grid/radial/vignette), the bike
            telemetry schematic (self-drawing silhouette, sensor points, leader
            lines, count-up readouts), title block, CTAs, and scroll cue.
   PART OF: Sentinel website stylesheet (split from css/styles.css)
   DEPENDS ON: css/tokens.css, js/hero/hero_telemetry.js
   LAST UPDATED: 2026-06-08
   ─────────────────────────────────────── */

/* ─── SHELL + AMBIENT LAYERS ─────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 132px 32px 96px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, black 30%, transparent 80%);
}
.hero-radial {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(212,148,12,0.10), transparent 60%),
    radial-gradient(circle at 80% 92%, rgba(184,64,64,0.05), transparent 50%);
  pointer-events: none;
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 72% at 50% 42%,
    transparent 30%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-corner { position: absolute; width: 32px; height: 32px; z-index: 2; }
.hero-corner.tl { top: 100px; left: 32px; border-top: 1px solid var(--muted); border-left: 1px solid var(--muted); }
.hero-corner.tr { top: 100px; right: 32px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); }
.hero-corner.bl { bottom: 32px; left: 32px; border-bottom: 1px solid var(--muted); border-left: 1px solid var(--muted); }
.hero-corner.br { bottom: 32px; right: 32px; border-bottom: 1px solid var(--muted); border-right: 1px solid var(--muted); }

.hero-content { position: relative; z-index: 2; max-width: 960px; width: 100%; }

/* ─── TITLE BLOCK ────────────────────────────────────────── */
.hero-meta {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.32em;
  color: var(--muted);
  margin-bottom: 26px;
}
.hero-meta-sep { width: 28px; height: 1px; background: var(--muted); }

.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(58px, 12vw, 150px);
  letter-spacing: 0.04em;
  color: var(--accent);
  line-height: 0.92;
  margin-bottom: 14px;
  text-shadow: 0 0 50px rgba(212,148,12,0.25);
}
.hero-title-line { display: inline-block; color: var(--accent); }

.hero-subtitle-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.46em;
  color: var(--text-dim);
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
}

/* ─── BIKE TELEMETRY SCHEMATIC ───────────────────────────── */
.hero-schematic {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 34px;
}
.hero-schematic svg {
  width: 100%; height: auto;
  display: block;
  overflow: visible;
}

/* drawable silhouette strokes — pathLength="1" normalises every path so one
   dash rule animates them all regardless of true length. */
.bike-stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-io);
}
.bike-stroke.tyre  { stroke-width: 3.5; }
.bike-stroke.fine  { stroke-width: 1.2; stroke: var(--accent-2); }
.hero-schematic.drawn .bike-stroke { stroke-dashoffset: 0; }
.bike-stroke.d0 { transition-delay: 0s;    }
.bike-stroke.d1 { transition-delay: 0.18s; }
.bike-stroke.d2 { transition-delay: 0.36s; }
.bike-stroke.d3 { transition-delay: 0.54s; }
.bike-stroke.d4 { transition-delay: 0.72s; }
.bike-stroke.d5 { transition-delay: 0.9s;  }

/* sensor groups — hidden until JS adds .lit in sequence */
.sensor { opacity: 1; }
.sensor-dot   { fill: var(--accent); opacity: 0; transition: opacity 0.3s ease; }
.sensor-halo  { fill: none; stroke: var(--accent); stroke-width: 1.5;
                opacity: 0; transform-box: fill-box; transform-origin: center; }
.leader {
  stroke: var(--accent); stroke-width: 1; opacity: 0;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s var(--ease-out), opacity 0.3s ease;
}
.readout { opacity: 0; transition: opacity 0.45s ease; }

.sensor.lit .sensor-dot  { opacity: 1; animation: sensorPulse 1.9s ease-in-out infinite; }
.sensor.lit .sensor-halo { opacity: 0.7; animation: sensorPing 1.9s ease-out infinite; }
.sensor.lit .leader      { opacity: 0.55; stroke-dashoffset: 0; }
.sensor.lit .readout     { opacity: 1; }

@keyframes sensorPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes sensorPing  {
  0%   { transform: scale(0.5); opacity: 0.8; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* readout typography (SVG text) */
.r-frame  { fill: none; stroke: var(--border); stroke-width: 1; }
.r-origin { fill: var(--accent); font-family: var(--font-mono); font-size: 14px; letter-spacing: 2px; }
.r-metric { fill: var(--muted);  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; }
.r-value  { fill: var(--text);   font-family: var(--font-mono); font-size: 34px; }
.r-tick   { stroke: var(--accent); stroke-width: 1; opacity: 0.6; }

/* hover/focus affordance for the explain layer (Part 2) */
.sensor[data-explain] { cursor: help; }
.sensor[data-explain] .hit { fill: transparent; }
.sensor[data-explain]:hover .r-frame,
.sensor[data-explain]:focus-visible .r-frame,
.sensor.explain-open .r-frame { stroke: var(--accent); }

/* ─── CTAs ───────────────────────────────────────────────── */
.hero-actions {
  display: flex; gap: 16px; justify-content: center;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.3em;
  text-decoration: none;
  padding: 18px 28px;
  position: relative; overflow: hidden;
  transition: color .3s var(--ease-out);
}
.cta-primary { background: var(--accent); color: var(--bg); }
.cta-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, #f0b04a, var(--accent));
  transform: translateX(-101%);
  transition: transform .4s var(--ease-out);
  z-index: 0;
}
.cta-primary:hover::before { transform: translateX(0); }
.cta-primary .cta-label, .cta-primary .cta-arrow { position: relative; z-index: 1; }
.cta-primary .cta-arrow { transition: transform .35s var(--ease-out); }
.cta-primary:hover .cta-arrow { transform: translateX(4px); }
.cta-ghost { border: 1px solid var(--border); color: var(--text-dim); background: transparent; }
.cta-ghost:hover { color: var(--text); border-color: var(--text-dim); }
.cta-arrow { display: inline-block; }

/* ─── SCROLL CUE ─────────────────────────────────────────── */
.hero-scroll {
  position: absolute; bottom: 52px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.4em;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 2;
}
.hero-scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scrollDrip 2s infinite;
  transform-origin: top;
}
@keyframes scrollDrip {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── REDUCED MOTION — show the final drawn state, no sequence ─── */
@media (prefers-reduced-motion: reduce) {
  .bike-stroke { transition: none; stroke-dashoffset: 0; }
  .leader      { transition: none; }
  .sensor-dot, .sensor-halo, .leader, .readout { opacity: 1; }
  .sensor .leader { stroke-dashoffset: 0; }
  .sensor-dot { opacity: 1; }
  .sensor .sensor-dot, .sensor .readout { opacity: 1; }
  .sensor.lit .sensor-dot, .sensor.lit .sensor-halo { animation: none; }
  .hero-scroll-line { animation: none; }
}