/* ============================================================
   WattHunt — SHELL V2 „AURORA" (Phase B, additiv)
   Die Bewegungs- und Licht-Sprache der App (Stille Energie),
   skaliert fürs Web. Wird NACH site-shell.css geladen; Seiten
   steigen einzeln um (<link …shell-aurora.css> + shell-motion.js).

   GESETZE (gelten für Phase B/C/D):
   1 Glow folgt Bedeutung — max. EIN Primär-Glow pro Viewport.
   2 Eine Familie: Akzent ist IMMER der Aqua→Lime-Verlauf
     (--aur-1 → --aur-2). Keine zweite Effektfarbe.
   3 Eine Hand: alle Bewegung über --ease / --ease-spring und
     die drei Tempi (--t-micro/std/scene). Kein anderes Easing.
   4 Nur transform/opacity wird animiert. Max. 2 WebGL-Canvas
     pro Seite (Phase C/D), alles andere CSS.
   5 Inhalt ist nie hinter Effekten versteckt: Reveals feuern
     200px im Voraus, FPS-Wächter (<12fps) und reduced-motion
     zeigen alles sofort.
   ============================================================ */

:root{
  /* Licht-Familie (identisch zur App) */
  --aur-1:#3ef2c8;            /* Aqua  — Beginn jedes Energie-Verlaufs */
  --aur-2:#b9ff6e;            /* Lime  — Ende jedes Energie-Verlaufs   */
  --aur-text:#c9ffe9;         /* leuchtende Zahlen/Linien-Tinte        */
  --aur-line:rgba(62,242,200,.28);
  --aur-soft:rgba(62,242,200,.10);
  --aur-grad:linear-gradient(135deg,var(--aur-1),var(--aur-2));

  /* Glow-Budget */
  --glow-primary:0 14px 40px rgba(34,229,143,.26),inset 0 1px 0 rgba(255,255,255,.4);
  --glow-soft:0 10px 26px rgba(34,229,143,.16),inset 0 1px 0 rgba(255,255,255,.25);
  --glow-text:0 0 22px rgba(62,242,200,.30);

  /* Motion — drei Tempi + Feder + Atem */
  --t-micro:140ms; --t-std:240ms; --t-scene:600ms; --t-breath:9s;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.32,1.25,.5,1);

  /* Typo-Skala Web (Display größer als App) */
  --fs-hero:clamp(44px,6.4vw,76px);
  --fs-display:clamp(32px,4.4vw,52px);
  --fs-title:clamp(22px,2.6vw,30px);
  --fs-body:17px; --fs-small:14px; --fs-micro:12px;

  /* Sektions-Rhythmus (8er-Raster) */
  --sec-pad:clamp(72px,9vw,128px);
}

/* ---------- Fokus-Standard (A11y-Pflicht, alle interaktiven Elemente) ---------- */
.aurora :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--aur-1);outline-offset:3px;border-radius:6px}
.aurora :is(a,button):focus:not(:focus-visible){outline:none}
/* Tap-Target-Minimum (A11y): gilt auf jeder umgestellten Seite, egal wo deren Nav-CSS liegt */
.aurora .menu-btn{min-width:44px;min-height:44px}

/* ---------- Material: Glas (E2) ---------- */
.aurora .glass{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  border:1px solid var(--line,rgba(255,255,255,.09));border-radius:24px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08)}

/* ---------- Licht-Primitive ---------- */
/* Glow-Linie: 1px Energie-Linie, z.B. unter Sektionstiteln oder als Trenner */
.aurora .glow-line{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--aur-line) 18%,var(--aur-1) 50%,var(--aur-line) 82%,transparent);
  box-shadow:0 0 14px rgba(62,242,200,.35);margin:0}
/* Leuchtende Kennzahl (Daten leuchten nie — Entscheidungen/Held-Zahlen schon) */
.aurora .lumen{color:var(--aur-text);text-shadow:var(--glow-text);font-variant-numeric:tabular-nums}
/* Primär-CTA in der Energie-Familie (ersetzt nicht .btn-primary der Shell —
   ist die V2-Variante für umgestellte Seiten) */
.aurora .btn-aurora{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:14px 22px;font-size:15px;font-weight:750;color:#06130c;
  background:var(--aur-grad);box-shadow:var(--glow-primary);
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease)}
.aurora .btn-aurora:hover{transform:translateY(-1px) scale(1.012)}
.aurora .btn-aurora:active{transform:translateY(0) scale(.99)}

/* ---------- Bühne: Galaxie-Hintergrund (CSS-only, fixed, transform/opacity) ---------- */
.aurora-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora-stage .blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;will-change:transform}
.aurora-stage .blob.b1{width:54vw;height:38vh;left:-8vw;top:-6vh;background:radial-gradient(closest-side,rgba(62,242,200,.16),transparent);animation:aurDrift1 26s var(--ease) infinite alternate}
.aurora-stage .blob.b2{width:46vw;height:34vh;right:-10vw;top:18vh;background:radial-gradient(closest-side,rgba(118,134,200,.13),transparent);animation:aurDrift2 34s var(--ease) infinite alternate}
.aurora-stage .blob.b3{width:40vw;height:30vh;left:22vw;bottom:-10vh;background:radial-gradient(closest-side,rgba(34,229,143,.10),transparent);animation:aurDrift1 30s var(--ease) infinite alternate-reverse}
@keyframes aurDrift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,4vh,0) scale(1.08)}}
@keyframes aurDrift2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-5vw,-3vh,0) scale(1)}}
/* Sternfeld: zwei Tiefenebenen aus box-shadow-Saat — kein Canvas nötig */
.aurora-stage .stars,.aurora-stage .stars::after{content:"";position:absolute;inset:0}
.aurora-stage .stars{opacity:.7}
.aurora-stage .stars::before,.aurora-stage .stars::after{content:"";position:absolute;width:2px;height:2px;border-radius:50%;background:transparent}
.aurora-stage .stars::before{box-shadow:
  8vw 12vh 0 0 rgba(255,255,255,.8),22vw 6vh 0 0 rgba(255,255,255,.5),34vw 18vh 0 0 rgba(201,255,233,.7),
  47vw 9vh 0 0 rgba(255,255,255,.4),58vw 22vh 0 0 rgba(255,255,255,.75),71vw 14vh 0 0 rgba(201,255,233,.5),
  83vw 7vh 0 0 rgba(255,255,255,.65),92vw 25vh 0 0 rgba(255,255,255,.45),15vw 33vh 0 0 rgba(255,255,255,.6),
  29vw 41vh 0 0 rgba(201,255,233,.45),44vw 36vh 0 0 rgba(255,255,255,.7),63vw 44vh 0 0 rgba(255,255,255,.4),
  78vw 38vh 0 0 rgba(255,255,255,.55),9vw 56vh 0 0 rgba(255,255,255,.5),26vw 62vh 0 0 rgba(201,255,233,.6),
  41vw 58vh 0 0 rgba(255,255,255,.35),57vw 67vh 0 0 rgba(255,255,255,.6),72vw 60vh 0 0 rgba(255,255,255,.45),
  88vw 55vh 0 0 rgba(201,255,233,.55),12vw 78vh 0 0 rgba(255,255,255,.5),31vw 84vh 0 0 rgba(255,255,255,.4),
  49vw 80vh 0 0 rgba(255,255,255,.65),66vw 88vh 0 0 rgba(201,255,233,.4),85vw 79vh 0 0 rgba(255,255,255,.55);
  animation:starTwinkle 4.6s ease-in-out infinite alternate}
.aurora-stage .stars::after{width:1px;height:1px;box-shadow:
  5vw 21vh 0 0 rgba(255,255,255,.4),18vw 47vh 0 0 rgba(255,255,255,.3),37vw 11vh 0 0 rgba(255,255,255,.35),
  52vw 49vh 0 0 rgba(255,255,255,.28),69vw 31vh 0 0 rgba(255,255,255,.4),81vw 46vh 0 0 rgba(255,255,255,.3),
  95vw 12vh 0 0 rgba(255,255,255,.35),23vw 71vh 0 0 rgba(255,255,255,.3),59vw 76vh 0 0 rgba(255,255,255,.35),
  76vw 70vh 0 0 rgba(255,255,255,.28),91vw 86vh 0 0 rgba(255,255,255,.32),7vw 92vh 0 0 rgba(255,255,255,.3);
  animation:starTwinkle 3.4s ease-in-out infinite alternate-reverse}
@keyframes starTwinkle{from{opacity:.55}to{opacity:1}}

/* ---------- Bewegungssystem: Reveals (eine Sprache überall) ----------
   HTML: data-reveal (+ optional style="--i:n" für Stagger).
   shell-motion.js setzt .in, 200px bevor das Element sichtbar wird. */
.aurora [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-scene) var(--ease),transform var(--t-scene) var(--ease-spring);
  transition-delay:calc(var(--i,0)*70ms)}
.aurora [data-reveal].in{opacity:1;transform:none}

/* ---------- Sicherheitsnetz: Inhalt ist NIE versteckt ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora [data-reveal]{opacity:1;transform:none;transition:none}
  .aurora-stage .blob,.aurora-stage .stars::before,.aurora-stage .stars::after{animation:none}
}
html.is-performance-mode .aurora [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
html.is-performance-mode .aurora-stage{display:none!important}