/* ============================================================
   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); }
}

@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; }
}