/**
 * agenic Komponenten-CSS – Interaktion & Fokus (übergreifend).
 *
 * Freigegeben von Vincent am 11.08.2026 (Designfeedback Startseite, Punkt 16;
 * Kontrakt-Doc `kontrakte-welle-designfeedback-11-08.md`, Abschnitt 3.7).
 * Grundsatz: Interaktionsmotion darf nicht auffallen, sie darf nur bestätigen —
 * kein Skalieren, keine Farbsprünge, nichts über 200 ms.
 *
 *   :hover         Lift translateY(-2px)   150 ms  Motion/easing-standard
 *   :focus-visible Fokusring 1 → 2 px      150 ms  Motion/easing-standard
 *   :active        Lift zurück auf 0       100 ms  linear
 *   reduced-motion keine Bewegung, Fokusring erscheint sofort
 *
 * Bereits vorhanden und deshalb hier NICHT wiederholt: `ag_button` bringt Lift und
 * Timing seit 3.x mit (button.css). `ag_tabs` hat seit 3.19.0 eine eigene
 * Fokusmechanik (Fusion-Linie) und ist vom Fokusring hier ausgenommen.
 *
 * Alle Werte sind Figma-gebunden: --motion-duration-xs 150 ms (Values/motion/duration/xs),
 * --motion-ease-standard (Motion/easing-standard). Kein neues Token.
 */

/* ── Der Satz interaktiver ag-Elemente ───────────────────────────────────── */

.ag-button,
.ag-tabs__tab,
.ag-accordion__frage,
.ag-card,
.ag-interaktiv {
    --ag-interaktion-lift: -2px;
    --ag-interaktion-dauer: var(--motion-duration-xs);   /* 150 ms */
    --ag-interaktion-ease: var(--motion-ease-standard);
}

/* ── Lift: nur dort, wo ihn das Element nicht schon selbst mitbringt ─────── */

.ag-accordion__frage,
.ag-card,
.ag-interaktiv {
    transition:
        transform var(--ag-interaktion-dauer) var(--ag-interaktion-ease),
        outline-width var(--ag-interaktion-dauer) var(--ag-interaktion-ease);
}

.ag-accordion__frage:hover,
.ag-card:hover,
.ag-interaktiv:hover {
    transform: translateY(var(--ag-interaktion-lift));
}

/* ── :active — der Lift geht zurück, spürbar schneller als er kam ───────── */

.ag-button:active,
.ag-accordion__frage:active,
.ag-card:active,
.ag-interaktiv:active {
    transform: translateY(0);
    transition-duration: 100ms;
    transition-timing-function: var(--motion-ease-linear);
}

/* ── Fokusring blendet weich von 1 auf 2 px auf ──────────────────────────
   `ag_tabs` ausgenommen: dort ist die Fusion-Linie der Indikator (tabs.css). */

.ag-accordion__frage,
.ag-card,
.ag-interaktiv {
    outline: var(--border-width-xs) solid transparent;
    outline-offset: 2px;
}

.ag-accordion__frage:focus-visible,
.ag-card:focus-visible,
.ag-interaktiv:focus-visible {
    outline-width: var(--border-width-s);
    outline-color: currentColor;
}

/* Der Button hatte bisher einen harten 2-px-Ring — er bekommt denselben Übergang. */
.ag-button.ag-button {
    outline: var(--border-width-xs) solid transparent;
    outline-offset: 2px;
    transition:
        transform var(--ag-interaktion-dauer) var(--ag-interaktion-ease),
        outline-width var(--ag-interaktion-dauer) var(--ag-interaktion-ease);
}

.ag-button.ag-button:focus-visible {
    outline-width: var(--border-width-s);
    outline-color: currentColor;
}

/* ── Bewegung abschaltbar; der Fokus bleibt sichtbar ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ag-button,
    .ag-tabs__tab,
    .ag-accordion__frage,
    .ag-card,
    .ag-interaktiv,
    .ag-button.ag-button {
        transition: none;
    }

    .ag-button:hover,
    .ag-accordion__frage:hover,
    .ag-card:hover,
    .ag-interaktiv:hover {
        transform: none;
    }
}

/* ═══ Fusions-Schein beim Überfahren (Glow) ═══════════════════════════════
   Freigegeben Vincent 20.08.2026; Konzept `claude/glow-hover-konzept-20-08.md`.
   Weiches Fusionslicht HINTER der Karte, das dem Zeiger nachzieht.

   ── Warum eine Huelle und kein Pseudo-Element ──────────────────────────────
   Zwei Bauarten sind vorher gescheitert, beide aus demselben Grund: Der Schein
   muss HINTER die Karte, und an die Karte selbst kommt man dort nicht heran.

   1. `::before` mit `z-index: -1`: Der Hover-Lift (`transform: translateY`)
      erzeugt einen Stapelkontext. Darin malt ein negatives Kind ueber dem
      Elementhintergrund statt darunter.
   2. `::before` mit `inset: 0` in der Karte: `.ag-card` traegt
      `overflow: hidden` (card.css:31, gerundete Medienflaeche). Der Schein
      wurde auf die Kartenflaeche geklippt und lag als Fleck ueber dem Text.

   Die Huelle loest beides ohne Trick: Sie klippt nicht, sie transformiert
   nicht, und der Schein ist ein GESCHWISTER vor der Karte im Markup. Damit
   malt er nach der normalen Reihenfolge hinter ihr — kein `z-index` noetig.

   Das ist auch der Grund, warum hier `filter: blur()` wieder erlaubt ist: Der
   Weichzeichner sitzt auf einem eigenen, statischen Element. Animiert werden
   weiterhin nur `opacity` und `transform`, beides auf dem Compositor.

   ── Warum die Flaeche trotzdem mitleuchtet ────────────────────────────────
   `--ag-card-bg` ist auf der Vorgabe `--color-surface-frosted-light`, also
   halbtransparent. Das Licht dahinter scheint durch — der Frost entsteht von
   selbst und liegt nicht auf dem Text.

   Farben: `--c-fusion-erp` / `--c-fusion-crm` aus tokens.css.
   Zeiten: `--motion-duration-m` / `--motion-ease-standard`. Kein neues Token. */

/* Angemeldete Eigenschaften — ohne `@property` kann CSS eine Custom Property
   nicht ueberblenden und der Schein klebte hart am Zeiger. Seit Firefox 128
   (Juli 2024) in allen drei Engines verfuegbar. `--ag-glow-x/y` schreibt das
   Skript auf die Huelle, `--ag-glow-xt/yt` sind die nachziehenden Zwillinge
   auf dem Schein. */
@property --ag-glow-x  { syntax: '<length>'; inherits: true;  initial-value: 0px; }
@property --ag-glow-y  { syntax: '<length>'; inherits: true;  initial-value: 0px; }
@property --ag-glow-xt { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ag-glow-yt { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* L3-Vorgaben. Bewusst auf :root, damit „agenic Design → Glow" sie an derselben
   Stelle ueberschreiben kann (Frontend::glow_variablen()). Kein Semantik-Token
   wird dadurch verbogen — die Namen gehoeren allein dem Schein. */
:root {
    --ag-glow-an:           1;      /* Hauptschalter, 0 = aus */
    --ag-glow-staerke:      1;      /* Intensitaet, global 0-200 % */
    --ag-glow-deckung:      .85;    /* Deckkraft auf dunklem Grund */
    --ag-glow-deckung-hell: .55;    /* Deckkraft unter .ag-glow--hell */
    --ag-glow-radius:       220px;  /* Durchmesser des Lichtflecks am Zeiger */
    --ag-glow-weichheit:    68%;    /* Stop, an dem der Verlauf transparent wird */
    --ag-glow-ueberstand:   44px;   /* wie weit der Schein hinter der Karte hervorkommt */
    --ag-glow-zerstreuung:  40px;   /* Weichzeichner; statisch, nie animiert */
    --ag-glow-nachlauf:     180ms;  /* Verzoegerung, mit der er folgt */
}

/* Die drei Ebenen der Vergabe. Widget schlaegt global, leer heisst „wie global". */
.ag-glow--an   { --ag-glow-an: 1; }
.ag-glow--aus  { --ag-glow-an: 0; }
.ag-glow--hell { --ag-glow-deckung: var(--ag-glow-deckung-hell); }

/* Die Huelle. Kein `overflow`, keine `transform` — sonst faengt der Aerger von
   vorne an. `height: 100%` reicht die Zellenhoehe des Rasters durch, damit
   gestreckte Karten gestreckt bleiben (card-grid.css). */
.ag-glow-huelle {
    position: relative;
    display: block;
    height: 100%;
}

/* Der Schein. Liegt als erstes Kind vor der Karte und damit hinter ihr. */
.ag-glow-huelle__schein {
    position: absolute;
    inset: calc(-1 * var(--ag-glow-ueberstand));
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: scale(.94);

    --ag-glow-xt: var(--ag-glow-x);
    --ag-glow-yt: var(--ag-glow-y);

    /* Der Zeiger kommt huellenrelativ herein, der Schein sitzt um den
       Ueberstand versetzt — deshalb hier aufaddieren statt im Skript. */
    background: radial-gradient(
        var(--ag-glow-radius) circle
        at calc(var(--ag-glow-xt) + var(--ag-glow-ueberstand))
           calc(var(--ag-glow-yt) + var(--ag-glow-ueberstand)),
        var(--c-fusion-erp) 0%,
        var(--c-fusion-crm) 46%,
        transparent var(--ag-glow-weichheit));
    filter: blur(var(--ag-glow-zerstreuung));

    transition:
        opacity var(--motion-duration-m) var(--motion-ease-standard),
        transform var(--motion-duration-m) var(--motion-ease-standard),
        --ag-glow-xt var(--ag-glow-nachlauf) linear,
        --ag-glow-yt var(--ag-glow-nachlauf) linear;
}

/* Die Karte gehoert ueber den Schein — sonst reicht die normale Malreihenfolge
   nicht, wenn ein Konsument der Karte selbst einen `z-index` gibt. */
.ag-glow-huelle > .ag-card {
    position: relative;
    z-index: 1;
}

.ag-glow-huelle:hover .ag-glow-huelle__schein {
    opacity: calc(var(--ag-glow-deckung) * var(--ag-glow-staerke) * var(--ag-glow-an));
    transform: scale(1);
}

/* Ohne Bewegung kein Schein: Er lebt vom Folgen, und das Skript laeuft hier
   ohnehin nicht (glow.js prueft dieselbe Abfrage). */
@media (prefers-reduced-motion: reduce) {
    .ag-glow-huelle__schein {
        display: none;
    }
}