/* ==========================================================================
   hero.css — FORMA Shared Hero Section
   Used by: audit.html · ui-library.html
   Requires: tokens.css · shared.css (loaded before this file)
   ========================================================================== */

/* ── Hero shell — dark, full viewport height ── */
.hero {
  height: calc(100dvh - var(--sp-48));
  min-height: 400px;
  background: var(--color-surface-background-inverse);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Background grid overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-borders-hero) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-borders-hero) 1px, transparent 1px);
  background-size: var(--sp-48) var(--sp-48);
  opacity: 0.5;
  pointer-events: none;
}

.hero-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(var(--gap-lg), 6dvh, 120px) clamp(var(--gap-lg), 5vw, var(--gap-4xl)) clamp(var(--gap-lg), 4dvh, var(--gap-4xl));
  overflow: hidden;
}

.eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-400);
  margin-bottom: clamp(var(--gap-sm), 2dvh, var(--gap-lg));
}

.hero-title {
  font-family: var(--font-family-headings);
  font-size: clamp(36px, 8vw, 110px);
  line-height: 0.93;
  letter-spacing: 0.015em;
  color: var(--color-text-inverse);
  margin-bottom: clamp(var(--gap-sm), 3dvh, var(--sp-40));
}

.hero-title .muted {
  display: block;
  color: var(--color-text-hero-dim);
}

.hero-lead {
  max-width: 560px;
  color: var(--color-text-hero-dim);
  font-size: clamp(13px, 2dvh, var(--font-size-body-md));
  line-height: clamp(1.4, 2.5dvh, 1.75);
  font-weight: var(--font-weight-light);
}

/* ── Stats row — dark context ── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-borders-hero);
  margin-top: var(--gap-3xl);
  max-width: 560px;
}

.stat {
  background: transparent;
  padding: var(--sp-24) 0 var(--sp-24) 0;
  border-right: 1px solid var(--color-borders-hero);
  padding-right: var(--sp-28);
  padding-left: var(--sp-4);
  transition: none;
}

.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; padding-right: 0; }

.stat-val {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-tight);
  margin-bottom: 5px;
  color: var(--color-text-inverse);
}

.stat-lbl {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue-400);
}

/* ── Scroll indicator ── */
.hero-scroll {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  padding-bottom: var(--sp-32);
  color: var(--color-text-hero-ghost);
}

.hero-scroll__label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
}

.hero-scroll__mouse {
  display: block;
  color: inherit;
}

.hero-scroll__dot {
  animation: mouse-scroll 1.8s var(--ease-expo) infinite;
}

@keyframes mouse-scroll {
  0%   { transform: translateY(0);    opacity: 0; }
  12%  { opacity: 0.9; }
  75%  { transform: translateY(17px); opacity: 0.7; }
  100% { transform: translateY(17px); opacity: 0; }
}

/* ── Load animations ── */
.h-eyebrow { animation: fade-in 400ms ease 150ms both; }
.h-line1   { animation: slide-up var(--dur-slow) var(--ease-expo) 300ms both; }
.h-line2   { animation: slide-up var(--dur-slow) var(--ease-expo) 420ms both; }
.h-lead    { animation: fade-in 500ms ease 560ms both; }
.h-stat    { animation: slide-up var(--dur-base) var(--ease-expo) both; }
.h-stat:nth-child(1) { animation-delay: 680ms; }
.h-stat:nth-child(2) { animation-delay: 760ms; }
.h-stat:nth-child(3) { animation-delay: 840ms; }
.h-scroll  { animation: fade-in 600ms ease 1000ms both; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row .stat:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll__dot { animation: none; opacity: 0.5; transform: translateY(8px); }
}

/* ── Stat icons — animated SVGs ── */
.stat-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-top: 14px;
  margin-bottom: 0;
  overflow: visible;
  color: var(--color-blue-400);
  opacity: 0.5;
}

@keyframes ci-block-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ci-block-pulse {
  0%, 100% { fill-opacity: 0.06; }
  50%       { fill-opacity: 0.2; }
}
.ci-block { fill: currentColor; fill-opacity: 0.06; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ci-b1 { animation: ci-block-in 420ms var(--ease-expo)  700ms both, ci-block-pulse 3s ease-in-out 1600ms infinite; }
.ci-b2 { animation: ci-block-in 420ms var(--ease-expo)  820ms both, ci-block-pulse 3s ease-in-out 1760ms infinite; }
.ci-b3 { animation: ci-block-in 420ms var(--ease-expo)  940ms both, ci-block-pulse 3s ease-in-out 1920ms infinite; }
.ci-b4 { animation: ci-block-in 420ms var(--ease-expo) 1060ms both, ci-block-pulse 3s ease-in-out 2080ms infinite; }

@keyframes ci-card-in {
  from { opacity: 0; transform: translate(8px, -6px) scale(0.94); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes ci-card-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2.5px); }
}
.ci-card { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ci-card-back  { fill-opacity: 0.04; stroke-opacity: 0.4;  animation: ci-card-in 500ms var(--ease-expo) 1060ms both, ci-card-float 4s ease-in-out 2000ms infinite; }
.ci-card-mid   { fill-opacity: 0.07; stroke-opacity: 0.65; animation: ci-card-in 500ms var(--ease-expo)  940ms both, ci-card-float 4s ease-in-out 2200ms infinite; }
.ci-card-front { fill-opacity: 0.12; stroke-opacity: 1;    animation: ci-card-in 500ms var(--ease-expo)  820ms both, ci-card-float 4s ease-in-out 2400ms infinite; }
.ci-stripe { fill: currentColor; }
.ci-stripe-back  { fill-opacity: 0.15; animation: ci-card-in 500ms var(--ease-expo) 1060ms both; }
.ci-stripe-mid   { fill-opacity: 0.2;  animation: ci-card-in 500ms var(--ease-expo)  940ms both; }
.ci-stripe-front { fill-opacity: 0.3;  animation: ci-card-in 500ms var(--ease-expo)  820ms both; }

@keyframes ci-line-in {
  from { stroke-dashoffset: var(--len); opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ci-dot-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ci-code-shimmer {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
.ci-code-line { stroke: currentColor; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); stroke-linecap: round; }
.ci-dot { fill: currentColor; transform-origin: center; }
.ci-dot-1 { animation: ci-dot-pop 280ms var(--ease-expo)  840ms both; }
.ci-dot-2 { animation: ci-dot-pop 280ms var(--ease-expo) 1400ms both; }
.ci-l1 { animation: ci-line-in 480ms var(--ease-expo)  880ms both, ci-code-shimmer 2.6s ease-in-out 1900ms infinite; }
.ci-l2 { animation: ci-line-in 420ms var(--ease-expo) 1020ms both, ci-code-shimmer 2.6s ease-in-out 2100ms infinite; }
.ci-l3 { animation: ci-line-in 380ms var(--ease-expo) 1140ms both, ci-code-shimmer 2.6s ease-in-out 2300ms infinite; }
.ci-l4 { animation: ci-line-in 400ms var(--ease-expo) 1260ms both, ci-code-shimmer 2.6s ease-in-out 2500ms infinite; }

@media (prefers-reduced-motion: reduce) {
  .ci-b1, .ci-b2, .ci-b3, .ci-b4,
  .ci-card-back, .ci-card-mid, .ci-card-front,
  .ci-stripe-back, .ci-stripe-mid, .ci-stripe-front,
  .ci-dot-1, .ci-dot-2,
  .ci-l1, .ci-l2, .ci-l3, .ci-l4 { animation-duration: 1ms !important; }
}