/* =========================================================
   3X3 St.Gallen — design system
   Aesthetic: stenciled sports broadcast, orange vs deep blue,
   court-line geometry, scoreboard data, grainy halftime energy.
   ========================================================= */

:root {
  /* Palette */
  --ink:    #08111f;
  --ink-2:  #0d1c33;
  --court:  #102a4c;
  --court-2:#16365f;
  --steel:  #2a4d80;
  --flame:  #ff6b1a;
  --ember:  #e54a00;
  --otmar:  #d3611f;  /* parent-club orange — used on Otmar lockups */
  --bone:   #f4efe6;
  --bone-2: #ebe4d4;
  --chalk:  #e3dccb;
  --line:   rgba(8, 17, 31, 0.14);
  --line-d: rgba(244, 239, 230, 0.18);

  /* Typography */
  --f-stencil: "Big Shoulders Stencil Display", "Bebas Neue", "Impact", sans-serif;
  --f-display: "Big Shoulders Display", "Bebas Neue", "Impact", sans-serif;
  --f-sans:    "Manrope", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Rhythm */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 18px;
  --r-pill: 999px;

  /* Layout */
  --max:   1280px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: var(--f-sans);
  background: var(--bone);
  color: var(--ink);
  font-size: clamp(15px, 0.92vw + 12px, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 0.8em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--flame); color: var(--ink); }

/* Subtle grain overlay across the whole page */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* mix-blend-mode + fixed-position overlays cause visible banding/flicker
   on Android Chromium during scroll, especially over staggered reveals.
   The grain is barely perceptible on small screens anyway — drop it. */
@media (max-width: 720px) { .grain { display: none; } }

/* =====================  TOPBAR  ===================== */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px var(--gutter);
  /* Fully opaque background + opaque hairline border so nothing can
     bleed through. */
  background: var(--bone);
  border-bottom: 1px solid #cfcabc;
  /* Promote to its own GPU layer so the hero's transformed pseudo-element
     can never paint above the topbar in browsers that handle z-index +
     transform stacking inconsistently. */
  transform: translateZ(0);
  will-change: transform;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-stencil); font-weight: 900;
}
.brand-crest-link {
  display: block;
  flex-shrink: 0;
  border-radius: 4px;
  transition: opacity 0.18s ease;
}
.brand-crest-link:hover { opacity: 0.78; }
.brand-crest {
  width: 36px; height: 36px;
  object-fit: contain;
  display: block;
}
.brand-divider {
  /* Subtle separator — short enough to feel like punctuation, not a partner lockup */
  width: 1px;
  height: 16px;
  background: rgba(8, 17, 31, 0.12);
}
.brand-wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-stencil); font-weight: 900;
  text-decoration: none;
  color: inherit;
}
.brand-mark { font-size: 28px; letter-spacing: -0.02em; line-height: 1; align-self: baseline; }
.brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flame); align-self: center; }
.brand-word {
  font-family: var(--f-sans); font-weight: 600;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--court);
  align-self: baseline;
}
/* Tablet range where the nav is still visible but the lockup needs room:
   collapse the "St.Gallen" wordmark + dot + divider so brand stays compact.
   Nav-side tightening lives below, after the .nav definitions. */
@media (max-width: 1100px) {
  .brand-divider { display: none; }
  .brand-word, .brand-dot { display: none; }
  .brand { gap: 10px; }
  .brand-wordmark { gap: 6px; }
}
@media (max-width: 480px) {
  .brand { gap: 8px; }
}

.nav { display: flex; gap: clamp(8px, 1.6vw, 22px); }
.nav a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 10px;
  position: relative;
  color: var(--ink);
  opacity: 0.78;
  transition: opacity 0.2s ease;
}
.nav a:hover { opacity: 1; }
.nav a::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px;
  height: 2px; background: var(--flame);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:hover::after { transform: scaleX(1); }

@media (max-width: 1100px) and (min-width: 901px) {
  /* Tablet range: nav is visible but compact so it doesn't squish the brand */
  .nav { gap: 4px; }
  .nav a { padding: 14px 8px; font-size: 12px; }
}
@media (max-width: 900px) { .nav { display: none; } }

/* =====================  CTAs  ===================== */

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-sans);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 13px;
  min-height: 44px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.cta:active { transform: translateY(1px); }

.cta-flame {
  background: var(--flame); color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(255, 107, 26, 0.65);
}
.cta-flame:hover { background: var(--ember); color: var(--bone); }

.cta-pill {
  background: var(--ink); color: var(--bone);
}
.cta-pill:hover { background: var(--flame); color: var(--ink); }

.cta-ghost {
  border-color: currentColor; background: transparent;
}
.cta-ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.cta-large { padding: 16px 30px; font-size: 14px; }

/* =====================  HERO · BROADCAST OVERLAY  ===================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* clip-path forces clipping of transformed children. Some browsers
     don't honour overflow:hidden against translate3d() — this makes the
     hero strictly bounded so the bg image cannot creep into the topbar. */
  clip-path: inset(0);
  color: var(--bone);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: 18px;
  /* sRGB fallback */
  background: radial-gradient(70% 100% at 80% 20%, var(--court-2), var(--ink-2) 100%);
  /* OKLCH for richer interpolation in modern browsers */
  background: radial-gradient(
    ellipse 70% 100% at 80% 20%,
    oklch(0.32 0.08 250),
    oklch(0.18 0.06 250) 100%
  );
}

/* Hero background image — full-bleed, anchored to the top edge of the hero.
   inset:0 means the image rectangle aligns with .hero exactly, so cover-crop
   doesn't eat into the top of the image. background-position: center top
   keeps the players' heads visible — they sit in the top ~10% of the source
   image and were getting cropped when the rectangle extended above .hero
   for parallax slack. We lose the image parallax in exchange, but the
   title and right column still parallax (depth is preserved). */
.hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("hero-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Mobile uses a portrait-cropped variant of the hero photo so the
   silhouettes aren't lost when the hero stacks vertically. */
@media (max-width: 880px) {
  .hero::before { background-image: url("hero-bg-mobile.jpg"); }
}

/* Desktop: keep the cream layer underneath the image (so the .hero base
   is cream rather than the OKLCH navy), but let the image cover it.
   Image returns to the default -25% inset so it fills the hero edge-to-
   edge, and the LIVE bar text stays cream/white in front of the image. */
@media (min-width: 881px) {
  .hero { background: var(--bone); }
}

/* Asymmetric darkening overlay tuned to the basketball image:
   - Left half darker (where the title sits over the orange burst)
   - Centre stays clear so the silhouettes read
   - Strong bottom fade for the ticker
   - Subtle top fade so the LIVE bar reads on the orange splatter */
.hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* horizontal: darker on left where the title sits */
    linear-gradient(90deg,
      rgba(8, 17, 31, 0.55) 0%,
      rgba(8, 17, 31, 0.15) 45%,
      rgba(8, 17, 31, 0.10) 60%,
      rgba(8, 17, 31, 0.35) 100%),
    /* vertical: subtle top fade, strong bottom fade for the ticker */
    linear-gradient(180deg,
      rgba(8, 17, 31, 0.25) 0%,
      rgba(8, 17, 31, 0.05) 18%,
      transparent 50%,
      rgba(8, 17, 31, 0.55) 100%);
}

/* Top bar — LIVE indicator + edition */
.hero-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 0 var(--gutter);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.78);
  position: relative; z-index: 2;
}
.hero-bar-left { display: flex; flex-direction: column; gap: 4px; }
.hero-live { display: inline-flex; align-items: center; gap: 10px; }
.hero-deadline {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.6);
}
.hero-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff2a3b;
  box-shadow: 0 0 0 0 rgba(255, 42, 59, 0.6);
  animation: hero-blink 1.2s ease-in-out infinite;
}
@keyframes hero-blink {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0   rgba(255, 42, 59, 0.6); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 8px rgba(255, 42, 59, 0);   }
}

/* Main stage: title + countdown */
.hero-stage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 880px) {
  /* The flex column + child reorder live in the "Mobile hero polish" block
     further down so the display:contents override beats the default
     .hero-side { display: flex } in source order. */
  .hero-stage { grid-template-columns: 1fr; }
}

.hero-title {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: clamp(64px, 9vw, 160px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
  /* Soft drop-shadow so the stencil edges stay crisp over the
     bright orange/blue splatter areas of the background image */
  text-shadow:
    0 2px 24px rgba(8, 17, 31, 0.55),
    0 1px 3px  rgba(8, 17, 31, 0.40);
}
.hero-sub,
.hero-bar {
  text-shadow: 0 1px 6px rgba(8, 17, 31, 0.45);
}
.hero-title-kicker,
.hero-title-edition {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: 0.2em;
  letter-spacing: 0.08em;
  color: var(--flame);
}
.hero-title-kicker  { margin-bottom: clamp(10px, 1.4vw, 18px); }
.hero-title-edition { margin-top:    clamp(10px, 1.4vw, 18px); }
.hero-title-main    { display: block; color: var(--bone); }

/* Title block parallax — JS writes --title-y so the headline drifts UP as
   the user scrolls down while the background drifts DOWN, creating
   foreground/background depth separation. */
.hero-meta {
  transform: translate3d(0, var(--title-y, 0px), 0);
  will-change: transform;
}

.hero-sub {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.7);
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 239, 230, 0.18);
  max-width: 48ch;
}
/* Keep the venue name unbroken across one line, even when the
   sub-line wraps; the day-of-week sits before it and may wrap above. */
.hero-sub-venue { white-space: nowrap; }

.hero-cta {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 24px;
  background: var(--flame); color: var(--ink);
  font-family: var(--f-stencil); font-weight: 900;
  font-size: 22px; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 26px 12px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.hero-cta:hover  { background: var(--bone); color: var(--ink); }
.hero-cta:active { transform: translateY(1px); }

/* Right column: dominant date stacked above the countdown widget. */
.hero-side {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 28px);
}

.hero-date {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-transform: uppercase;
  text-shadow:
    0 2px 24px rgba(8, 17, 31, 0.55),
    0 1px 3px  rgba(8, 17, 31, 0.40);
}
.hero-date-day { color: var(--flame); }

/* Countdown widget — demoted: smaller padding, white numerals. */
.hero-countdown {
  background: rgba(8, 17, 31, 0.55);
  border: 1px solid rgba(244, 239, 230, 0.14);
  padding: clamp(14px, 1.8vw, 22px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-countdown-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.5);
  margin-bottom: 12px;
}
.hero-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hero-clock-cell { text-align: center; }
.hero-clock-num {
  display: block;
  font-family: var(--f-stencil); font-weight: 900;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.hero-clock-cap {
  display: block;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
  margin-top: 6px;
}

/* Scrolling ticker */
.hero-ticker {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(244, 239, 230, 0.18);
  background: rgba(8, 17, 31, 0.6);
  overflow: hidden;
  height: 52px;
  display: flex; align-items: center;
}
.hero-ticker-track {
  display: flex; gap: 64px;
  white-space: nowrap;
  animation: hero-marquee 26s linear infinite;
  padding-left: 64px;
}
.hero-ticker-item {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: 24px; letter-spacing: 0.06em;
  color: var(--bone);
}
.hero-ticker-item.dim { color: rgba(244, 239, 230, 0.4); }
@keyframes hero-marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Mobile hero polish ---------- */
@media (max-width: 880px) {
  /* Flatten the two-column layout into a single flex column and reorder
     children so the visual flow is:
       title → sub (venue) → big date → CTA → countdown
     instead of the desktop column order where the CTA sits between the
     title and the date. display:contents on .hero-meta / .hero-side
     "unwraps" their children so we can put each element in any order. */
  .hero-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px var(--gutter) 36px;
  }
  .hero-meta, .hero-side { display: contents; }
  .hero-title     { order: 1; margin: 0; }
  .hero-sub       { order: 2; }
  .hero-date      { order: 3; }
  .hero-cta       { order: 4; }
  .hero-countdown { order: 5; }

  /* Hero bar: drop the secondary edition tag — the deadline line is the
     only thing that earns its real estate at the top of the hero. */
  .hero-edition { display: none; }
  .hero-bar     { padding-top: 14px; gap: 8px; }
  .hero-bar-left { gap: 2px; }

  /* Title block: drop the redundant "EDITION 2026" line (the big date
     handles the year). Shrink the kicker so it doesn't fight the title. */
  .hero-title-edition { display: none; }
  .hero-title-kicker  { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 8px; }
  .hero-title         { font-size: clamp(58px, 16vw, 96px); line-height: 0.86; }

  /* Sub-line: hide "Samstag · " on mobile (it's just decoration once the
     big date is visible right below) and let the venue wrap naturally. */
  .hero-sub-day   { display: none; }
  .hero-sub-venue { white-space: normal; }
  .hero-sub {
    margin: 0;
    padding-top: 12px;
    font-size: 11px;
    letter-spacing: 0.18em;
    max-width: none;
  }

  /* Big date — keep it dominant but trim the desktop scaling. */
  .hero-date { font-size: clamp(54px, 14vw, 88px); margin-top: 4px; }

  /* CTA — full-width feels confident on mobile. */
  .hero-cta {
    justify-content: center;
    align-self: stretch;
    margin-top: 8px;
    font-size: 20px;
  }

  /* Countdown — slimmer; numbers don't need to be huge on a small screen. */
  .hero-countdown { padding: 14px 16px; }
  .hero-countdown-label { margin-bottom: 8px; }
  .hero-clock-num { font-size: clamp(26px, 7vw, 36px); }

  /* display:contents on .hero-meta / .hero-side already nukes their
     parallax transforms — keep that side-effect since the parallax also
     contributes to mobile scroll jitter. */
}

/* Utility classes retained for section headlines */
.t-flame { color: var(--flame); }
.t-bone  { color: var(--bone); }

/* =====================  STATS  ===================== */

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--ink);
  color: var(--bone);
  border-top: 1px solid rgba(244, 239, 230, 0.06);
}
.stats .stat {
  display: flex; align-items: center; gap: 20px;
  padding: clamp(22px, 3vw, 40px) clamp(16px, 2vw, 32px);
  border-right: 1px solid rgba(244, 239, 230, 0.08);
}
.stats .stat:last-child { border-right: none; }
.stat-num {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: clamp(48px, 5vw, 84px); line-height: 0.9;
  color: var(--flame);
}
.stat-cap {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(244, 239, 230, 0.7);
}
@media (max-width: 880px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(2n) { border-right: none; }
  .stats .stat { border-bottom: 1px solid rgba(244, 239, 230, 0.08); }
  .stats .stat:last-child { grid-column: 1 / -1; }
}

/* =====================  SECTIONS  ===================== */

.section {
  position: relative;
  padding: clamp(72px, 9vw, 140px) var(--gutter);
}
.section > * { position: relative; }
.section-court { background: var(--bone); color: var(--ink); }
.section-bone  { background: var(--bone-2); color: var(--ink); }
.section-ink   { background: var(--ink); color: var(--bone); }

.section-head {
  max-width: var(--max); margin: 0 auto clamp(44px, 5vw, 72px);
}
/* Section marker: editorial folio-style, not a chip */
.eyebrow {
  display: block;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
  margin-bottom: 14px;
}
.section-ink .eyebrow { color: var(--bone); opacity: 0.6; }
.h-stencil {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.section-lede {
  max-width: 60ch;
  font-size: clamp(15px, 0.5vw + 13px, 18px);
  margin-top: 24px;
  opacity: 0.85;
}

/* Editorial mid-page rhythm break: Location's H2 dials down a level so the
   scroll cadence isn't metronomic across six identically-scaled section heads. */
#location .h-stencil { font-size: clamp(36px, 5vw, 72px); }

/* =====================  REVEAL + PARALLAX  =====================
   .reveal — invisible until JS adds .is-in (IntersectionObserver).
   .reveal-stagger > * — each child enters with staggered delay.
   .parallax — element with --parallax-rate translated by scroll progress. */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-stagger.is-in > * {
  opacity: 1;
  transform: none;
}
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 0.42s; }

/* Parallax-driven translate. JS writes the per-element --parallax-y. */
.parallax {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* Location SVG draw-on. Each animatable shape uses pathLength="1" in markup
   so stroke-dasharray:1 / dashoffset:1→0 draws every shape uniformly,
   regardless of actual perimeter length. The background grid is excluded. */
#location .court-svg .court-lines > *,
#location .court-svg .court-three > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* 3-point line draws last as the dramatic beat */
#location .court-svg .court-three > * {
  transition-delay: 0.4s;
  transition-duration: 1.6s;
}
#location.is-in .court-svg .court-lines > *,
#location.is-in .court-svg .court-three > * {
  stroke-dashoffset: 0;
}

/* =====================  FORMAT  ===================== */

.format-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.rule {
  padding: clamp(24px, 3vw, 40px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background 0.25s ease;
  position: relative;
}
.rule:hover { background: rgba(8, 17, 31, 0.04); }
.rule:hover .rule-num { color: var(--flame); }
.rule-num { transition: color 0.25s ease; }
.rule-num {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: clamp(40px, 4vw, 68px); line-height: 1;
  color: var(--court); margin-bottom: 16px;
}
.rule h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 0 0 10px;
}
.rule p { font-size: 15px; line-height: 1.55; opacity: 0.78; }

@media (max-width: 880px) {
  .format-grid { grid-template-columns: 1fr; }
}

/* =====================  KATEGORIEN  ===================== */

.kat-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 880px) { .kat-grid { grid-template-columns: 1fr; } }

.kat-card {
  background: var(--bone);
  border: 1px solid var(--line);
  padding: clamp(22px, 2.4vw, 32px);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kat-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(8, 17, 31, 0.35); }
.kat-card.featured {
  background: var(--ink); color: var(--bone); border-color: var(--ink);
}
.kat-card.featured .kat-tag { background: var(--flame); color: var(--ink); }
.kat-card.featured .kat-year { color: rgba(244, 239, 230, 0.65); }

.kat-card header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 22px;
}
.kat-tag {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: 22px; letter-spacing: 0.02em;
  background: var(--ink); color: var(--bone);
  padding: 6px 12px 4px;
  line-height: 1;
}
.kat-year {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.7;
}
.kat-card h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 10px;
}
.kat-card p { font-size: 15px; line-height: 1.55; opacity: 0.82; }
.kat-foot {
  max-width: var(--max); margin: 32px auto 0;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.65;
}

/* =====================  LOCATION  ===================== */

.loc-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) { .loc-grid { grid-template-columns: 1fr; } }

.loc-text h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px); letter-spacing: 0.02em;
  text-transform: uppercase; margin: 0 0 6px;
}
.loc-sub {
  font-family: var(--f-mono); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 28px;
}
.loc-points { list-style: none; padding: 0; margin: 0 0 32px; }
.loc-points li {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.bullet {
  flex-shrink: 0; width: 10px; height: 10px;
  margin-top: 7px; background: var(--flame);
  transform: rotate(45deg);
}

.loc-visual {
  display: flex; justify-content: center;
  color: var(--court);
}
.court-svg { max-width: 480px; width: 100%; }

/* =====================  ANMELDUNG  ===================== */

/* Important-info notices above the form */
.signup-notices {
  list-style: none; padding: 0; margin: 0 auto clamp(28px, 3vw, 44px);
  max-width: 1040px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (max-width: 720px) {
  .signup-notices { grid-template-columns: 1fr; }
}
.signup-notices li {
  padding: clamp(20px, 2.2vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.signup-notice-eyebrow {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--flame);
}
.signup-notices p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.86;
}
.signup-notices strong { color: var(--ink); opacity: 1; font-weight: 600; }

.form {
  max-width: 1040px; margin: 0 auto;
  background: var(--bone);
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 52px);
  position: relative;
}

.form-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.form-section:last-of-type { border-bottom: none; }
.form-h {
  font-family: var(--f-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 22px; color: var(--court);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.lbl {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--court); display: inline-block;
}
.lbl em { font-style: normal; opacity: 0.55; text-transform: none; letter-spacing: 0.05em; }

.field input,
.field select,
.field textarea {
  font-family: var(--f-sans); font-size: 15.5px; color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bone);
  border-radius: 0;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.18);
  background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(8, 17, 31, 0.35); }

.hint {
  font-size: 13px; opacity: 0.7; margin: -8px 0 14px;
}

/* Category picker */
.cat-picker { border: none; padding: 0; margin: 24px 0 4px; }
.cat-picker legend { padding: 0; margin-bottom: 8px; }
.cat-radios {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-top: 4px;
}
@media (max-width: 720px) { .cat-radios { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) {
  /* On phones the "Jg. 2005 & älter" labels are too long for 3 narrow
     cells — drop to 2 columns and let the year text wrap if it must. */
  .cat-radios { grid-template-columns: repeat(2, 1fr); }
  .cat-radio-year { white-space: normal; line-height: 1.25; }
}
.cat-radios label {
  position: relative;
  cursor: pointer;
}
.cat-radios input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.cat-radios span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  font-family: var(--f-stencil); font-weight: 900;
  font-size: 19px; letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.18s ease;
  background: var(--bone);
}
.cat-radio-year {
  display: block;
  font-family: var(--f-mono); font-weight: 400;
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--steel);
  opacity: 0.85;
  white-space: nowrap;
}
.cat-radios input:checked + span .cat-radio-year {
  color: rgba(244, 239, 230, 0.7);
}
.cat-radios label:hover span { border-color: var(--ink); }
.cat-radios input:checked + span {
  background: var(--ink); color: var(--bone); border-color: var(--ink);
}
.cat-radios input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.35);
}

.cat-feedback {
  min-height: 22px;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--flame);
  margin-top: 14px;
}

/* Player rows */
.player-list { display: flex; flex-direction: column; gap: 12px; }
.player-row {
  display: grid; grid-template-columns: 40px 1.4fr 0.7fr 0.9fr auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.4);
}
@media (max-width: 720px) {
  /* On phones: big number anchors the row on the left, all fields stack
     in the right column with full width. Fixes the squished Geschlecht
     select that was getting forced into the 40px number column. */
  .player-row {
    grid-template-columns: 48px 1fr;
    row-gap: 14px;
    column-gap: 14px;
    align-items: start;
  }
  .player-row .player-num {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    font-size: 36px;
  }
  .player-row .field { grid-column: 2; }
  .player-row .field-remove {
    grid-column: 2;
    justify-self: end;
  }
}
.player-row .player-num {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: 32px; color: var(--flame); line-height: 1;
  align-self: center;
}
.player-row .field input,
.player-row .field select {
  padding: 9px 12px; font-size: 14.5px;
}
.player-row .opt-tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel); margin-left: 6px;
}
.remove-btn {
  background: transparent; border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 8px 12px; cursor: pointer;
  color: var(--ink); transition: all 0.15s ease;
}
.remove-btn:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.remove-btn[hidden] { display: none; }

.add-player {
  margin-top: 8px;
  background: transparent;
  border: 1.5px dashed var(--line);
  color: var(--court);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.add-player:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); border-style: solid; }
.add-player[hidden] { display: none; }

.checkbox {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px;
  font-size: 14px; line-height: 1.5; cursor: pointer;
}
.checkbox input {
  margin-top: 3px; width: 18px; height: 18px;
  accent-color: var(--flame);
}

.form-footer {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
}
.form-note {
  font-size: 13px; opacity: 0.7; max-width: 48ch; margin: 0;
}
.form-note a { color: var(--flame); border-bottom: 1px solid currentColor; }

/* Validation states */
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: rgba(229, 74, 0, 0.5);
}
.error-msg {
  margin-top: 12px; padding: 10px 14px;
  background: rgba(229, 74, 0, 0.08);
  border: 1px solid rgba(229, 74, 0, 0.4);
  color: var(--ember);
  font-size: 14px;
}
.error-msg[hidden] { display: none; }

/* Success dialog */
.success-dialog {
  border: none; padding: 0;
  max-width: 480px; width: calc(100% - 32px);
  background: var(--bone); color: var(--ink);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.6);
}
.success-dialog::backdrop {
  background: rgba(8, 17, 31, 0.7); backdrop-filter: blur(6px);
}
.success-dialog[open] {
  padding: 32px;
}
.success-dialog h3 {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: 36px; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 12px; color: var(--flame);
}
.success-dialog p { font-size: 15px; margin-bottom: 22px; }

/* =====================  SPONSOREN  ===================== */

.sponsors {
  max-width: var(--max); margin: 0 auto;
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sponsors li {
  padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  transition: background 0.2s ease;
}
.sponsors li:hover { background: rgba(255, 107, 26, 0.06); }
/* Placeholder tiles — visibly "to be filled in" with a dashed feel and dimmed
   name so they don't read as a real sponsor named "Sponsor folgt". */
.sponsors li.sp-placeholder {
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-right-color: rgba(8, 17, 31, 0.25);
  border-bottom-color: rgba(8, 17, 31, 0.25);
  background: rgba(255, 255, 255, 0.35);
}
.sponsors li.sp-placeholder:hover { background: rgba(255, 255, 255, 0.55); }
.sponsors li.sp-placeholder .sp-name {
  color: rgba(8, 17, 31, 0.45);
  font-style: italic;
}
.sponsors li.sp-placeholder .sp-role { color: var(--flame); opacity: 0.8; }
.sp-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink);
}
.sp-role {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.65;
}
@media (max-width: 880px) {
  .sponsors { grid-template-columns: repeat(2, 1fr); }
}
.sp-foot {
  max-width: var(--max); margin: 28px auto 0;
  font-size: 14px; opacity: 0.7;
}
.sp-foot a { color: var(--flame); border-bottom: 1px solid currentColor; }

/* =====================  FOOTER  ===================== */

.foot {
  background: var(--ink); color: var(--bone);
  padding: clamp(56px, 6vw, 88px) var(--gutter) 36px;
}
.foot-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(244, 239, 230, 0.1);
}
@media (max-width: 720px) {
  /* Single-column on phones so the Otmar lockup has room to breathe and
     Kontakt/Reglement/Folge uns don't compete in narrow 50% cells. */
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .foot-presented {
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(244, 239, 230, 0.1);
  }
}
.foot-grid > div { display: flex; flex-direction: column; gap: 8px; }
.foot-brand {
  font-family: var(--f-stencil); font-weight: 900;
  font-size: 32px; color: var(--flame); margin-bottom: 8px;
}

.foot-club {
  display: flex; align-items: center; gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 239, 230, 0.12);
}
.foot-club-logo {
  width: 56px; height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
.foot-club > div { display: flex; flex-direction: column; gap: 2px; }
.foot-club-kicker {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.55);
}
.foot-club-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: 17px; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--otmar);
  margin-top: 1px;
}
.foot-club-link {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 230, 0.7);
  margin-top: 4px;
}
.foot-club-link:hover { color: var(--flame); }
.foot-label {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.5); margin-bottom: 6px;
}
.foot a {
  color: var(--bone); opacity: 0.78;
  transition: color 0.18s ease, opacity 0.18s ease;
}
.foot a:hover { color: var(--flame); opacity: 1; }

.foot-social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.foot-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.foot-base {
  max-width: var(--max); margin: 24px auto 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.5);
}

/* Build credit — meta-line below the copyright row. Hairline-separated,
   dimmer than .foot-base so it reads as a quiet attribution, not a peer. */
.foot-credit {
  max-width: var(--max); margin: 16px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 239, 230, 0.1);
  text-align: center;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 239, 230, 0.38);
}

/* =====================  MOTION  ===================== */

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance — fires on page load since it's in viewport */
  .hero-title, .hero-sub, .hero-cta, .hero-date, .hero-countdown {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-sub       { animation-delay: 0.08s; }
  .hero-date      { animation-delay: 0.12s; }
  .hero-cta       { animation-delay: 0.16s; }
  .hero-countdown { animation-delay: 0.24s; }
  /* .stats stagger is now scroll-triggered via .reveal-stagger + JS observer */
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}