/* ==========================================================================
   FC Region Goms - styles.css
   Alles, was Tailwind-Utilities nicht sauber abdecken: Farb-Tokens, die
   Hero-/Header-Kollaps-Animation (scroll-driven) und die Deko-Cut-outs.
   ========================================================================== */

/* --- Farb-Tokens (identisch zur Tailwind-Config in index.html) ----------- */
:root {
  --dark-blue: #323545;
  --grey: #aaadc0;
  --gold: #e8c46b;
  --red-secondary: #b33331;
  --red-primary: #e54042;

  /* Etwas aufgehelltes Navy: nur dadurch ist die dunkelblaue Fuellung von
     galustock-full.svg auf dem dunkelblauen Hero ueberhaupt sichtbar. */
  --hero-glow: #474c66;

  /* Hoehe der kompakten Sticky-Bar - auch fuer scroll-padding der Anker. */
  --bar-h: 4rem;

  /* Scrollstrecke, ueber die der Hero kollabiert. */
  --collapse: 78svh;
}

html {
  scroll-behavior: smooth;
  /* Anker nicht unter die Sticky-Bar rutschen lassen. */
  scroll-padding-top: var(--bar-h);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: #ffffff;
  color: var(--dark-blue);
  -webkit-font-smoothing: antialiased;
}

/* --- Fokus: ueberall sichtbar, auf hell und auf dunkel ------------------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  background: var(--gold);
  color: var(--dark-blue);
  font-weight: 700;
  border-radius: 0.375rem;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.5rem;
}

/* Der Schriftzug enthaelt weisse Flaechen -> nur auf dunklem Grund. */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
}

#brand .wordmark {
  width: auto;
}

/* ==========================================================================
   1) HERO -> STICKY HEADER

   Die DOM-Reihenfolge ist die statische Grundform und funktioniert ohne CSS-
   Tricks und ohne JS:   <section #hero (100svh)>   dann   <header #topbar
   (position: sticky)>.  Der Header klebt automatisch oben, sobald der Hero
   weggescrollt ist - genau das gewuenschte Verhalten fuer reduced-motion.
   Die Kollaps-Animation legt sich rein additiv darueber und bewegt
   ausschliesslich transform + opacity.
   ========================================================================== */

#hero {
  position: relative;
  height: 100svh;
  min-height: 30rem;
  background-color: var(--dark-blue);
  background-image: radial-gradient(
    120% 85% at 50% 42%,
    var(--hero-glow) 0%,
    var(--dark-blue) 62%
  );
  overflow: hidden;
  isolation: isolate;
}

/* Bewegter Block: Berg + Schriftzug. Mittig, schrumpft beim Scrollen. */
#hero-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: clamp(1rem, 4vw, 2.25rem);
  padding-inline: clamp(1.25rem, 6vw, 4rem);
  padding-bottom: 2rem;
  will-change: transform, opacity;
  transform-origin: 50% 24%;
}

/* Berg: zwei SVGs exakt uebereinander -> Crossfade leer => gefuellt. */
#hero-mountain {
  position: relative;
  width: min(78vw, 34rem);
  margin-inline: auto;
  aspect-ratio: 986.49 / 410.98;
}

#hero-mountain img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#mountain-full {
  opacity: 0;
  will-change: opacity;
}

#hero-wordmark {
  width: min(82vw, 31rem);
  margin-inline: auto;
}

#hero-scrollhint {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  will-change: transform, opacity;
}

/* Ball im Scroll-Hinweis: liegt 1 s ruhig, huepft dann kurz und wiederholt
   das alle 3 s. Eigene Elemente, damit sich die Animation nicht mit dem
   Ausblenden beim Scrollen (transform auf #hero-scrollhint) beisst. */
.hint-ball {
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transform-origin: 50% 100%;
  animation: ball-hop 3s 1s infinite both;
}

.hint-ball img {
  display: block;
  width: 100%;
  height: 100%;
  animation: ball-spin 3s 1s infinite both;
}

/* Licht von oben links - liegt ueber dem Bild und dreht bewusst nicht mit,
   sonst wandert das Glanzlicht mit dem Muster um den Ball. */
.hint-ball::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    rgb(255 255 255 / 0.55) 0,
    rgb(255 255 255 / 0) 22%,
    rgb(0 0 0 / 0) 50%,
    rgb(20 22 35 / 0.5) 100%
  );
  pointer-events: none;
}

.hint-shadow {
  width: 1.5rem;
  height: 0.25rem;
  margin-top: 0.0625rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  animation: ball-shadow 3s 1s infinite both;
}

@keyframes ball-hop {
  0%        { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  5%        { transform: translateY(0) scale(1.12, 0.86); animation-timing-function: ease-out; }
  17%       { transform: translateY(-16px) scale(0.95, 1.05); animation-timing-function: ease-in; }
  29%       { transform: translateY(0) scale(1.12, 0.86); animation-timing-function: ease-out; }
  36%       { transform: translateY(-5px) scale(1, 1); animation-timing-function: ease-in; }
  42%       { transform: translateY(0) scale(1.04, 0.96); animation-timing-function: ease-out; }
  46%, 100% { transform: translateY(0) scale(1, 1); }
}

/* 144deg = zwei Fuenftel-Drehungen: das Muster ist 5-fach symmetrisch,
   der Sprung zurueck auf 0deg ist daher unsichtbar. */
@keyframes ball-spin {
  0%, 5%    { transform: rotate(0deg); animation-timing-function: ease-out; }
  46%, 100% { transform: rotate(144deg); }
}

@keyframes ball-shadow {
  0%        { transform: scaleX(1); opacity: 1; animation-timing-function: ease-out; }
  5%        { transform: scaleX(1.1); opacity: 1; animation-timing-function: ease-out; }
  17%       { transform: scaleX(0.55); opacity: 0.4; animation-timing-function: ease-in; }
  29%       { transform: scaleX(1.1); opacity: 1; animation-timing-function: ease-out; }
  36%       { transform: scaleX(0.85); opacity: 0.8; animation-timing-function: ease-in; }
  42%, 100% { transform: scaleX(1); opacity: 1; }
}

/* --- Die kompakte Sticky-Bar -------------------------------------------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--dark-blue);
  box-shadow: 0 1px 0 0 rgb(232 196 107 / 0.35);
}

#topbar-inner {
  min-height: var(--bar-h);
  will-change: transform, opacity;
}

/* ==========================================================================
   Scroll-driven animations. Nur dort aktiv, wo animation-timeline existiert.
   Ueberall sonst uebernimmt der JS-Fallback in main.js exakt die gleichen
   Transform-/Opacity-Werte.
   ========================================================================== */
@keyframes hero-art-collapse {
  to {
    transform: translate3d(0, -14svh, 0) scale(0.42);
    opacity: 0;
  }
}

@keyframes mountain-fill {
  to {
    opacity: 1;
  }
}

@keyframes hint-out {
  to {
    transform: translate3d(0, 1.25rem, 0);
    opacity: 0;
  }
}

@keyframes bar-in {
  from {
    transform: translate3d(0, -0.5rem, 0);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    #hero-art,
    #mountain-full,
    #hero-scrollhint,
    #topbar-inner {
      animation-duration: 1ms; /* Platzhalter - gesteuert wird von der Timeline. */
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    #hero-art {
      animation-name: hero-art-collapse;
      animation-range: 0 var(--collapse);
    }

    #mountain-full {
      animation-name: mountain-fill;
      animation-range: 0 calc(var(--collapse) * 0.72);
    }

    #hero-scrollhint {
      animation-name: hint-out;
      animation-range: 0 12svh;
    }

    #topbar-inner {
      animation-name: bar-in;
      animation-range: calc(var(--collapse) * 0.45) calc(var(--collapse) * 0.95);
    }
  }
}

/* JS-Fallback: main.js setzt die Werte per requestAnimationFrame direkt am
   Style-Attribut. Startzustand hier, damit im ersten Frame nichts springt. */
html.js-collapse-fallback #topbar-inner {
  opacity: 0;
  transform: translate3d(0, -0.5rem, 0);
}

/* prefers-reduced-motion: keinerlei Scroll-Animation. Der Hero steht ruhig
   ueber einem normalen, statischen Header; der Berg ist direkt gefuellt. */
@media (prefers-reduced-motion: reduce) {
  #hero-art,
  #mountain-full,
  #hero-scrollhint,
  #topbar-inner {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  #hero-scrollhint {
    display: none;
  }
}

/* ==========================================================================
   Typografie-Ausnahme: "Sedgwick Ave Display" ausschliesslich fuer Spitzname +
   Nummer. Bewusst genau eine Klasse, damit die Schrift nirgends sonst
   auftaucht.
   ========================================================================== */
.nickname {
  font-family: "Sedgwick Ave Display", system-ui, cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--red-primary);
}

.match-win {
  position: absolute;
  left: 66%;
  top: 50%;
  z-index: 1;
  font-size: clamp(1.8rem, 7vw, 3rem);
  line-height: 1;
  white-space: nowrap;
  rotate: -8deg;
  translate: -50% -50%;
  pointer-events: none;
  text-shadow: 0 2px 3px rgb(18 20 28 / 0.22);
}

/* ==========================================================================
   Spielerkachel (1. Mannschaft)
   Spitzname liegt als schraeger Tag IM Bild und lappt ueber dessen linke
   Kante, die Nummer fuellt unten rechts die Textbox aus. Weil der Tag
   herausragen soll, hat die Karte bewusst KEIN overflow:hidden - die Rundung
   sitzt darum direkt am Bild statt an der Karte.
   ========================================================================== */
.player-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.player-card__media {
  position: relative;
}

/* Dunkler Verlauf oben: haelt den roten Spitznamen auch auf hellen
   Portraits lesbar. */
.player-card__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  border-radius: 0.75rem 0.75rem 0 0;
  background: linear-gradient(to bottom, rgb(18 20 28 / 0.5), rgb(18 20 28 / 0.18) 55%, transparent);
  pointer-events: none;
}

.player-card__captain {
  position: absolute;
  left: 1.5rem;
  top: 3.3rem;
  z-index: 2;
  color: white;
  font-size: 0.9rem;
  line-height: 1;
  rotate: -8deg;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 3px rgb(15 17 24 / 0.75);
}

.player-card__captain--standalone {
  top: 1rem;
}

.player-card__nick {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  rotate: -8deg;
  font-size: 2.8rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    0 2px 3px rgb(15 17 24 / 0.75),
    0 0 1.1em rgb(15 17 24 / 0.6);
  transition: rotate 0.18s ease, scale 0.18s ease;
}

.player-card__info {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 0.45rem;
  padding: 0.4rem 0.65rem 0.45rem;
}

/* Roter Schimmer in der Ecke, damit die Nummer nicht im Nichts haengt. */
.player-card__info::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 60%;
  border-radius: 0 0 0.75rem 0;
  background: radial-gradient(115% 115% at 100% 100%, rgb(229 64 66 / 0.18), transparent 70%);
  pointer-events: none;
}

.player-card__ident {
  min-width: 0;
}

.player-card__number {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: -0.15rem;
  font-size: 3.2rem;
  line-height: 0.7;
  rotate: -5deg;
  transition: rotate 0.18s ease;
}

/* Nummer an der KARTEN-Breite messen, nicht am Viewport: in der 5-spaltigen
   Desktop-Grid ist die Kachel schmaler als bei 2 Spalten auf dem Handy. */
@supports (container-type: inline-size) {
  .player-card {
    container-type: inline-size;
  }

  .player-card__nick {
    font-size: clamp(1.4rem, 20cqw, 2.35rem);
  }

  .player-card__number {
    font-size: clamp(2.4rem, 20cqw, 4.1rem);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Ueber die Nachbarkacheln legen, solange der Tag beim Hover ausschlaegt. */
  .player-card:hover {
    z-index: 3;
  }

  .player-card:hover .player-card__nick {
    rotate: -10deg;
    scale: 1.06;
  }

  .player-card:hover .player-card__number {
    rotate: -8deg;
  }
}

/* ==========================================================================
   Deko: freigestellte Spieler als Rand-Akzente.
   Hinter dem Inhalt, nie klickbar, auf kleinen Viewports ausgeblendet.
   ========================================================================== */
.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  display: block;
  height: clamp(12rem, 42vw, 32rem);
  width: auto;
  opacity: 0.08;
  filter: grayscale(1) contrast(1.05);
}

.decor--dark {
  opacity: 0.12;
}

/* Auf groesseren Viewports duerfen die Randfiguren staerker hervortreten. */
@media (min-width: 768px) {
  .decor {
    display: block;
    height: clamp(13rem, 26vw, 22rem);
    opacity: 0.1;
  }

  .decor--dark {
    opacity: 0.16;
  }
}

.decor--left {
  left: 0;
  bottom: 0;
  display: block;
  translate: -25% 0;
}

.decor--right {
  right: 0;
  bottom: 0;
  translate: 25% 0;
}

.decor--top-right {
  right: 0;
  top: 0;
  translate: 20% -6%;
}

.decor--top-left {
  left: 0;
  top: 0;
  translate: -25% -6%;
}

.decor--middle-left {
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.decor--middle-right {
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

/* ==========================================================================
   Kleinteile
   ========================================================================== */

/* Goldener Trenner unter Sektionstiteln. */
.rule-gold {
  width: 3.5rem;
  height: 0.25rem;
  background-color: var(--gold);
  border-radius: 999px;
}

/* Spielerkarte: Bild darf nicht springen -> fixes Seitenverhaeltnis. */
.player-photo {
  display: block;
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
  background-color: #3b3f52;
  /* Eigene Rundung, weil die Spielerkarte nicht mehr clippt. */
  border-radius: 0.75rem 0.75rem 0 0;
}

.card-hover {
  transition: transform 0.18s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-hover:hover {
    transform: translateY(-3px);
  }
}

/* Tabelle: passt sich der Breite an. Der Scroll bleibt als Notausgang fuer
   sehr schmale Geraete oder extrem lange Teamnamen, wird aber nicht mehr
   erzwungen - frueher sorgte ein min-width von 32rem dafuer, dass auf JEDEM
   Handy seitlich gescrollt werden musste. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Zahlenspalten schmal und nie umbrechend, der Teamname bekommt den Rest. */
.table-scroll th,
.table-scroll td {
  white-space: nowrap;
}

.table-scroll .col-team {
  white-space: normal;
  width: 100%;
  overflow-wrap: anywhere;
}

/* Sponsoren-Platzhalter */
.sponsor-slot {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border: 1px dashed rgb(170 173 192 / 0.7);
  border-radius: 0.75rem;
  color: var(--grey);
  background-color: #ffffff;
  text-align: center;
  padding: 0.75rem;
}

/* Fehlendes Teamfoto: sauberer Platzhalter statt kaputtem Bild. */
.photo-missing {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px dashed rgb(170 173 192 / 0.6);
  border-radius: 0.75rem;
  color: var(--grey);
  background-color: rgb(50 53 69 / 0.04);
  text-align: center;
  padding: 1.5rem;
}

/* Navigation in der Sticky-Bar: passt auf breiten Screens bequem hin und
   wird auf sehr schmalen Geraeten horizontal scrollbar, statt sich unter
   das Logo zu schieben. Scrollbalken ausblenden, Fokusring bleibt sichtbar
   (deshalb py-1.5 am <nav>). */
.nav-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.nav-scroll::-webkit-scrollbar {
  display: none;
}