/* ============================================================
   SUNlife Schwarmspeicher, Premium-FX-Layer
   High-End-Effekte: 3D-Tilt-Karten, Scroll-Reveal, Parallax,
   animiert ablösendes Logo, Zaehler. Ergaenzt glass-sunlife.css.
   Respektiert prefers-reduced-motion.
   ============================================================ */

/* ---- Scroll-Reveal: Elemente steigen sanft ein ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- 3D-Tilt-Karten: kippen leicht zur Maus ---- */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease;
  will-change: transform;
}
.tilt > * { transform: translateZ(0); }
.tilt .tilt-pop { transform: translateZ(40px); }

/* ---- Premium-Glanz, der bei Hover ueber die Karte wandert ---- */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%,
    oklch(100% 0 0 / 0.18) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.sheen:hover::after { transform: translateX(120%); }

/* ============================================================
   Animiert ablösendes / schwebendes SUNlife-Logo
   Das Logo loest sich vom Speicher und schwebt sanft, mit
   leichtem 3D-Neigen und weichem Schlagschatten.
   ============================================================ */
.logo-peel {
  position: relative;
  display: inline-block;
  perspective: 900px;
}
.logo-peel img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  animation: logo-float 6s ease-in-out infinite;
  filter: drop-shadow(0 10px 22px oklch(0% 0 0 / 0.45));
  will-change: transform, filter;
}
@keyframes logo-float {
  0%   { transform: rotateX(0deg) translateY(0) scale(1);      filter: drop-shadow(0 8px 16px oklch(0% 0 0 / 0.35)); }
  50%  { transform: rotateX(7deg) translateY(-14px) scale(1.015); filter: drop-shadow(0 26px 40px oklch(0% 0 0 / 0.55)); }
  100% { transform: rotateX(0deg) translateY(0) scale(1);      filter: drop-shadow(0 8px 16px oklch(0% 0 0 / 0.35)); }
}

/* ---- Parallax-Helfer ---- */
.parallax { will-change: transform; }

/* ---- Animierte Zahl (Count-up via JS, hier nur tabular) ---- */
.count { font-variant-numeric: tabular-nums; }

/* ---- sanftes Glühen fuer Premium-CTAs ---- */
.glow-pulse { animation: glow-pulse 3.2s ease-in-out infinite; }
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 6px 18px var(--accent-ring); }
  50%     { box-shadow: 0 10px 30px var(--accent-ring), 0 0 0 4px oklch(70% 0.15 150 / 0.12); }
}

/* ============================================================
   Lebendiger Hintergrund (Aurora)
   Eine fixe Ebene hinter der gesamten Seite. Mehrere weiche
   Farbschleier driften dauerhaft, auch ohne Scrollen. Liegt
   hinter allen Inhalten (z-index negativ), reagiert nicht auf
   Mausklicks und kostet kaum Leistung (reine GPU-Transformation).
   ============================================================ */
.site-aurora {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  opacity: 0.45;
}
.aurora-blob.a {
  width: 60vmax; height: 60vmax;
  top: -18vmax; left: -12vmax;
  background: radial-gradient(circle at 50% 50%, oklch(70% 0.15 150 / 0.55), transparent 68%);
  animation: aurora-a 34s ease-in-out infinite alternate;
}
.aurora-blob.b {
  width: 48vmax; height: 48vmax;
  bottom: -16vmax; right: -10vmax;
  background: radial-gradient(circle at 50% 50%, oklch(82% 0.15 85 / 0.42), transparent 68%);
  animation: aurora-b 41s ease-in-out infinite alternate;
}
.aurora-blob.c {
  width: 42vmax; height: 42vmax;
  top: 32%; left: 46%;
  background: radial-gradient(circle at 50% 50%, oklch(72% 0.12 200 / 0.40), transparent 68%);
  animation: aurora-c 29s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.40; }
  50%  { transform: translate(14vmax, 8vmax) scale(1.14); opacity: 0.58; }
  100% { transform: translate(6vmax, 18vmax) scale(1.05); opacity: 0.46; }
}
@keyframes aurora-b {
  0%   { transform: translate(0, 0) scale(1.05); opacity: 0.38; }
  50%  { transform: translate(-16vmax, -10vmax) scale(1.18); opacity: 0.55; }
  100% { transform: translate(-6vmax, -20vmax) scale(1); opacity: 0.42; }
}
@keyframes aurora-c {
  0%   { transform: translate(-8vmax, 0) scale(0.95); opacity: 0.30; }
  50%  { transform: translate(10vmax, -12vmax) scale(1.2); opacity: 0.50; }
  100% { transform: translate(-12vmax, 10vmax) scale(1.04); opacity: 0.34; }
}

/* ---- Optionales Hintergrund-Video (aktiv nur wenn Datei vorhanden) ---- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-video.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .logo-peel img { animation: none; }
  .glow-pulse { animation: none; }
  .tilt { transition: none; }
  .sheen::after { display: none; }
  .aurora-blob { animation: none !important; }
  .hero-video { display: none; }
}