/* ============================================================
   diekreadiven — animations.css
   Tiers included per decision table:
   ALWAYS: reveals, hero entrance, accordion, toast
   SECTION: marquee, stats counter, svg path draw
   STYLE (Playful): float, card tilt
   (Text-line-reveal & parallax intentionally OMITTED)
   ============================================================ */

/* ---------- TIER 1 — ALWAYS ---------- */

/* Scroll reveals */
.reveal       { opacity: 0; transform: translateY(28px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-fade  { opacity: 0; transition: opacity var(--t-slow); }
.reveal-left  { opacity: 0; transform: translateX(-24px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-right { opacity: 0; transform: translateX(24px);  transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.visible, .reveal-fade.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }

.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal-stagger.visible > *:nth-child(1){ opacity:1; transform:none; transition-delay:0ms }
.reveal-stagger.visible > *:nth-child(2){ opacity:1; transform:none; transition-delay:80ms }
.reveal-stagger.visible > *:nth-child(3){ opacity:1; transform:none; transition-delay:160ms }
.reveal-stagger.visible > *:nth-child(4){ opacity:1; transform:none; transition-delay:240ms }
.reveal-stagger.visible > *:nth-child(5){ opacity:1; transform:none; transition-delay:320ms }
.reveal-stagger.visible > *:nth-child(6){ opacity:1; transform:none; transition-delay:400ms }

/* Hero entrance */
@keyframes heroIn { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }
.hero-animate { opacity: 0; animation: heroIn .8s var(--ease-out) forwards; }
.hero-animate:nth-child(1){ animation-delay:.10s }
.hero-animate:nth-child(2){ animation-delay:.22s }
.hero-animate:nth-child(3){ animation-delay:.34s }
.hero-animate:nth-child(4){ animation-delay:.46s }
.hero-animate.d1 { animation-delay:.10s } .hero-animate.d2 { animation-delay:.22s }
.hero-animate.d3 { animation-delay:.34s } .hero-animate.d4 { animation-delay:.46s }
.hero-animate.d5 { animation-delay:.58s }

/* Smooth accordion (grid trick) */
.accordion-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base);
}
.accordion-body.open { grid-template-rows: 1fr; }
.accordion-body > * { overflow: hidden; }

/* ---------- TIER 2 — SECTION-CONDITIONAL ---------- */

/* Marquee (Kunden logo strip) */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* SVG path draw (process steps) */
.draw-path {
  stroke-dasharray: var(--path-length, 300);
  stroke-dashoffset: var(--path-length, 300);
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.draw-path.visible { stroke-dashoffset: 0; }

/* Stats counter inherits text styles — no extra CSS needed */

/* ---------- TIER 3 — STYLE-CONDITIONAL (Playful) ---------- */

/* Float — hero decorative cards only (max 2 floating clusters) */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float       { animation: float 4s ease-in-out infinite; }
.float-slow  { animation: float 5.5s ease-in-out infinite; }
.float-delay { animation-delay: 1.2s; }

/* Card tilt handled in JS (.tilt-card mousemove) */
.tilt-card { transition: transform var(--t-base), box-shadow var(--t-base); will-change: transform; }

/* ---------- REDUCED MOTION (always last) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal, .reveal-fade, .reveal-left, .reveal-right, .reveal-stagger > *, .draw-path
    { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .hero-animate { opacity: 1 !important; }
  .marquee-track { animation: none; }
  .float, .float-slow { animation: none; }
  /* Rotating word: show the active word, no sliding */
  .rotator-word { transition: none !important; }
  .rotator-word:not(.is-active) { opacity: 0 !important; }
  .rotator-word.is-active { transform: none !important; opacity: 1 !important; }
}
