/* ══════════════════════════════════════════════════════════════════════════
   TH Noir Editorial – GFX & Transitions Erweiterung
   Projekt: TH-Racemanager (Comic-F1-Sim)
   Zweck: Premium Comic-Übergänge, 3D-Karten-Effekte & Staggered Animations
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Comic-Seitenübergang (.comic-wipe-overlay) ─── */

/* Das Haupt-Overlay liegt über allem, fängt Events ab und hat einen schrägen Clip-Path */
.comic-wipe-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  pointer-events: none;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  overflow: hidden;
}

/* Die Wisch-Streifen, die sich nacheinander bewegen */
.comic-wipe-overlay .wipe-stripe {
  grid-area: 1 / 1 / -1 / -1;
  width: 150vw;
  height: 100vh;
  position: relative;
  transform: translateX(-150%) skewX(-20deg);
  transition: none;
}

/* Streifen 1: Der edle Gold-Akzent-Streifen (läuft als Vorbote) */
.comic-wipe-overlay .wipe-stripe-gold {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  z-index: 10;
  box-shadow: 15px 0 50px rgba(0, 0, 0, 0.5);
}

/* Streifen 2: Der massive Midnight-Hauptstreifen (deckt die Sicht ab) */
.comic-wipe-overlay .wipe-stripe-midnight {
  background: var(--bg-gradient, #08090d);
  z-index: 20;
  box-shadow: 20px 0 80px rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Streifen 3: Der edle Glanz-Nachläufer (Gold-Transparenz) */
.comic-wipe-overlay .wipe-stripe-glow {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-fill) 80%, transparent) 0%, color-mix(in srgb, var(--color-accent-fill) 40%, transparent) 100%);
  z-index: 30;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); /* CSS-02: Safari/iOS-Kompatibilität */
}

/* Halbraster-Struktur (Halftone Dot Pattern) auf dem Hauptstreifen */
.comic-wipe-overlay .wipe-halftone {
  position: absolute;
  inset: -100px;
  background-image: 
    radial-gradient(color-mix(in srgb, var(--color-accent-fill) 15%, transparent) 15%, transparent 20%),
    radial-gradient(color-mix(in srgb, var(--color-accent-fill) 15%, transparent) 15%, transparent 20%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 21;
}

/* Speedlines (Diagonale Geschwindigkeitsstreifen im Hintergrund) */
.comic-wipe-overlay .wipe-speedlines {
  position: absolute;
  inset: -200px;
  background: repeating-linear-gradient(115deg,
    transparent,
    transparent 20px,
    color-mix(in srgb, var(--color-accent-fill) 8%, transparent) 20px,
    color-mix(in srgb, var(--color-accent-fill) 8%, transparent) 22px,
    transparent 22px,
    transparent 50px,
    rgba(255, 255, 255, 0.03) 50px,
    rgba(255, 255, 255, 0.03) 58px,
    transparent 58px,
    transparent 90px
  );
  opacity: 0;
  pointer-events: none;
  z-index: 22;
}

/* ─── Comic-Wipe Animationen & Keyframes ─── */

/* 1. Einwischen (Outro): Seite wird verdeckt */
.comic-wipe-overlay.wipe-in-active {
  pointer-events: all;
}
.comic-wipe-overlay.wipe-in-active .wipe-stripe-gold {
  animation: wipe-in-stripe 0.52s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.comic-wipe-overlay.wipe-in-active .wipe-stripe-midnight {
  animation: wipe-in-stripe 0.75s cubic-bezier(0.77, 0, 0.175, 1) 0.08s forwards;
}
.comic-wipe-overlay.wipe-in-active .wipe-stripe-glow {
  animation: wipe-in-stripe 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.15s forwards;
}
.comic-wipe-overlay.wipe-in-active .wipe-halftone {
  animation: fade-in-halftone 0.4s ease 0.2s forwards;
}
.comic-wipe-overlay.wipe-in-active .wipe-speedlines {
  animation: fade-in-overlay 0.4s ease 0.2s forwards;
}

/* 2. Auswischen (Intro): Seite wird wieder freigegeben */
.comic-wipe-overlay.wipe-out-active {
  pointer-events: all;
}
.comic-wipe-overlay.wipe-out-active .wipe-stripe-gold {
  transform: translateX(-10vw) skewX(-20deg);
  animation: wipe-out-stripe 0.55s cubic-bezier(0.77, 0, 0.175, 1) 0.15s forwards;
}
.comic-wipe-overlay.wipe-out-active .wipe-stripe-midnight {
  transform: translateX(-10vw) skewX(-20deg);
  animation: wipe-out-stripe 0.75s cubic-bezier(0.77, 0, 0.175, 1) 0.08s forwards;
}
.comic-wipe-overlay.wipe-out-active .wipe-stripe-glow {
  transform: translateX(-10vw) skewX(-20deg);
  animation: wipe-out-stripe 0.65s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.comic-wipe-overlay.wipe-out-active .wipe-halftone {
  opacity: 0.8;
  animation: fade-out-halftone 0.3s ease forwards;
}
.comic-wipe-overlay.wipe-out-active .wipe-speedlines {
  opacity: 0.8;
  animation: fade-out-overlay 0.3s ease forwards;
}

/* 3. Kompletter Durchlauf (SPA Page Transitions): Zieht einmal komplett durch
   .active ist JS-Alias für .wipe-through-active (main.js switchTab) */
.comic-wipe-overlay.wipe-through-active,
.comic-wipe-overlay.active {
  pointer-events: all;
}
.comic-wipe-overlay.wipe-through-active .wipe-stripe-gold,
.comic-wipe-overlay.active .wipe-stripe-gold {
  animation: wipe-through-stripe 1.05s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.comic-wipe-overlay.wipe-through-active .wipe-stripe-midnight,
.comic-wipe-overlay.active .wipe-stripe-midnight {
  animation: wipe-through-stripe 1.4s cubic-bezier(0.77, 0, 0.175, 1) 0.08s forwards;
}
.comic-wipe-overlay.wipe-through-active .wipe-stripe-glow,
.comic-wipe-overlay.active .wipe-stripe-glow {
  animation: wipe-through-stripe 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.18s forwards;
}
.comic-wipe-overlay.wipe-through-active .wipe-halftone,
.comic-wipe-overlay.active .wipe-halftone {
  animation: wipe-through-details 1.4s ease 0.1s forwards;
}
.comic-wipe-overlay.wipe-through-active .wipe-speedlines,
.comic-wipe-overlay.active .wipe-speedlines {
  animation: wipe-through-details 1.4s ease 0.1s forwards;
}

/* Keyframes für Wisch-Effekte */
@keyframes wipe-in-stripe {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(-20vw) skewX(-20deg); }
}

@keyframes wipe-out-stripe {
  0% { transform: translateX(-20vw) skewX(-20deg); }
  100% { transform: translateX(120vw) skewX(-20deg); }
}

@keyframes wipe-through-stripe {
  0% { transform: translateX(-150%) skewX(-20deg); }
  45%, 55% { transform: translateX(-20vw) skewX(-20deg); }
  100% { transform: translateX(120vw) skewX(-20deg); }
}

@keyframes fade-in-overlay {
  0% { opacity: 0; }
  100% { opacity: 0.8; }
}

@keyframes fade-in-halftone {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 0.8; transform: scale(1); }
}

@keyframes fade-out-overlay {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes fade-out-halftone {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.97); }
}

@keyframes wipe-through-details {
  0% { opacity: 0; transform: skewX(-20deg) translateX(-50px) scale(0.94); }
  35%, 65% { opacity: 0.8; transform: skewX(-20deg) translateX(0px) scale(1.03); }
  100% { opacity: 0; transform: skewX(-20deg) translateX(100px) scale(0.97); }
}


/* ─── 4. RACE EVENT BADGES (Director / Ticker / HUD overlays) ─── */

.race-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 2px solid var(--color-ink-black);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--color-ink-black);
  animation: raceEventBadgeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.race-event-badge__icon {
  font-size: 0.85rem;
  line-height: 1;
}

.race-event-badge--pit {
  background: var(--color-comic-blue);
  color: #fff;
  border-color: var(--color-ink-black);
}

.race-event-badge--safety-car {
  background: var(--race-state-safety-car-bg);
  color: var(--race-state-safety-car-text);
  border-color: var(--race-state-safety-car-border);
}

/* Bestzeit: dunkle Schrift auf Gruen (weiss hielt nur 2,2:1, #117) */
.race-event-badge--drs {
  background: var(--color-comic-green);
  color: var(--color-ink-black);
}

.race-event-badge--overtake {
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
}

.race-event-badge--dnf {
  background: var(--color-comic-red);
  color: var(--color-ink-black);
}

.race-event-badge--weather {
  background: var(--race-weather-rain-bg);
  color: var(--race-weather-rain-chip);
  border-color: var(--race-weather-rain-accent);
}

.race-event-badge--incident {
  background: rgba(255, 59, 48, 0.22);
  color: #ffb4ae;
  border-color: var(--color-comic-red);
}

.race-event-badge--pulse {
  animation:
    raceEventBadgeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both,
    raceEventBadgePulse 2.2s ease-in-out 0.45s infinite;
}

@keyframes raceEventBadgeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes raceEventBadgePulse {
  0%, 100% {
    box-shadow: 2px 2px 0 var(--color-ink-black), 0 0 0 0 color-mix(in srgb, var(--color-accent-fill) 35%, transparent);
  }
  50% {
    box-shadow: 2px 2px 0 var(--color-ink-black), 0 0 12px 3px color-mix(in srgb, var(--color-accent-fill) 45%, transparent);
  }
}

/* ─── 3. Kopfkacheln und Tabellenzeilen ohne Einblend-Animation ───
   Die Kopfkacheln standen beim Laden und bei jeder Rueckkehr aus dem Rennen
   erst gestaffelt aus Deckkraft 0 auf; sie stehen jetzt sofort. */

/* Tabellenzeilen ohne Einblend-Animation */
.glass-table tbody tr {
  opacity: 1;
}

/* prefers-reduced-motion: Wipe-Overlay, KPI-Cards und Tabellenzeilen deckt
   der zentrale Guard in theme_a11y.css ab. */
@media (prefers-reduced-motion: reduce) {
  /* Event badges: static chips when motion is reduced (Agent-08) */
  .race-event-badge,
  .race-event-badge--pulse {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}