/* ==========================================================================
   CC Site FX - Tilt Card (Sammelkarten-Look fuer bestehende Container).

   Die Karte kippt leicht zur Maus und traegt dabei ein Glanz-Overlay, das
   dem Zeiger folgt - wie eine Sammelkarte, die man ins Licht haelt.

   Nicht-invasiv: der Host bekommt NUR eine Klasse. Das Glanz-Feld ist ein
   absoluter Span, den ccx-tilt.js zur Laufzeit als letztes Kind einhaengt.
   Kein Re-Parenting, keine Layout-Aenderung - der Container bleibt in
   Elementor unveraendert pflegbar.

   Zusammenspiel mit der Glow Card: beide Effekte duerfen auf demselben
   Container liegen. Der Glow-Ring sitzt als eigener Span 36px UEBER die
   Karte hinaus; weil die Kippung am Host haengt, kippt der Ring korrekt
   mit. Deshalb steht hier NIRGENDS overflow:hidden am Host - das Clipping
   passiert ausschliesslich im Glanz-Span selbst.
   ========================================================================== */

.ccx-tiltcard {
  /* Kippung (JS schreibt nur diese Werte, die Regel unten baut daraus die
     Transformation - so bleibt eine etwaige Elementor-Transformation am
     selben Element gewinnberechtigt und der Effekt faellt sauber aus). */
  --tc-rx: 0deg;
  --tc-ry: 0deg;
  /* Zeigerposition im Kartenfeld: Prozent fuer den Glanz-Mittelpunkt,
     -0.5..0.5 fuer die Verschiebung des Schimmer-Bandes. */
  --tc-x: 50%;
  --tc-y: 50%;
  --tc-xn: 0;
  --tc-yn: 0;
  /* Fluchtpunkt-Abstand. Groesser = flacher und ruhiger, kleiner = staerker
     verzerrt. Bei einer 900 Pixel breiten Karte laesst ein Wert um 900 die
     zugewandte Kante deutlich groesser werden als die abgewandte - das wirkt
     wackelig. 1600 haelt die Karte gerade und laesst die Kippung trotzdem
     klar erkennen. Schmalere Karten vertragen einen kleineren Wert. */
  --tc-persp: 1600px;
  /* Deckkraft der beiden Glanz-Ebenen. Bewusst niedrig: die Zielkarten sind
     gross, ein kraeftiger Wert wuerde als weisser Fleck lesen. */
  --tc-glare: 0.17;
  --tc-holo: 0.095;
  position: relative;
}

/* Die Transformation liegt NUR am aktiven Zustand. Im Ruhezustand traegt der
   Container gar keine Transformation - er bekommt also keine dauerhafte
   eigene Zeichenebene (die kostet Speicher und kann Text weichzeichnen). */
.ccx-tiltcard.ccx-tilt-live {
  transform: perspective(var(--tc-persp)) rotateX(var(--tc-rx)) rotateY(var(--tc-ry));
  transform-origin: center center;
  will-change: transform;
}

/* ---------- Glanz-Overlay ----------
   Liegt ueber dem Inhalt, faengt aber keine Klicks ab. overflow:hidden gilt
   nur fuer diesen Span: es beschneidet das Schimmer-Band auf die Kartenform,
   ohne den nach aussen stehenden Glow-Ring anzutasten. */
.ccx-tiltcard > .ccx-tiltcard__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  /* Eigene Mischgruppe: das Schimmer-Band darunter soll immer gegen diesen
     Span aufhellen, nie gegen wechselnden Karteninhalt. Damit sieht der
     Effekt auf jeder Karte gleich aus. */
  isolation: isolate;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  /* Weicher Lichtschein mit langem Auslauf. Der Verlauf endet bewusst INNEN:
     ein Feld, das ueber die ganze Karte reicht, hellt die Flaeche gleichmaessig
     auf und nimmt dem Navy die Tiefe - es soll aber eine Stelle geben, an der
     das Licht sitzt, und eine, an der die Karte dunkel bleibt. */
  background:
    radial-gradient(62% 58% at var(--tc-x) var(--tc-y),
      rgba(255, 255, 255, var(--tc-glare)) 0%,
      rgba(255, 255, 255, calc(var(--tc-glare) * 0.5)) 28%,
      rgba(255, 255, 255, calc(var(--tc-glare) * 0.16)) 54%,
      rgba(255, 255, 255, 0) 80%);
}

.ccx-tiltcard:hover > .ccx-tiltcard__glare,
.ccx-tiltcard.ccx-tilt-qa > .ccx-tiltcard__glare {
  opacity: 1;
}

/* Schimmer-Band: feiner Regenbogen, der beim Kippen ueber die Karte wandert.

   Zwei Dinge halten ihn davon ab, als Farbschleier zu lesen:
   1. Er ist auf den Lichtkegel MASKIERT - die Farben erscheinen nur dort, wo
      auch das Licht sitzt. Genau so verhaelt sich eine echte Folie: die
      Regenbogenfarben stecken im Glanzpunkt, nicht auf der ganzen Flaeche.
      Deshalb sitzt der Span auf inset:0 und wird ueber background-position
      verschoben statt ueber transform - nur so rechnen Maske und Lichtkegel
      im selben Koordinatenfeld.
   2. Die Farben sind entsaettigt. Kraeftiges Pink und Gruen ergeben im
      Aufhell-Modus auf Navy ein schmutziges Violett-Oliv. */
.ccx-tiltcard > .ccx-tiltcard__glare::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--tc-holo);
  mix-blend-mode: screen;
  /* Wiederkehrende Baender statt eines einzelnen Streifens: so liegt immer
     eines im Lichtkegel, egal wohin der Zeiger wandert. Ein einzelner
     Streifen war je nach Mausposition schlicht ausserhalb der Maske und der
     Schimmer damit unsichtbar. Der Zyklus beginnt und endet durchsichtig,
     deshalb entsteht an der Wiederholstelle keine Kante. */
  background-image: repeating-linear-gradient(108deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 176, 208, 1) 46px,
    rgba(178, 186, 255, 1) 88px,
    rgba(158, 226, 255, 1) 130px,
    rgba(178, 250, 216, 1) 172px,
    rgba(255, 232, 176, 1) 214px,
    rgba(255, 255, 255, 0) 260px,
    rgba(255, 255, 255, 0) 400px);
  background-position:
    calc(50% + var(--tc-xn) * 150%)
    calc(50% + var(--tc-yn) * 150%);
  -webkit-mask-image: radial-gradient(58% 54% at var(--tc-x) var(--tc-y),
    #000 0%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0) 74%);
  mask-image: radial-gradient(58% 54% at var(--tc-x) var(--tc-y),
    #000 0%, rgba(0, 0, 0, 0.55) 32%, rgba(0, 0, 0, 0) 74%);
}

/* Ohne echte Maus (Touch, Stift) und bei reduzierter Bewegung bleibt alles
   aus. Das JS steigt in diesen Faellen ohnehin aus und haengt den Span gar
   nicht erst ein - die Regeln hier sind der Gurt zum Hosentraeger, etwa
   wenn ein Geraet die Eingabeart erst spaeter wechselt. */
@media (prefers-reduced-motion: reduce) {
  .ccx-tiltcard.ccx-tilt-live { transform: none; will-change: auto; }
  .ccx-tiltcard > .ccx-tiltcard__glare { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .ccx-tiltcard.ccx-tilt-live { transform: none; will-change: auto; }
  .ccx-tiltcard > .ccx-tiltcard__glare { display: none; }
}