/* =====================================================================
   Scroll-Animationen (js/motion.js)
   Tempo: Dauern/Verzoegerungen 1,8x gegenueber dem ersten Entwurf (Wunsch: ruhiger).
   Alle Zustaende werden erst per JavaScript gesetzt (Klassen mo-*): ohne JS oder bei
   "Bewegung reduzieren" bleibt alles sofort sichtbar. Nur transform/opacity/clip-path,
   damit es auch auf dem Handy ruckelfrei bleibt. Jede Animation laeuft einmal beim Erscheinen.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- 1 Fortschrittsbalken im Trikotsaum (oben, fuellt sich mit dem Scrollweg) ---- */
  .mo-progress { position: fixed; left: 0; top: 0; z-index: 2000; width: 100%; height: 4px; pointer-events: none;
    clip-path: inset(0 100% 0 0); opacity: .95;   /* wird von links aufgedeckt, der Verlauf bleibt stehen */
    /* Verlauf ueber die ganze Breite: Blau -> Polish-Weiss -> Rot (sichtbarer Anteil waechst mit dem Scrollweg) */
    background: linear-gradient(90deg, #0616a8 0%, #0a1cd6 22%, #FCFBF9 48%, #EFEDE8 52%, #f82818 78%, #cc1d0a 100%);
    box-shadow: 0 1px 6px rgba(4, 8, 40, .4); }

  /* ---- 2 Tabellen- und Spielplanzeilen: der Reihe nach von links ---- */
  .mo-row { opacity: 0; transform: translateX(-22px); transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--mo-i, 0) * 82ms); }
  .mo-row.mo-in { opacity: 1; transform: none; }
  /* eigene Mannschaft: einmal blau-rot aufleuchten, sobald die Zeile da ist */
  .mo-row.mo-in:is(.is-ours, .sg) td { animation: mo-pulse 2.55s ease-out calc(var(--mo-i, 0) * 82ms + 0.55s) 1; }
  @keyframes mo-pulse { 0% { box-shadow: inset 0 0 0 0 rgba(248, 40, 24, 0); } 30% { box-shadow: inset 0 -3px 0 0 #f82818, inset 0 0 40px rgba(10, 28, 214, .55); } 100% { box-shadow: inset 0 0 0 0 rgba(248, 40, 24, 0); } }

  /* ---- 3 Logos im Spielplan: Heim von links, Gast von rechts, Mitte platzt auf ---- */
  .mo-row td.pairing .club:first-child { transform: translateX(-28px); opacity: 0; transition: transform 1.09s cubic-bezier(.22, 1, .36, 1) 0.22s, opacity 0.91s 0.22s; }
  .mo-row td.pairing .club:last-child { transform: translateX(28px); opacity: 0; transition: transform 1.09s cubic-bezier(.22, 1, .36, 1) 0.22s, opacity 0.91s 0.22s; }
  .mo-row td.pairing :is(.vs, .score, .score-leer) { transform: scale(.4); opacity: 0; transition: transform 0.82s cubic-bezier(.34, 1.56, .64, 1) 0.59s, opacity 0.55s 0.59s; display: inline-block; }
  .mo-row.mo-in td.pairing .club:first-child, .mo-row.mo-in td.pairing .club:last-child,
  .mo-row.mo-in td.pairing :is(.vs, .score, .score-leer) { transform: none; opacity: 1; }

  /* ---- 4 Partner-Logos: nacheinander statt alle auf einmal ---- */
  .mo-bar .pb-set.is-on a, .mo-bar .marquee .track img { opacity: 0; transform: translateY(10px); transition: opacity 0.82s ease, transform 0.82s cubic-bezier(.22, 1, .36, 1); }
  .mo-bar.mo-in .pb-set.is-on a { opacity: 1; transform: none; }
  .mo-bar.mo-in .pb-set.is-on a:nth-child(1) { transition-delay: 0ms; } .mo-bar.mo-in .pb-set.is-on a:nth-child(2) { transition-delay: 146ms; }
  .mo-bar.mo-in .pb-set.is-on a:nth-child(3) { transition-delay: 291ms; } .mo-bar.mo-in .pb-set.is-on a:nth-child(4) { transition-delay: 437ms; }
  .mo-bar.mo-in .pb-set.is-on a:nth-child(5) { transition-delay: 582ms; } .mo-bar.mo-in .pb-set.is-on a:nth-child(n+6) { transition-delay: 728ms; }
  .mo-bar.mo-in .marquee .track img { opacity: 1; transform: none; }

  /* ---- 5 Karten im Spieltag-Block: aus der Tiefe nach vorn kippen, gestaffelt ---- */
  .bl-trio.mo-stage { perspective: 1400px; }
  .mo-tilt { opacity: 0; transform: rotateX(9deg) translateY(26px); transform-origin: 50% 100%;
    transition: opacity 1.27s ease, transform 1.46s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--mo-i, 0) * 255ms); }
  .mo-tilt.mo-in { opacity: 1; transform: none; }

  /* ---- 6 Mediathek-Fotos: schraeg aufdecken (25-Grad-Achse wie die Hintergrundkarten) ---- */
  .mo-wipe { clip-path: polygon(0 0, 0 0, -40% 100%, -40% 100%); transition: clip-path 1.37s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--mo-i, 0) * 109ms); }
  .mo-wipe.mo-in { clip-path: polygon(0 0, 140% 0, 100% 100%, -40% 100%); }

  /* ---- 7 Chronik (Historie): Punkte springen auf, Aufstiege pulsieren rot ---- */
  .hi-step.mo-step { opacity: 0; transform: translateX(-18px); transition: opacity 0.91s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
  .hi-step.mo-step::before { transform: scale(0); transition: transform 0.73s cubic-bezier(.34, 1.56, .64, 1) 0.45s; }
  .hi-step.mo-step.mo-in { opacity: 1; transform: none; }
  .hi-step.mo-step.mo-in::before { transform: scale(1); }
  .hi-step.mo-step.mo-in.is-up::before { animation: mo-ring 2.18s ease-out 0.91s 1; }
  @keyframes mo-ring { 0% { box-shadow: 0 0 0 4px #0616a8, 0 0 0 6px rgba(255, 255, 255, .35), 0 0 0 6px rgba(248, 40, 24, .9); }
    100% { box-shadow: 0 0 0 4px #0616a8, 0 0 0 6px rgba(255, 255, 255, .35), 0 0 0 28px rgba(248, 40, 24, 0); } }

  /* ---- 9 News-Karten: steigen gestaffelt auf, das Bild wird wie ein Vorhang von unten aufgedeckt, Text folgt ----
     Eigene Eigenschaften translate/scale statt transform, damit Hover-Effekte der Karten unberuehrt bleiben. */
  .news-card.mo-news { opacity: 0; translate: 0 34px; scale: .97; overflow: hidden;
    transition: opacity 1s ease, translate 1.25s cubic-bezier(.22, 1, .36, 1), scale 1.25s cubic-bezier(.22, 1, .36, 1), transform .4s ease, box-shadow .4s ease;
    transition-delay: calc(var(--mo-i, 0) * 160ms), calc(var(--mo-i, 0) * 160ms), calc(var(--mo-i, 0) * 160ms), 0s, 0s; }
  .news-card.mo-news.mo-in { opacity: 1; translate: 0 0; scale: 1; }
  /* Bild: ruhiger Vorhang von unten nach oben, dabei leichter Zoom heraus */
  .news-card.mo-news img.nc-img { scale: 1.12; clip-path: inset(100% 0 0 0);
    transition: scale 1.9s cubic-bezier(.22, 1, .36, 1) calc(var(--mo-i, 0) * 160ms + .1s), clip-path 1.3s cubic-bezier(.65, 0, .35, 1) calc(var(--mo-i, 0) * 160ms + .1s), transform .6s ease; }
  .news-card.mo-news.mo-in img.nc-img { scale: 1; clip-path: inset(0 0 0 0); }
  .news-card.mo-news :is(.nc-content > *, .nc-link) { opacity: 0; translate: 0 14px; transition: opacity .8s ease, translate .9s cubic-bezier(.22, 1, .36, 1); }
  .news-card.mo-news.mo-in :is(.nc-content > *, .nc-link) { opacity: 1; translate: 0 0; }
  .mo-news.mo-in .nc-content > :nth-child(1) { transition-delay: calc(var(--mo-i, 0) * 160ms + .55s); }
  .mo-news.mo-in .nc-content > :nth-child(2) { transition-delay: calc(var(--mo-i, 0) * 160ms + .68s); }
  .news-card.mo-news.mo-in :is(.nc-content > :nth-child(n+3), .nc-link) { transition-delay: calc(var(--mo-i, 0) * 160ms + .8s); }

  /* ---- 10 Videos: kommen aus der Tiefe nach vorn, der Play-Knopf pulsiert einmal ---- */
  .mo-vid { opacity: 0; scale: .9; translate: 0 22px; filter: blur(6px);
    transition: opacity 1s ease, scale 1.3s cubic-bezier(.22, 1, .36, 1), translate 1.3s cubic-bezier(.22, 1, .36, 1), filter 1s ease;
    transition-delay: calc(var(--mo-i, 0) * 120ms); }
  .mo-vid.mo-in { opacity: 1; scale: 1; translate: 0 0; filter: none; }
  .mo-vid.mo-in .vid-play { animation: mo-play 1.4s ease-out calc(var(--mo-i, 0) * 120ms + .8s) 1; }
  @keyframes mo-play { 0% { box-shadow: 0 0 0 0 rgba(248, 40, 24, .75); } 100% { box-shadow: 0 0 0 22px rgba(248, 40, 24, 0); } }

  /* ---- 11 Spieltagskarten der Mediathek: wie Karten ausgeteilt (leicht gedreht, fallen gerade) ---- */
  .mo-deal { opacity: 0; translate: 0 40px; rotate: -4deg; scale: .94; transform-origin: 50% 100%;
    transition: opacity .9s ease, translate 1.2s cubic-bezier(.22, 1.2, .36, 1), rotate 1.2s cubic-bezier(.22, 1.2, .36, 1), scale 1.2s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--mo-i, 0) * 140ms); }
  .mo-deal:nth-child(even) { rotate: 4deg; }
  .mo-deal.mo-in { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }

  /* ---- 12 Album-Kopf der Mediathek: Linie zeichnet sich, Titel gleitet herein ---- */
  .mo-head { opacity: 0; translate: -20px 0; transition: opacity .9s ease, translate 1s cubic-bezier(.22, 1, .36, 1); }
  .mo-head.mo-in { opacity: 1; translate: 0 0; }

  /* ---- 8 Scroll-gekoppelt (nur Browser mit animation-timeline; sonst statisch) ---- */
  @supports (animation-timeline: view()) {
    /* Hintergrundwort im Abschnittskopf wandert langsamer als der Inhalt und schiebt sich seitlich */
    .mo-ghost-on .dsn-card .nb-fx .fx2[data-ghost] { animation: mo-ghost linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes mo-ghost { from { translate: 6% 10%; } to { translate: -6% -10%; } }
    /* Fanshop-Banner: Bild bewegt sich minimal langsamer als die blaue Flaeche */
    .mo-ghost-on .fv-b-img img { animation: mo-para linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes mo-para { from { translate: 0 5%; } to { translate: 0 -5%; } }
    /* Chronik-Linie zeichnet sich beim Scrollen von oben nach unten */
    .mo-ghost-on .hi-timeline::before { transform-origin: 50% 0; animation: mo-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 70%; }
    @keyframes mo-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* Handy (bis 767 px), Wunsch 04.11.2026: kein waagerechter Balken oben, stattdessen ein senkrechter Scroll-Balken
   am rechten Rand im selben Verlauf (Blau, Polish-Weiss, Rot). js/motion.js deckt ihn von oben nach unten auf. */
@media (max-width: 767.98px) {
  html body:not(#sb1):not(#sb2):not(#sb3):not(#sb4) .mo-progress {
    display: block !important; left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 4px !important; height: 100vh !important; height: 100dvh !important;
    background: linear-gradient(180deg, #0616a8 0%, #0a1cd6 22%, #FCFBF9 48%, #EFEDE8 52%, #f82818 78%, #cc1d0a 100%) !important;
    box-shadow: -1px 0 6px rgba(4, 8, 40, .4) !important; z-index: 2000 !important; }
}