/* ============================================================
   AT Germany — Animations
   Keyframes · Scroll-Reveal · Hover-Patterns · Page-Transitions
   ============================================================ */

@layer components {

  /* ── Pulse Dot (Eyebrows) ─────────────────────────────── */
  @keyframes pulse-dot {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 172, 171, 0.6);
    }
    50% {
      opacity: 0.6;
      transform: scale(0.85);
      box-shadow: 0 0 0 8px rgba(0, 172, 171, 0);
    }
  }

  /* ── Float (Scroll-Hint) ──────────────────────────────── */
  @keyframes float-y {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
    50%      { transform: translate(-50%, 8px); opacity: 1; }
  }

  /* ── Marquee Infinite ─────────────────────────────────── */
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ── Spinner (Form Submit) ────────────────────────────── */
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* ── Menu Item In ─────────────────────────────────────── */
  @keyframes menu-item-in {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── Hero Word Reveal ─────────────────────────────────── */
  @keyframes word-reveal {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
  }

  /* ══════════════════════════════════════════════════════
     SCROLL-REVEAL PATTERNS
     ══════════════════════════════════════════════════════ */

  [data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
  }

  [data-reveal="up"] {
    transform: translateY(36px);
    transition:
      opacity var(--d-slower) var(--e-expo-out),
      transform var(--d-slower) var(--e-expo-out);
  }

  [data-reveal="down"] {
    transform: translateY(-36px);
    transition:
      opacity var(--d-slower) var(--e-expo-out),
      transform var(--d-slower) var(--e-expo-out);
  }

  [data-reveal="left"] {
    transform: translateX(-36px);
    transition:
      opacity var(--d-slower) var(--e-expo-out),
      transform var(--d-slower) var(--e-expo-out);
  }

  [data-reveal="right"] {
    transform: translateX(36px);
    transition:
      opacity var(--d-slower) var(--e-expo-out),
      transform var(--d-slower) var(--e-expo-out);
  }

  [data-reveal="scale"] {
    transform: scale(0.94);
    transition:
      opacity var(--d-slower) var(--e-expo-out),
      transform var(--d-slower) var(--e-spring);
  }

  [data-reveal="blur"] {
    filter: blur(12px);
    transition:
      opacity var(--d-slower) var(--e-expo-out),
      filter var(--d-slower) var(--e-expo-out);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }

  /* Stagger Delays */
  [data-reveal-delay="1"]  { transition-delay: 0.05s; }
  [data-reveal-delay="2"]  { transition-delay: 0.10s; }
  [data-reveal-delay="3"]  { transition-delay: 0.15s; }
  [data-reveal-delay="4"]  { transition-delay: 0.20s; }
  [data-reveal-delay="5"]  { transition-delay: 0.25s; }
  [data-reveal-delay="6"]  { transition-delay: 0.30s; }
  [data-reveal-delay="7"]  { transition-delay: 0.35s; }
  [data-reveal-delay="8"]  { transition-delay: 0.40s; }

  /* ══════════════════════════════════════════════════════
     HERO INTRO — starts after Loader fades (body.is-revealed)
     ══════════════════════════════════════════════════════ */

  .hero__label,
  .hero__subtitle,
  .hero__ctas,
  .hero__subnote {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
  }

  body.is-revealed .hero__label,
  body.is-revealed .hero__subtitle,
  body.is-revealed .hero__ctas,
  body.is-revealed .hero__subnote {
    animation: hero-fade-up 1s var(--e-expo-out) forwards;
  }

  body.is-revealed .hero__label    { animation-delay: 0.20s; }
  body.is-revealed .hero__subtitle { animation-delay: 1.30s; }
  body.is-revealed .hero__ctas     { animation-delay: 1.55s; }
  body.is-revealed .hero__subnote  { animation-delay: 1.75s; }

  @keyframes hero-fade-up {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Hero Title — Line-by-Line Reveal (4 lines staggered) */
  .hero__title .word__inner { transform: translateY(110%); }

  body.is-revealed .hero__title .word__inner {
    animation: word-reveal 1.1s var(--e-expo-out) forwards;
  }

  body.is-revealed .hero__title .line:nth-child(1) .word:nth-child(1) .word__inner { animation-delay: 0.50s; }
  body.is-revealed .hero__title .line:nth-child(1) .word:nth-child(3) .word__inner { animation-delay: 0.62s; }
  body.is-revealed .hero__title .line:nth-child(2) .word .word__inner              { animation-delay: 0.78s; }
  body.is-revealed .hero__title .line:nth-child(3) .word:nth-child(1) .word__inner { animation-delay: 0.96s; }
  body.is-revealed .hero__title .line:nth-child(3) .word:nth-child(3) .word__inner { animation-delay: 1.06s; }

  /* ══════════════════════════════════════════════════════
     SHIMMER (Loading Skeleton)
     ══════════════════════════════════════════════════════ */

  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .skeleton {
    background: linear-gradient(
      90deg,
      var(--surface-200) 0%,
      var(--surface-300) 50%,
      var(--surface-200) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
    border-radius: var(--radius-md);
  }

  /* ══════════════════════════════════════════════════════
     GRADIENT-ANIMATION (Hero-Mesh)
     ══════════════════════════════════════════════════════ */

  @keyframes mesh-drift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-2%, 1%) scale(1.04); }
    66%  { transform: translate(1%, -1.5%) scale(0.98); }
    100% { transform: translate(0, 0) scale(1); }
  }

  .hero__bg {
    animation: mesh-drift 24s var(--e-ease) infinite;
    will-change: transform;
  }

  /* ══════════════════════════════════════════════════════
     COUNTER (Stats)
     ══════════════════════════════════════════════════════ */

  .stat__value {
    transition: opacity var(--d-base) var(--e-out);
  }

  .stats:not(.has-animated) .stat__value {
    opacity: 0.4;
  }

  /* ══════════════════════════════════════════════════════
     VIEW TRANSITIONS API (Progressive Enhancement)
     ══════════════════════════════════════════════════════ */

  @supports (view-transition-name: a) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.4s;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
  }

  /* ══════════════════════════════════════════════════════
     REDUCED MOTION FALLBACKS
     ══════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal="up"],
    [data-reveal="down"],
    [data-reveal="left"],
    [data-reveal="right"],
    [data-reveal="scale"],
    [data-reveal="blur"] {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
    }

    .hero__bg,
    .pulse-dot,
    .trust-bar__track,
    .testimonials__track {
      animation: none !important;
    }

    .hero__label,
    .hero__subtitle,
    .hero__ctas,
    .hero__subnote,
    .hero__title .word__inner {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }

    .loader,
    .loader__mark,
    .loader__bar span {
      animation: none !important;
    }
  }
}