/* ============================================================
   DAUD RECYCLING - Animations
   Scroll Reveals, Parallax, Micro-interactions
   ============================================================ */

/* ---------- Scroll Reveal Base ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.8s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal variants */
.js .reveal--left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.8s cubic-bezier(.22,1,.36,1);
}

.reveal--left.visible {
  opacity: 1;
  transform: translateX(0);
}

.js .reveal--right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.8s cubic-bezier(.22,1,.36,1);
}

.reveal--right.visible {
  opacity: 1;
  transform: translateX(0);
}

.js .reveal--scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.8s cubic-bezier(.22,1,.36,1);
}

.reveal--scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.js .stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1),
              transform 0.6s cubic-bezier(.22,1,.36,1);
}

.stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger.visible > *:nth-child(3) { transition-delay: 200ms; }
.stagger.visible > *:nth-child(4) { transition-delay: 300ms; }
.stagger.visible > *:nth-child(5) { transition-delay: 400ms; }
.stagger.visible > *:nth-child(6) { transition-delay: 500ms; }

.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* H-6: .stagger.visible > * setzt transform:translateY(0) mit derselben
   Spezifitaet (0,2,0) wie .card:hover in style.css und steht spaeter im
   Cascade - der Hover-Lift (translateY(-8px)) wurde dadurch auf fast jeder
   Karte der Seite ueberschrieben, obwohl Schatten und Icon-Farbe im Hover
   korrekt umschalteten. Diese gezielt hoeher spezifische Regel (0,3,0)
   gewinnt gegenueber dem Stagger-Reset, ohne dessen Transition/Reveal-
   Mechanik anzufassen. */
.stagger.visible > .card:hover {
  transform: translateY(-8px);
}

/* ---------- Hero Animations ---------- */
.hero__tag {
  animation: heroFadeDown 0.8s 0.2s cubic-bezier(.22,1,.36,1) both;
}

.hero__title {
  animation: heroFadeUp 0.8s 0.4s cubic-bezier(.22,1,.36,1) both;
}

.hero__desc {
  animation: heroFadeUp 0.8s 0.6s cubic-bezier(.22,1,.36,1) both;
}

.hero__buttons {
  animation: heroFadeUp 0.8s 0.8s cubic-bezier(.22,1,.36,1) both;
}

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

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

/* ---------- Hero Background Zoom ---------- */
.hero__bg img {
  animation: heroZoom 20s linear infinite alternate;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

/* ---------- Grain Overlay ---------- */
.grain::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 3;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  opacity: .5;
}

/* ---------- Red Highlight Bar ---------- */
.red-bar {
  width: 60px;
  height: 4px;
  background: var(--clr-red);
  border-radius: 2px;
  margin-bottom: var(--sp-sm);
}

.red-bar--center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Parallax mouse effect on hero ---------- */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---------- Number Counter Animation ---------- */
.counter-item__number {
  transition: none;
}

/* ---------- Stripe/Line Pattern Background ---------- */
.pattern-lines {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(218,0,25,.03) 10px,
    rgba(218,0,25,.03) 20px
  );
}

/* ---------- Loading Spinner ---------- */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: var(--clr-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .reveal--left,
  .js .reveal--right,
  .js .reveal--scale,
  .js .stagger > * {
    opacity: 1;
    transform: none;
  }

  /* Bei reduzierter Bewegung laeuft initParallax() gar nicht erst an, es
     wird also nichts verschoben. Ohne Verschiebung braucht der Hintergrund
     keinen Ueberstand — deshalb buendig statt -20%. */
  .parallax-section__bg {
    inset: 0;
    transform: none;
  }

  .hero__bg img {
    animation: none;
  }
}