/* ═══════════════════════════════════════════════════════════════════════
   CourtOS — Card-Effekte (geteilt: Trainer Hub, Athletik, Operations)
   ═══════════════════════════════════════════════════════════════════════
   Zwei kombinierbare Effekte, portiert aus kokonutui (dort React/Tailwind —
   hier reines CSS, weil keine der Apps einen Build-Step hat):

     .cos-glass     — liquid-glass-card: frostige Fläche mit Innenlichtern und
                      diagonalem Schimmer. Vorbild: Operations' .ops-glass.
     .cos-spotlight — spotlight-cards: ein warmer Lichtkegel folgt dem Cursor
                      (Koordinaten aus courtos-cards.js: --spot-x/--spot-y,
                      Sichtbarkeit über --spot).

   Beide nutzen getrennte Pseudo-Elemente (::before für Glas, ::after für den
   Spotlight) und lassen sich deshalb an derselben Karte kombinieren. Farben
   kommen aus den Tokens — kein Marken-Hex.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- Liquid Glass ---------------------------------------------------- */
/* Doppelte Klasse = leicht höhere Spezifität (0,2,0). Nötig, weil die Basis-
   Kartenregeln der Apps (z. B. .trainer-day in courtos-v2.css) sonst je nach
   Ladereihenfolge gewinnen — courtos-v2.css wird im Hub zweimal eingebunden.
   Der Effekt bleibt trotzdem generisch: jede Karte opted per Klasse ein. */
.cos-glass.cos-glass{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.7);
  /* Diagonaler Schimmer über einer fast deckenden weißen Fläche — auf dem
     hellen Seitenhintergrund bleibt der Inhalt dadurch knackig, gewinnt aber
     die Tiefe echten Glases. */
  background:
    linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 68%, rgba(255,255,255,.4) 100%),
    rgba(255,255,255,.82);
  box-shadow:
    0 0 6px rgba(var(--cos-brand-strong-rgb),.03),
    0 2px 6px rgba(var(--cos-brand-strong-rgb),.06),
    inset 2px 2px .5px -2px rgba(255,255,255,.9),
    inset -2px -2px .5px -2px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.1),
    0 18px 42px -34px rgba(var(--cos-brand-strong-rgb),.4);
}
/* Frostung hinter der Fläche. z-index:-1 → hinter dem Inhalt; die isolation
   oben hält den negativen Index innerhalb der Karte. */
.cos-glass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  backdrop-filter:blur(3px) saturate(1.5);
  -webkit-backdrop-filter:blur(3px) saturate(1.5);
}
/* Ohne backdrop-filter (ältere Browser) bleibt die Fläche einfach deckend. */
@supports not ((backdrop-filter:blur(3px)) or (-webkit-backdrop-filter:blur(3px))){
  .cos-glass{background:rgba(255,255,255,.94)}
}

/* ---- Spotlight ------------------------------------------------------- */
.cos-spotlight{position:relative}
.cos-spotlight::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:var(--spot,0);
  transition:opacity .25s ease-out;
  background:radial-gradient(240px circle at var(--spot-x,50%) var(--spot-y,50%),
    rgba(var(--cos-accent-rgb),.20),
    rgba(var(--cos-accent-rgb),.07) 40%,
    transparent 70%);
}
/* Der Inhalt muss über dem Lichtkegel liegen. Direkte Kinder bekommen deshalb
   eine eigene Ebene — der Spotlight (::after, z-index:0) scheint darunter. */
.cos-spotlight > *{position:relative;z-index:1}

@media (prefers-reduced-motion: reduce){
  .cos-spotlight::after{transition:none}
}