/* ─────────────────────────────────────────────────────────────────────────────
   Landing hero — lifted from the PitchTrack product page (docs/sports/index.html).

   The pitch geometry, mow stripes, marker scale, 16-second pass-chain and the
   portrait rotation on phones are carried over unchanged, so the register reads
   as the same product as the rest of kamhq.com. Two things are added, both
   because this page has a job the product page does not: a call to action under
   the rule, and the eligibility line.

   Tokens (--bg, --accent, --turf, --mow-*) come from app.css, which is loaded
   first — this file deliberately does not redeclare them, so a change to the
   palette moves both stylesheets at once.
   ──────────────────────────────────────────────────────────────────────────── */

.hero-land {
  /* Single source of truth for hero scale. The pitch is height-bound as well as
     width-bound, so it always leaves the dark band above and below that the
     composition depends on; every other hero element is derived from it, so
     text, markers and turf keep the same proportions at any viewport size. */
  --pitch-w: min(92vw, 105vh, 1240px);

  position: relative;
  /* 58px is the sticky topbar. Without this the hero forces a scrollbar on a
     page that is meant to open exactly filling the screen. */
  min-height: calc(100vh - 58px);
  min-height: calc(100dvh - 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Faint grid — visible only in the dark surround; the pitch paints over it. */
.hero-land::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(53,208,127,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,208,127,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* ── Pitch ───────────────────────────────────────────────────────────────── */

.pitch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pitch-w);
  aspect-ratio: 105 / 68;
  transform: translate(-50%, -50%);

  background-color: var(--turf);
  background-image:
    /* floodlight falloff — kept low so it lifts the turf without hazing it */
    radial-gradient(ellipse 95% 95% at 50% 42%, rgba(190,255,220,0.03), rgba(255,255,255,0) 78%),
    /* mow columns — 12 bands ≈ 8.75 m each */
    repeating-linear-gradient(to right,
      var(--mow-col) 0 8.3333%,
      rgba(255,255,255,0) 8.3333% 16.6667%),
    /* mow rows — 8 bands ≈ 8.5 m each; intersections read brightest */
    repeating-linear-gradient(to bottom,
      var(--mow-row) 0 12.5%,
      rgba(255,255,255,0) 12.5% 25%);

  box-shadow:
    0 0 0 1px var(--accent-hair),
    0 calc(var(--pitch-w) * 0.032) calc(var(--pitch-w) * 0.105) rgba(0,0,0,0.65),
    inset 0 0 calc(var(--pitch-w) * 0.153) rgba(0,0,0,0.62);
}

.pitch svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pitch svg .line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.pitch svg .spot { fill: #fff; opacity: 0.5; }

/* ── Player markers ──────────────────────────────────────────────────────── */

.player {
  position: absolute;
  /* Floor keeps the markers readable once the pitch goes portrait on phones */
  width: clamp(8px, calc(var(--pitch-w) * 0.0097), 12px);
  height: clamp(8px, calc(var(--pitch-w) * 0.0097), 12px);
  transform: translate(-50%, -50%);
}

.player .dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.player .ring {
  position: absolute;
  inset: calc(var(--pitch-w) * -0.0057);
  border-radius: 50%;
  border: 1px dashed var(--accent-soft);
}

.player .tag {
  position: absolute;
  top: calc(var(--pitch-w) * -0.0177);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(5px, calc(var(--pitch-w) * 0.0065), 8px);
  font-weight: 600;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* Opponents: outlined, static, no ring */
.player.opp .dot {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  opacity: 1;
}
.player.opp .ring, .player.opp .tag { display: none; }

/* Pulse when the ball arrives — delays sync with the ball keyframes (16s loop) */
.player.chain .ring { animation: receive 16s linear infinite; }
@keyframes receive {
  0%      { transform: scale(1);    opacity: 0.9; }
  4.5%    { transform: scale(2.1);  opacity: 0;   }
  4.501%, 100% { transform: scale(1); opacity: 0.35; }
}
.p1 .ring { animation-delay: 0s; }
.p2 .ring { animation-delay: 1.76s; }
.p3 .ring { animation-delay: 3.52s; }
.p4 .ring { animation-delay: 5.28s; }
.p5 .ring { animation-delay: 7.04s; }
.p6 .ring { animation-delay: 8.8s; }
.p7 .ring { animation-delay: 10.56s; }
.p8 .ring { animation-delay: 12.32s; }

/* ── The ball ────────────────────────────────────────────────────────────── */

.ball {
  position: absolute;
  width: clamp(6px, calc(var(--pitch-w) * 0.0081), 10px);
  height: clamp(6px, calc(var(--pitch-w) * 0.0081), 10px);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 26px rgba(255,255,255,0.45);
  animation: pass 16s ease-in-out infinite;
  z-index: 2;
}

/* Pass sequence: P1 → … → P8 → goal, fade, reset */
@keyframes pass {
  0%    { left: 12%; top: 50%; opacity: 1; }
  4%    { left: 12%; top: 50%; }
  11%   { left: 24%; top: 26%; }
  15%   { left: 24%; top: 26%; }
  22%   { left: 34%; top: 64%; }
  26%   { left: 34%; top: 64%; }
  33%   { left: 46%; top: 36%; }
  37%   { left: 46%; top: 36%; }
  44%   { left: 57%; top: 66%; }
  48%   { left: 57%; top: 66%; }
  55%   { left: 68%; top: 28%; }
  59%   { left: 68%; top: 28%; }
  66%   { left: 78%; top: 55%; }
  70%   { left: 78%; top: 55%; }
  77%   { left: 86%; top: 40%; }
  81%   { left: 86%; top: 40%; opacity: 1; }
  88%   { left: 98%; top: 50%; opacity: 1; }
  90%   { left: 98%; top: 50%; opacity: 0; }
  94%   { left: 12%; top: 50%; opacity: 0; }
  100%  { left: 12%; top: 50%; opacity: 1; }
}

/* ── Hero copy ───────────────────────────────────────────────────────────── */

.hero-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  /* 860/1240 of the turf — this is what fixes the three-line wrap */
  max-width: calc(var(--pitch-w) * 0.694);
  width: 100%;
  padding: 0 28px;
}

/* Soft vignette behind the text so it stays legible over the turf */
.hero-copy::before {
  content: '';
  position: absolute;
  inset: calc(var(--pitch-w) * -0.0645) calc(var(--pitch-w) * -0.0968);
  background: radial-gradient(ellipse at center,
    rgba(6,16,10,0.95) 0%, rgba(6,16,10,0.78) 42%,
    rgba(6,16,10,0.34) 66%, transparent 84%);
  z-index: -1;
}

.h1-wrap { position: relative; }

.h1-wrap h1 {
  font-size: clamp(24px, calc(var(--pitch-w) * 0.042), 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #fff;
}

.h1-wrap h1 strong { font-weight: 700; }

/* Hidden sizer reserves the final height so typing doesn't shift the layout */
.h1-wrap .sizer { visibility: hidden; }

.h1-wrap .typed {
  position: absolute;
  inset: 0;
}

/* Typewriter caret */
.caret {
  display: inline-block;
  width: 0.08em;
  height: 0.95em;
  margin-left: 0.08em;
  background: var(--accent);
  vertical-align: -0.1em;
  animation: blink 0.9s steps(1) infinite;
}

@keyframes blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.hero-copy .rule {
  width: calc(var(--pitch-w) * 0.045);
  height: 2px;
  background: var(--accent);
  margin: calc(var(--pitch-w) * 0.023) auto 0;
}

/* ── Call to action (added: the product page has no action to take) ──────── */

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: calc(var(--pitch-w) * 0.026);
}

.hero-cta .btn { background: rgba(6,16,10,0.5); }
.hero-cta .btn.primary { background: var(--accent); }

.hero-note {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ── Scroll cue ──────────────────────────────────────────────────────────── */

.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fg-mute);
  transition: color 0.2s ease;
}

.scroll-cue:hover { color: var(--accent); }

/* Hairline descends over the turf; the label lands in the dark band below */
.scroll-cue i {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, rgba(53,208,127,0), var(--accent));
}

/* ── Mobile: rotate the pitch to portrait ────────────────────────────────── */

@media (max-width: 720px) {
  /* Rotated to portrait, so the pitch's long axis is bound by height, not width */
  .hero-land { --pitch-w: min(88vh, 640px); }
  .pitch {
    transform: translate(-50%, -50%) rotate(90deg);
    background-image:
      radial-gradient(ellipse 78% 78% at 50% 44%, rgba(255,255,255,0.055), rgba(255,255,255,0) 72%),
      repeating-linear-gradient(to right,
        var(--mow-col) 0 12.5%,
        rgba(255,255,255,0) 12.5% 25%),
      repeating-linear-gradient(to bottom,
        var(--mow-row) 0 8.3333%,
        rgba(255,255,255,0) 8.3333% 16.6667%);
  }
  .player .tag { display: none; }
  .h1-wrap h1 { letter-spacing: -0.5px; }
  .scroll-cue { bottom: 18px; }
}

/* Very short viewports (a phone in landscape): the cue collides with the copy. */
@media (max-height: 560px) {
  .scroll-cue { display: none; }
}

/* ── Reduced motion: no typing, no ball flight ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ball, .player.chain .ring, .caret { animation: none; }
  .caret { display: none; }
}