/* ═══════════════════════════════════════════════════════════════════════════
   TH NOIR EDITORIAL – ATMOSPHERIC EFFECTS SYSTEM (GFX_ATMOSPHERE.CSS)
   Design-Kategorie: Premium Atmospheric & Racing Aesthetics
   Kompatibel mit: Karbon & Rennrot (tokens.css)
   
   Dieses Stylesheet ergänzt das TH-Racemanager UI um edle Ambient Glows,
   ein haptisches, papierartiges Noir-Card-Finish und Wetter-Zustände
   der Rennansicht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 2. PREMIUM AMBIENT GLOWS ──────────────────────────────────────────── */

/* Ambient-Border & Box-Glows für Key-Elemente (.premium-glow) */
.premium-glow {
  position: relative;
  background: var(--atm-card-bg);
  border: 1px solid color-mix(in srgb, var(--color-accent-fill) 18%, transparent) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 15px var(--atm-accent-glow),
    inset 0 0 12px var(--atm-accent-subtle);
  transition: all var(--transition-atm) var(--duration-atm);
}

.premium-glow:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.6),
    0 0 25px color-mix(in srgb, var(--color-accent-fill) 40%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--color-accent-fill) 12%, transparent);
  transform: translateY(-2px);
}

/* ─── 3. REFINED NOIR-CARD PAPER GRAIN OVERLAY ──────────────────────────── */

/* 
   Verfeinertes, haptisches Finish für .noir-card.
   Verwendet ein diffuses SVG-Bump-Map-Rauschen, um ein exklusives, 
   unebenes, mattes "Edel-Karton"-Gefühl (Cotton Paper Texture) zu simulieren.
*/
.noir-card.paper-feel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%), var(--atm-card-bg);
  box-shadow: 
    var(--shadow-sm, 0 4px 16px rgba(0,0,0,0.3)),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.noir-card.paper-feel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  
  /* 
     SVG-Fractal-Noise mit diffusem Licht. 
     Erzeugt feine, räumlich wirkende Fasern und winzige Höhenunterschiede (Paper Grain).
  */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper-grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.075' numOctaves='4' result='noise' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0' result='grayNoise'/%3E%3CfeDiffuseLighting in='grayNoise' lighting-color='%23ffffff' surfaceScale='1.6' result='light'%3E%3CfeDistantLight azimuth='135' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeBlend mode='multiply' in='SourceGraphic' in2='light'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper-grain)' opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.4;
  transition: opacity var(--transition-atm) var(--duration-atm);
}

/* Hover-Zustand intensiviert die Textur-Schattierung minimal für mehr Plastizität */
.noir-card.paper-feel.hoverable:hover::before {
  opacity: 0.52;
}

/* Goldene Kanten-Spiegelung für die High-End-Variante der Noir-Karten */
.noir-card.paper-feel.gold-edge {
  border-color: color-mix(in srgb, var(--color-accent-fill) 15%, transparent);
}

.noir-card.paper-feel.gold-edge::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-fill) 30%, transparent), transparent 40%, color-mix(in srgb, var(--color-accent-fill) 10%, transparent)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* ─── 4. KEYFRAME ANIMATIONS (Zusatz) ────────────────────────────────────── */

/* ─── 5. SCREEN-GLOW & AMBIENT ORBS ─────────────────────────────────────── */

/* Basis der drei Hauptscreens */
#screen-dashboard,
#screen-rdhub,
#screen-race {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-repeat: no-repeat;
}

#screen-dashboard > *,
#screen-rdhub > *,
#screen-race > * {
  position: relative;
  z-index: 1;
}

/* Ambient-Orbs – ruhend. Der fruehere Drift lief als Dauer-Animation und
   kostete auf jedem Bildschirm in jedem Frame eine Style-Berechnung. */
#screen-dashboard::before,
#screen-rdhub::before,
#screen-race::before,
#screen-dashboard::after,
#screen-rdhub::after,
#screen-race::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(88px);
}

#screen-dashboard::before,
#screen-rdhub::before,
#screen-race::before {
  width: min(58vw, 720px);
  height: min(58vw, 720px);
  top: -18%;
  left: -12%;
}

#screen-dashboard::after,
#screen-rdhub::after,
#screen-race::after {
  width: min(48vw, 580px);
  height: min(48vw, 580px);
  bottom: -22%;
  right: -10%;
}

/* Variante: Warmes Gold (Dashboard) */
#screen-dashboard {
  background-image:
    radial-gradient(ellipse 50% 38% at 18% 22%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 68%),
    radial-gradient(ellipse 42% 32% at 82% 78%, color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 65%);
}

#screen-dashboard::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 28%, transparent) 0%, transparent 68%);
  opacity: 0.62;
}

#screen-dashboard::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 70%);
  opacity: 0.48;
}

/* Variante: Kühles Cyan (R&D-Hub – Orbs only, Grid bleibt in layout_rdhub.css) */
#screen-rdhub::before {
  background: radial-gradient(circle, var(--atm-cyan-glow) 0%, transparent 68%);
  opacity: 0.55;
}

#screen-rdhub::after {
  background: radial-gradient(circle, rgba(0, 140, 255, 0.14) 0%, transparent 72%);
  opacity: 0.42;
}

/* Variante: Renn-Atmosphäre (Rot/Weiß-Streifen + rote Orbs) */
#screen-race {
  background-image:
    linear-gradient(
      180deg,
      var(--color-comic-red) 0px,
      var(--color-comic-red) 3px,
      #ffffff 3px,
      #ffffff 6px,
      var(--color-comic-red) 6px,
      var(--color-comic-red) 9px,
      transparent 9px
    ),
    radial-gradient(ellipse 46% 34% at 12% 35%, var(--atm-race-red-subtle) 0%, transparent 66%),
    radial-gradient(ellipse 40% 30% at 88% 68%, rgba(255, 255, 255, 0.03) 0%, transparent 62%);
}

#screen-race::before {
  background: radial-gradient(circle, var(--atm-race-red-glow) 0%, transparent 68%);
  opacity: 0.58;
  top: 8%;
}

#screen-race::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  opacity: 0.35;
}

/* ─── 6. ORB & WEATHER KEYFRAMES ─────────────────────────────────────────── */


@keyframes weather-rain-fall {
  0% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(4%);
  }
}

/* Barrierefreiheit: dezente Animationen bei reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #screen-dashboard::before,
  #screen-dashboard::after,
  #screen-rdhub::before,
  #screen-rdhub::after,
  #screen-race::before,
  #screen-race::after,
  #screen-race.race-weather-rain::after,
  #screen-race.race-weather-heavy::after,
  #screen-race.race-state-safety-car::before {
    animation: none !important;
  }
}

/* ─── 7. RACE SCREEN STATE CLASSES (#screen-race via RaceVisualState) ─── */

#screen-race {
  transition:
    background-color var(--duration-atm) var(--transition-atm),
    box-shadow var(--duration-atm) var(--transition-atm);
}

#screen-race.race-weather-dry {
  background-color: var(--race-weather-dry-bg);
}

#screen-race.race-weather-rain {
  background-color: var(--race-weather-rain-bg);
}

#screen-race.race-weather-rain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      98deg,
      transparent 0px,
      transparent 14px,
      rgba(160, 195, 255, 0.04) 14px,
      rgba(160, 195, 255, 0.04) 15px
    ),
    linear-gradient(180deg, rgba(80, 120, 180, 0.08) 0%, transparent 45%, rgba(6, 10, 20, 0.12) 100%);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: weather-rain-fall 18s linear infinite;
}

#screen-race.race-weather-heavy {
  background-color: var(--race-weather-heavy-bg);
}

#screen-race.race-weather-heavy::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      96deg,
      transparent 0px,
      transparent 8px,
      rgba(120, 170, 255, 0.06) 8px,
      rgba(120, 170, 255, 0.06) 9px
    ),
    linear-gradient(180deg, rgba(40, 80, 160, 0.14) 0%, rgba(6, 10, 24, 0.22) 100%);
  mix-blend-mode: screen;
  opacity: 0.88;
  animation: weather-rain-fall 12s linear infinite;
}

#screen-race.race-state-safety-car {
  box-shadow: inset 0 0 0 3px var(--race-state-safety-car-border);
}

#screen-race.race-state-safety-car::before {
  content: 'SAFETY CAR';
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--race-state-safety-car-text);
  background: var(--race-state-safety-car-bg);
  border: 2px solid var(--race-state-safety-car-border);
  box-shadow: 0 0 18px var(--race-state-safety-car-glow);
  pointer-events: none;
  animation: atm-sc-pulse 2.4s ease-in-out infinite;
}

#screen-race.race-state-vsc {
  box-shadow: inset 0 0 0 3px var(--race-state-vsc-border);
}

#screen-race.race-state-vsc::before {
  content: 'VSC';
  position: absolute;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--race-state-vsc-text);
  background: var(--race-state-vsc-bg);
  border: 2px solid var(--race-state-vsc-border);
  box-shadow: 0 0 14px var(--race-state-vsc-glow);
  pointer-events: none;
}

@keyframes atm-sc-pulse {
  0%, 100% {
    opacity: 0.92;
    box-shadow: 0 0 12px var(--race-state-safety-car-glow);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 22px var(--race-state-safety-car-glow);
  }
}