/**
 * IIO Scroll Animations — Intersection Observer Masterclass
 * Classification: own | Version: 1.0.0
 *
 * Klassen für Animation-Targets:
 *   .reveal           — Standard Fade+Slide von unten
 *   .reveal-left      — Slide von links
 *   .reveal-right     — Slide von rechts
 *   .reveal-scale     — Scale + Fade
 *   .reveal-blur      — Blur → scharf
 *   .stagger-children — Kinder werden nacheinander eingeblendet
 *   .parallax         — Parallax-Effekt (via JS)
 *
 * JavaScript: scroll-animations.js (auto-init)
 */

/* ── Base: alles beginnt unsichtbar ────────────────────────────────────────── */
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Ausgangs-Zustände */
.reveal          { transform: translateY(28px); }
.reveal-left     { transform: translateX(-32px); }
.reveal-right    { transform: translateX(32px); }
.reveal-scale    { transform: scale(0.92); }
.reveal-blur     { transform: translateY(12px); filter: blur(8px); }

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

/* Stagger Delays */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children > *:nth-child(8) { transition-delay: 560ms; }
.stagger-children > *:nth-child(n+9) { transition-delay: 600ms; }

/* Fast variants */
.reveal.fast, .reveal-left.fast, .reveal-right.fast,
.reveal-scale.fast, .reveal-blur.fast {
  transition-duration: 400ms;
}

/* Slow variants */
.reveal.slow, .reveal-left.slow, .reveal-right.slow {
  transition-duration: 1100ms;
}

/* ── Counter Animation ──────────────────────────────────────────────────────── */
.count-up { font-variant-numeric: tabular-nums; }

/* ── Highlight Underline ────────────────────────────────────────────────────── */
.highlight-underline {
  background-image: linear-gradient(var(--orange, #ff8800), var(--orange, #ff8800));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.highlight-underline.is-visible { background-size: 100% 2px; }

/* ── Typing Cursor ──────────────────────────────────────────────────────────── */
.typing-effect::after {
  content: '▌';
  color: var(--orange, #ff8800);
  animation: blink .8s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Glow on Reveal ─────────────────────────────────────────────────────────── */
.reveal-glow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal-glow.is-visible {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 40px rgba(255, 136, 0, 0.15);
}

/* ── Section Entrance ───────────────────────────────────────────────────────── */
.section-entrance {
  opacity: 0;
  transition: opacity 500ms ease;
}
.section-entrance.is-visible { opacity: 1; }

/* ── Floating ───────────────────────────────────────────────────────────────── */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.float-gentle { animation: float-gentle 4s ease-in-out infinite; }
.float-gentle:nth-child(2) { animation-delay: -1.3s; }
.float-gentle:nth-child(3) { animation-delay: -2.7s; }

/* ── Parallax Container ─────────────────────────────────────────────────────── */
.parallax-container { overflow: hidden; }
.parallax-layer     { will-change: transform; }

/* ── Number Ticker ──────────────────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  display: inline-block;
  height: 1.2em;
  line-height: 1.2em;
  vertical-align: bottom;
}
.ticker-inner {
  display: flex;
  flex-direction: column;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Fade-in Grid ───────────────────────────────────────────────────────────── */
.grid-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.grid-stagger.is-visible > * { opacity: 1; transform: none; }
.grid-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.grid-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.grid-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.grid-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.grid-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.grid-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }

/* ── Prefers-Reduced-Motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur,
  .reveal-glow, .section-entrance, .grid-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .float-gentle { animation: none; }
}