/* ============================================================
   Privacy Scanner Website — Hero / Radar / Status-box styles
   Sources: DESIGN_SPEC.md §7.2 (hero) + §8 (radar) + §9 (status)
            + prompt-level overrides for Phase 1.4a

   Token dependencies (must load before this file):
     - All §6 surface, text, teal, risk, border, shadow tokens
     - --font-sans, --font-mono
     - --fs-display, --fs-h1, --fs-body-lg, --fs-body-sm,
       --fs-mono-lg, --fs-mono, --fs-mono-sm, --fs-eyebrow,
       --fs-caption
     - --sp-*, --r-*, --dur-*, --ease-*
     - --btn-h-lg
     - --radar-rotation (8s), --radar-pulse (2.4s)
     - --status-bg, --status-border, --status-radius,
       --status-padding, --status-leader
     - --live-dot, --live-dot-glow
     - --maxw-content, --maxw-wide

   Perf rules (radar):
     transform + opacity only on animated elements.
     No filter, no box-shadow on rotating <g>, no will-change.
   ============================================================ */


/* ============================================================
   Hero section shell
   ============================================================ */
.hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-10);
  /* Spec §7.2.9 radial accent — anchored to radar's quadrant */
  background:
    radial-gradient(ellipse at 75% 30%, var(--teal-wash), transparent 60%),
    var(--bg-base);
  overflow: hidden;
}
@media (min-width: 1280px) {
  .hero {
    padding-block: var(--sp-10) var(--sp-11);
  }
}

.hero-inner {
  max-width: var(--maxw-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 600px)  { .hero-inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-9);
    padding-inline: var(--gutter-desktop);
  }
}

.hero-copy { min-width: 0; }


/* ============================================================
   Eyebrow — "Live · Mac · Local" pill with pulsing dot
   ============================================================ */
.eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  margin-block-end: var(--sp-6);
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-soft);
}
.eyebrow-sep { color: var(--text-faint); }

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live-dot);
  box-shadow: 0 0 6px var(--live-dot-glow);
  /* Transform/opacity-only pulse per prompt #6 (1.6s cycle) */
  animation: live-pulse 1.6s var(--ease-in-out) infinite;
  transform-origin: center;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}


/* ============================================================
   H1
   ============================================================ */
.hero-h1 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);   /* §7.2.5 — NOT bold */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text);
  text-wrap: balance;
  max-width: 14ch;
}
/* CJK headings stay loose; balance/wrap-balance hurts orphaned punctuation */
:lang(ja) .hero-h1,
:lang(zh-Hans) .hero-h1,
:lang(ko) .hero-h1 {
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: auto;
  max-width: 18ch;
}


/* ============================================================
   Lede / sub-headline
   ============================================================ */
.hero-sub {
  margin: 0 0 var(--sp-7);
  max-width: 56ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-soft);
}


/* ============================================================
   CTA row — primary button + $9.99 chip on one logical row
   ============================================================ */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.cta-primary--lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h-lg);
  padding-inline: var(--sp-6);
  background: var(--teal);
  color: var(--text-on-teal);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--glow-teal-sm);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-emphasis);
}
.cta-primary--lg:hover { background: var(--teal-hover); box-shadow: var(--glow-teal); }
.cta-primary--lg:active { transform: translateY(1px); background: var(--teal-active); }
.cta-primary--lg:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--glow-teal-sm);
}

.price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-soft);
  background: var(--bg-2);
  border-radius: var(--r-pill);
  color: var(--text-soft);
  font-family: var(--font-sans);
}
.price-chip-amount {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.price-chip-period {
  font-size: var(--fs-body-sm);
  color: var(--text-soft);
}


/* ============================================================
   Hero visual column — wraps radar + status box
   Desktop: stacked, status overlays bottom-right of radar.
   Mobile: stacked, status flows below radar in normal flow.
   ============================================================ */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}


/* ============================================================
   Radar SVG
   ============================================================ */
.radar {
  width: var(--radar-size-mobile);
  aspect-ratio: 1;
  display: block;
  overflow: visible;
}
@media (min-width: 600px)  { .radar { width: var(--radar-size-tablet); } }
@media (min-width: 1280px) { .radar { width: var(--radar-size-desktop); } }

/* Cardinal axes — very subtle */
.radar-axes line {
  stroke: var(--radar-grid-color);
  stroke-width: 1;
  opacity: 0.4;
}

/* Rings — outer thicker per §8.1 */
.radar-ring {
  fill: none;
  stroke: var(--radar-ring-color);
  stroke-width: 1;
}
.radar-ring--outer {
  stroke-width: 1.5;
  stroke: color-mix(in srgb, var(--teal) 24%, transparent);
}

/* Center cross marker */
.radar-center line {
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Hit dots — color-mix of teal + per-hit risk tint via --hit-tint.
   transform-box: fill-box so scale animates around the dot center. */
.radar-hit {
  fill: color-mix(in srgb, var(--teal) 65%, var(--hit-tint, var(--teal)) 35%);
  transform-box: fill-box;
  transform-origin: center;
  animation: radar-hit-pulse 2.4s var(--ease-in-out) infinite;
  animation-delay: var(--pulse-delay, 0s);
}
@keyframes radar-hit-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.3; }
}

/* Sweep wedge — rotates around viewBox center.
   transform-origin in user-space SVG coords. */
.radar-sweep {
  transform-origin: 260px 260px;
  animation: radar-rotate var(--radar-rotation) var(--ease-linear) infinite;
}
@keyframes radar-rotate {
  to { transform: rotate(360deg); }
}


/* ============================================================
   Status box
   ============================================================ */
.status-box {
  width: 100%;
  max-width: 360px;
  background: var(--status-bg);
  border: var(--status-border);
  border-radius: var(--status-radius);
  padding: var(--status-padding);
  box-shadow: var(--shadow-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-mono);
}
@media (min-width: 1024px) {
  /* Desktop: status overlays bottom-right of radar */
  .status-box {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 320px;
    /* Translucent background so the radar still reads behind it */
    background: color-mix(in srgb, var(--bg-inset) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Row layout: flex with leader as ::after.
   Order: label (-1) | leader (0, via ::after) | value (1) */
.status-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: var(--sp-1);
}
.status-row::after {
  content: "";
  flex: 1;
  align-self: center;
  height: 4px;
  margin-inline: var(--sp-2);
  background-image: radial-gradient(
    circle,
    var(--status-leader) 1px,
    transparent 1.2px
  );
  background-size: 6px 4px;
  background-repeat: repeat-x;
  background-position: left center;
  opacity: 0.7;
  /* Mask fade at ends so the leader doesn't kiss label/value text */
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, black 6px,
    black calc(100% - 6px), transparent 100%
  );
  mask-image: linear-gradient(
    to right, transparent 0, black 6px,
    black calc(100% - 6px), transparent 100%
  );
  order: 0;
}

.status-label {
  order: -1;
  flex-shrink: 0;
  color: var(--text-soft);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.status-value {
  order: 1;
  flex-shrink: 0;
  color: var(--text);
  font-size: var(--fs-mono-lg);
  font-weight: var(--fw-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* data-color attribute → risk-* token color */
.status-value[data-color="critical"] { color: var(--risk-critical); }
.status-value[data-color="safe"]     { color: var(--risk-safe); }
.status-value[data-color="medium"]   { color: var(--risk-medium); }
.status-value[data-color="high"]     { color: var(--risk-high); }
.status-value[data-color="low"]      { color: var(--risk-low); }

/* CLOUD row separator — visual emphasis as a persistent claim */
.status-row[data-row="cloud"] {
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border-soft);
}
.status-row[data-row="cloud"] .status-label { color: var(--risk-safe); }

/* Mobile row pruning per spec §9.5 (prompt's [data-mobile-hide] hook) */
@media (max-width: 768px) {
  [data-mobile-hide] { display: none; }
}

/* sr-only — visually hidden, AT-readable */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   Reduced motion
   - Radar sweep: paused at fixed -30° (mid-arc) — see prompt #28
   - Radar hits: snap to scale 1, opacity 1
   - Live dot: no pulse
   - Count-up: handled in hero.js by skipping animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .radar-sweep {
    animation: none;
    transform: rotate(-30deg);
  }
  .radar-hit {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }
  .live-dot {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }
}