/*
 * Interaction-Layer — Dr. Gregor Heiduschka (heiduschka.at)
 * Quelle: block-library effects/01 (Spotlight, Mason-Balance-Regel 2026-07-12: per-Card)
 *         + effects/02 (Icon-/Arrow-Motion) + etablir-Analyse (Aurora-CTA).
 * Akzent = Client-Theme-Blau (tailwind.config.js), NIE MW-Sage.
 * Nur Design-Layer: keine Inhalts-/Struktur-Änderung.
 */

:root {
  --spot-rgb: 47 111 179;        /* blue DEFAULT #2F6FB3 */
  --spot-border: #EAF0F7;        /* fcard/panel Ruhe-Border */
}

/* ============================================================
   1) Spotlight-Border-Cards — Glow folgt Cursor, per-Card aktiv
   Ruhezustand = vollwertige Card (bestehende Border bleibt).
   ============================================================ */
/* .spotlight-group ist der JS-Hook-Container (interactions.js pointermove) */
.spotlight-group { position: relative; }
.spotlight-card { position: relative; }
.spotlight-card::after {
  content: "";
  position: absolute;
  inset: -1px;                       /* legt sich exakt über die 1px-Card-Border */
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: radial-gradient(
    26rem circle at var(--xPos, 50%) var(--yPos, 50%),
    rgb(var(--spot-rgb) / 0.55),     /* heller Grund: 0.4–0.65 (Kit-Regel) */
    rgb(var(--spot-rgb) / 0.10) 45%,
    transparent 72%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
}
.spotlight-card:hover::after { opacity: 1; }

/* dezenter Innenflächen-Schimmer (Kit-optional, sehr leise) */
.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    22rem circle at var(--xPos, 50%) var(--yPos, 50%),
    rgb(var(--spot-rgb) / 0.06),
    transparent 40%
  );
  opacity: 0;
  transition: opacity .2s ease;
}
.spotlight-card:hover::before { opacity: 1; }

/* Touch + reduced motion: Effekt aus, Card bleibt vollwertig */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .spotlight-card::before,
  .spotlight-card::after { display: none; }
}

/* ============================================================
   2) Arrow-Nudge — Text-Pfeile (→) schieben bei Link-/Card-Hover
   Eine Bewegungssprache site-weit (Kit: Konsistenz vor Feature).
   ============================================================ */
.arr {
  display: inline-block;
  transition: transform .22s ease;
}
a:hover .arr,
.spotlight-card:hover .arr,
.fcard:hover .arr {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .arr { transition: none; }
  a:hover .arr, .spotlight-card:hover .arr, .fcard:hover .arr { transform: none; }
}

/* ============================================================
   3) Accordion-Plus — dreht sich zum × wenn offen (FAQ/Details)
   ============================================================ */
summary span[aria-hidden] {
  display: inline-block;
  transition: transform .25s ease;
}
details[open] summary span[aria-hidden] { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  summary span[aria-hidden] { transition: none; }
}

/* ============================================================
   4) Aurora — dunkle Final-CTA bekommt langsam driftenden Glow
   (etablir-Pattern, Farben = Theme blue-light/#6BA6DC + #9FD0E8)
   ============================================================ */
.aurora-cta { position: relative; overflow: hidden; }
.aurora-cta > * { position: relative; z-index: 1; }
.aurora-cta::before,
.aurora-cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
}
.aurora-cta::before {
  width: 420px; height: 420px;
  left: -120px; top: -170px;
  background: rgb(107 166 220 / 0.38);
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
.aurora-cta::after {
  width: 360px; height: 360px;
  right: -110px; bottom: -150px;
  background: rgb(159 208 232 / 0.30);
  animation: auroraDrift 20s ease-in-out infinite alternate-reverse;
}
@keyframes auroraDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(56px, 36px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-cta::before, .aurora-cta::after { animation: none; }
}