/* ==========================================================================
   AnalyticsRocket — Premium Animations Suite
   Inspired by After Effects AE-Stil Presets
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. HERO: CINEMATIC INTRO — Letterbox + Titel-Reveal
   ────────────────────────────────────────────────────────────────────────── */

/* Hero Badge — erscheint zuerst */
.ar-hero-badge {
  opacity: 1;
}

/* Hero Subtext — nach den Headlines */
.ar-hero-sub {
  opacity: 1;
}

/* Hero Checkmarks */
.ar-hero-checks {
  opacity: 1;
}

/* Hero CTA Buttons */
.ar-hero-cta {
  opacity: 1;
}

@keyframes arHeroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cinematic bars — deaktiviert */
.ar-bar-top,
.ar-bar-bottom {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. SCROLL-REVEAL — AE-Stil Fade + Slide In (IntersectionObserver)
   ────────────────────────────────────────────────────────────────────────── */

/* Base: unsichtbar bis Observer sie sieht */
.ar-reveal,
.ar-reveal-left,
.ar-reveal-right,
.ar-reveal-scale,
.ar-reveal-blur {
  opacity: 0;
  will-change: transform, opacity;
}

/* Von unten einblenden */
.ar-reveal {
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Von links */
.ar-reveal-left {
  transform: translateX(-50px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Von rechts */
.ar-reveal-right {
  transform: translateX(50px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scale-In (Spring) */
.ar-reveal-scale {
  transform: scale(0.88) translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.34, 1.3, 0.64, 1),
              transform 0.65s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* Blur-Reveal */
.ar-reveal-blur {
  transform: translateY(25px);
  filter: blur(8px);
  transition: opacity 0.75s ease,
              transform 0.75s ease,
              filter 0.75s ease;
}

/* Sichtbar-State */
.ar-reveal.is-visible,
.ar-reveal-left.is-visible,
.ar-reveal-right.is-visible,
.ar-reveal-scale.is-visible,
.ar-reveal-blur.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Verzögerungen für Stagger */
.ar-delay-1 { transition-delay: 0.1s !important; }
.ar-delay-2 { transition-delay: 0.2s !important; }
.ar-delay-3 { transition-delay: 0.3s !important; }
.ar-delay-4 { transition-delay: 0.4s !important; }
.ar-delay-5 { transition-delay: 0.5s !important; }
.ar-delay-6 { transition-delay: 0.6s !important; }

/* ──────────────────────────────────────────────────────────────────────────
   3. HERO HEADLINE — Zeile 1: Slide-Up, Zeile 2: Letter-Spacing Reveal
   ────────────────────────────────────────────────────────────────────────── */

/* Zeile 1: "Kunden kaufen keine Leistungen." */
.ar-hero-line1 {
  display: block;
  opacity: 1;
}

/* Zeile 2: "Sie kaufen Sicherheit." */
.ar-hero-line2 {
  display: inline-block;
  opacity: 1;
}

/* Mask Reveal (alte Klasse — als Fallback behalten) */
.ar-mask-reveal {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: arMaskReveal 1.1s 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes arMaskReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}

/* Letter-Spacing Reveal (alte Klasse — als Fallback behalten) */
.ar-letter-reveal {
  display: inline-block;
  opacity: 0;
  animation: arLetterReveal 0.9s 0.8s ease forwards;
}

@keyframes arLetterReveal {
  from {
    opacity: 0;
    letter-spacing: -0.3em;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    letter-spacing: inherit;
    filter: blur(0);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   4. GLITCH EFFEKT — RGB Split (für Akzent-Wörter)
   ────────────────────────────────────────────────────────────────────────── */

/* Glitch Effekt — deaktiviert */
.ar-glitch {
  position: relative;
  display: inline-block;
}

.ar-glitch::before,
.ar-glitch::after {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. HERO KACHELN — Stagger Spring Pop-In
   ────────────────────────────────────────────────────────────────────────── */

.ar-stagger-item {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.55s cubic-bezier(0.34, 1.3, 0.64, 1),
              transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.ar-stagger-item.is-visible {
  opacity: 1;
  transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. FLOATING PARTICLES — Hero Background
   ────────────────────────────────────────────────────────────────────────── */

.ar-particle {
  display: none;
}

@keyframes arFloat {
  0%, 100% {
    transform: translateY(0)   translateX(0)   scale(1);
  }
  33% {
    transform: translateY(-30px) translateX(15px) scale(1.1);
  }
  66% {
    transform: translateY(-15px) translateX(-20px) scale(0.9);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   7. MOTION BLUR SLIDE — für Service-Karten
   ────────────────────────────────────────────────────────────────────────── */

.ar-motion-in {
  opacity: 0;
  transform: translateX(-60px);
  filter: blur(6px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.6s ease;
}

.ar-motion-in.is-visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* ──────────────────────────────────────────────────────────────────────────
   8. 3D FLOAT — für Hero-Grafik Panel
   ────────────────────────────────────────────────────────────────────────── */

.ar-float-3d {
  animation: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   9. SVG PATH DRAW — für Dekor-Elemente
   ────────────────────────────────────────────────────────────────────────── */

.ar-draw-path {
  stroke-dashoffset: var(--len, 500);
  stroke-dasharray:  var(--len, 500);
}

.ar-draw-path.is-visible {
  animation: arDrawPath 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes arDrawPath {
  to { stroke-dashoffset: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   10. COUNTER ANIMATION — Stats Zahlen
   ────────────────────────────────────────────────────────────────────────── */

.ar-counter-val {
  display: inline-block;
}

/* ──────────────────────────────────────────────────────────────────────────
   11. TYPEWRITER CURSOR
   ────────────────────────────────────────────────────────────────────────── */

.ar-cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #00d4ff;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: arBlink 0.8s steps(1) infinite;
}

@keyframes arBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   12. CUSTOM CURSOR — Leuchtkugel mit Trail
   ────────────────────────────────────────────────────────────────────────── */

#ar-cursor-dot,
#ar-cursor-ring {
  display: none;
}

/* Trail Dot */
.ar-trail-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  animation: arTrailFade 0.5s forwards;
}

@keyframes arTrailFade {
  from { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0;   transform: translate(-50%, -50%) scale(0.1); }
}

/* ──────────────────────────────────────────────────────────────────────────
   13. RIPPLE GLOW — Pulsierender Glow auf CTA-Buttons
   ────────────────────────────────────────────────────────────────────────── */

.ar-ripple-glow {
  position: relative;
}

.ar-ripple-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.5);
  animation: arRipple 2s ease-out infinite;
}

@keyframes arRipple {
  0%   { box-shadow: 0 0 0 0   rgba(0, 212, 255, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(0, 212, 255, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(0, 212, 255, 0);   }
}

/* ──────────────────────────────────────────────────────────────────────────
   14. HOVER SPRING — Kacheln federn beim Hover
   ────────────────────────────────────────────────────────────────────────── */

.ar-spring-hover {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease !important;
}

.ar-spring-hover:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   15. WIPE REVEAL — Sections, Überschriften
   ────────────────────────────────────────────────────────────────────────── */

.ar-wipe {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.ar-wipe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, #0a0a14 50%);
  transform: translateX(0);
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

.ar-wipe.is-visible::after {
  transform: translateX(110%);
}

/* ──────────────────────────────────────────────────────────────────────────
   16. SECTION TITLE LINE — Linie zieht sich auf
   ────────────────────────────────────────────────────────────────────────── */

.ar-underline-anim {
  position: relative;
  display: inline-block;
}

.ar-underline-anim::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #8b5cf6);
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.ar-underline-anim.is-visible::after {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   17. IRIS WIPE — für Card-Bilder
   ────────────────────────────────────────────────────────────────────────── */

.ar-iris {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.ar-iris.is-visible {
  clip-path: circle(75% at 50% 50%);
}

/* ──────────────────────────────────────────────────────────────────────────
   18. BACKGROUND GRADIENT SHIFT — Sektion-Hintergrund atmet
   ────────────────────────────────────────────────────────────────────────── */

.ar-bg-shift {
  background-size: 300% 300%;
  animation: arBgShift 8s ease infinite;
}

@keyframes arBgShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   19. LOADING SHIMMER — für Karten/Bilder beim Laden
   ────────────────────────────────────────────────────────────────────────── */

.ar-shimmer {
  position: relative;
  overflow: hidden;
}

.ar-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: arShimmer 2s ease-in-out infinite;
}

@keyframes arShimmer {
  to { transform: translateX(100%); }
}

/* ──────────────────────────────────────────────────────────────────────────
   20. NEON GLOW TEXT — für Badge / Highlights
   ────────────────────────────────────────────────────────────────────────── */

.ar-neon {
  animation: arNeonPulse 3s ease-in-out infinite;
}

@keyframes arNeonPulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.7),
                 0 0 20px rgba(0, 212, 255, 0.4);
  }
  50% {
    text-shadow: 0 0 16px rgba(0, 212, 255, 1),
                 0 0 40px rgba(0, 212, 255, 0.6),
                 0 0 80px rgba(0, 212, 255, 0.3);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   21. SPEED DROP — Elemente fallen mit Blur ein
   ────────────────────────────────────────────────────────────────────────── */

.ar-speed-drop {
  opacity: 0;
  animation: arSpeedDrop 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
  animation-play-state: paused;
}

.ar-speed-drop.is-visible {
  animation-play-state: running;
}

@keyframes arSpeedDrop {
  0%   { transform: translateY(-60px) scaleY(1.3); filter: blur(5px); opacity: 0; }
  70%  { transform: translateY(4px)   scaleY(0.96); filter: blur(0.5px); opacity: 1; }
  100% { transform: translateY(0)     scaleY(1);   filter: blur(0);   opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────────────────
   22. REDUCED MOTION — Barrierefreiheit
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ar-reveal,
  .ar-reveal-left,
  .ar-reveal-right,
  .ar-reveal-scale,
  .ar-reveal-blur,
  .ar-stagger-item,
  .ar-motion-in,
  .ar-float-3d,
  .ar-speed-drop,
  .ar-mask-reveal,
  .ar-letter-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .ar-bar-top,
  .ar-bar-bottom {
    display: none;
  }

  #ar-cursor-dot,
  #ar-cursor-ring {
    display: none;
  }
}