/* ============================================================
   ANIMATIONS — RedCastle Landingpage
   Six professional, scroll-triggered effects.
   All respect prefers-reduced-motion.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Hero: staggered headline + lead + video + CTA reveal ---------- */
  .hero h1 > br + .accent,
  .hero h1,
  .hero .lead,
  .hero-video,
  .hero-cta-row,
  .hero-stats,
  .hero-side { will-change: opacity, transform; }

  .hero h1 { opacity: 0; transform: translateY(28px); filter: blur(6px); animation: heroIn 2000ms 200ms var(--ease-out) forwards; }
  .hero .lead { opacity: 0; transform: translateY(20px); animation: heroIn 1800ms 800ms var(--ease-out) forwards; }
  .hero-video { opacity: 0; transform: translateY(28px) scale(0.985); animation: heroVideoIn 1800ms 1100ms var(--ease-out) forwards; }
  .hero-cta-row { opacity: 0; transform: translateY(18px); animation: heroIn 1600ms 1400ms var(--ease-out) forwards; }
  .hero-stats { opacity: 0; transform: translateY(18px); animation: heroIn 1800ms 1700ms var(--ease-out) forwards; }

  /* SOC dashboard widget flies in from right — slower, more cinematic */
  .hero-side {
    opacity: 0;
    transform: translateX(140px);
    animation: heroSideIn 2600ms 900ms var(--ease-out) forwards;
  }
  @keyframes heroSideIn {
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes heroIn {
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  @keyframes heroVideoIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Accent word — kept inline; no underline animation */
  .hero h1 .accent { color: var(--rc-blutrot); display: inline; }

  /* ---------- 2. Hero: pulsing flag on the fortress silhouette ---------- */
  .hero-silhouette svg path[fill="#e30613"],
  .hero-silhouette svg rect[fill="#e30613"] {
    transform-origin: 885px 12px;
    animation: flagWave 4.2s ease-in-out infinite;
  }
  @keyframes flagWave {
    0%,100% { transform: skewX(0) scaleX(1); }
    50%     { transform: skewX(-8deg) scaleX(0.92); }
  }

  /* Subtle parallax-like slow drift of the silhouette */
  .hero-silhouette { animation: silhouetteDrift 18s ease-in-out infinite alternate; }
  @keyframes silhouetteDrift {
    from { transform: translateX(-12px); }
    to   { transform: translateX(12px); }
  }

  /* Glow pulses gently */
  .hero-glow { animation: glowPulse 6s ease-in-out infinite; }
  @keyframes glowPulse {
    0%,100% { opacity: 0.7; }
    50%     { opacity: 1; }
  }

  /* ---------- 3. Reveal-on-scroll primitive ---------- */
  /* Applied via JS by toggling .is-visible on [data-reveal] elements. */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 1600ms var(--ease-out),
      transform 1600ms var(--ease-out),
      filter 1600ms var(--ease-out);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger via inline --i custom property */
  [data-reveal] { transition-delay: calc(var(--i, 0) * 220ms); }

  /* ---------- Reveal variants ---------- */
  [data-reveal="left"]  { transform: translateX(-32px); }
  [data-reveal="left"].is-visible  { transform: translateX(0); }
  [data-reveal="right"] { transform: translateX(32px); }
  [data-reveal="right"].is-visible { transform: translateX(0); }
  [data-reveal="scale"] { transform: translateY(18px) scale(0.96); }
  [data-reveal="scale"].is-visible { transform: translateY(0) scale(1); }

  /* Pain cards: alternating columns slide in from left/right simultaneously */
  .pain-card:nth-child(3n+1) { transform: translateX(-110px); }
  .pain-card:nth-child(3n+1).is-visible { transform: translateX(0); }
  .pain-card:nth-child(3n+3) { transform: translateX(110px); }
  .pain-card:nth-child(3n+3).is-visible { transform: translateX(0); }
  /* middle column keeps default translateY */

  /* ---------- 4. Pain cards: hover lift + icon tilt ---------- */
  /* Reveal nutzt 'transform' (langsam), Hover-Lift nutzt die separate
     'translate'-Property (schnell) — so kollidieren die Transitions nicht. */
  .pain-card {
    transition-property: opacity, transform, background, box-shadow, translate;
    transition-duration: 2400ms, 2400ms, 200ms, 420ms, 420ms;
    transition-timing-function: var(--ease-out);
    transition-delay: calc(var(--i, 0) * 220ms), calc(var(--i, 0) * 220ms), 0ms, 0ms, 0ms;
  }
  .pain-card:hover {
    translate: 0 -4px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.35);
  }
  .pain-card .icon {
    transition: transform 500ms var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .pain-card:hover .icon {
    transform: rotate(-6deg) scale(1.08);
  }

  /* ---------- 5. Steps: animated connecting line + numbered pop-in ---------- */
  .steps::before {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 2400ms 300ms var(--ease-out);
  }
  .steps.is-visible::before { transform: scaleX(1); }

  .step {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1400ms var(--ease-out), transform 1400ms var(--ease-out);
  }
  .steps.is-visible .step { opacity: 1; transform: translateY(0); }
  .steps.is-visible .step:nth-child(1) { transition-delay: 200ms; }
  .steps.is-visible .step:nth-child(2) { transition-delay: 500ms; }
  .steps.is-visible .step:nth-child(3) { transition-delay: 800ms; }
  .steps.is-visible .step:nth-child(4) { transition-delay: 1100ms; }

  .step-icon {
    transition: transform 500ms var(--ease-out);
  }
  .step:hover .step-icon { transform: scale(1.08) rotate(-3deg); }

  /* Ping dot on each step number once visible */
  .steps.is-visible .step-num {
    position: relative;
  }
  .steps.is-visible .step-num::after {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rc-blutrot);
    box-shadow: 0 0 0 0 rgba(227,6,19,0.6);
    animation: stepPulse 2.4s var(--ease-out) infinite;
  }
  .steps.is-visible .step:nth-child(1) .step-num::after { animation-delay: 0.4s; }
  .steps.is-visible .step:nth-child(2) .step-num::after { animation-delay: 0.7s; }
  .steps.is-visible .step:nth-child(3) .step-num::after { animation-delay: 1.0s; }
  .steps.is-visible .step:nth-child(4) .step-num::after { animation-delay: 1.3s; }
  @keyframes stepPulse {
    0%   { box-shadow: 0 0 0 0   rgba(227,6,19,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(227,6,19,0);    }
    100% { box-shadow: 0 0 0 0   rgba(227,6,19,0);    }
  }

  /* ---------- 6. Benefits: icon stroke trace + hover bloom ---------- */
  .benefit .icon {
    transition: transform 500ms var(--ease-out), color 300ms var(--ease-out);
  }
  .benefit:hover .icon {
    transform: scale(1.1) rotate(-4deg);
    color: var(--rc-skyblue);
  }
  .benefit .icon path,
  .benefit .icon circle,
  .benefit .icon rect {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 2200ms var(--ease-out);
  }
  .benefits.is-visible .benefit .icon path,
  .benefits.is-visible .benefit .icon circle,
  .benefits.is-visible .benefit .icon rect {
    stroke-dashoffset: 0;
  }
  .benefits.is-visible .benefit:nth-child(1) .icon * { transition-delay: 100ms; }
  .benefits.is-visible .benefit:nth-child(2) .icon * { transition-delay: 300ms; }
  .benefits.is-visible .benefit:nth-child(3) .icon * { transition-delay: 500ms; }
  .benefits.is-visible .benefit:nth-child(4) .icon * { transition-delay: 700ms; }

  /* ---------- Count-up numbers ---------- */
  .stat-num .counter {
    font-variant-numeric: tabular-nums;
    display: inline-block;
    min-width: 1ch;
  }

  /* ---------- Final CTA crenel "walking light" ---------- */
  .final-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle 140px at var(--cta-x, 30%) 0%, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
    z-index: 1;
    animation: walkLight 9s ease-in-out infinite alternate;
  }
  @keyframes walkLight {
    0%   { --cta-x: 10%;  }
    50%  { --cta-x: 90%;  }
    100% { --cta-x: 10%;  }
  }
  @property --cta-x {
    syntax: '<percentage>';
    initial-value: 30%;
    inherits: true;
  }

  /* ============================================================
     CTA WAVE — applied directly to button (not pseudo)
     Pseudo-based waves get clipped by .btn's overflow:hidden
     (which is needed for the shine sweep), so we animate the
     button's own box-shadow instead.
     ============================================================ */

  .btn-primary {
    animation: waveRed 3.4s linear infinite;
  }
  .btn-secondary,
  .btn-ghost-light {
    animation: waveSky 3.4s linear infinite;
  }
  .btn-on-red,
  .btn-on-red-ghost {
    animation: waveWhite 3.4s linear infinite;
  }

  /* Stagger neighbouring CTAs so the page doesn't pulse in unison */
  .hero-cta-row .btn:nth-of-type(2),
  .s4-cta-row .btn:nth-of-type(2),
  .actions .btn:nth-of-type(2) { animation-delay: -1.7s; }
  .s2-cta-row .btn { animation-delay: -0.8s; }
  .s3-kernaussage .btn { animation-delay: -2.3s; }

  @keyframes waveRed {
    0%   { box-shadow: 0 8px 22px rgba(227,6,19,0.28), 0 0 0 0   rgba(227,6,19,0.55); }
    100% { box-shadow: 0 8px 22px rgba(227,6,19,0.28), 0 0 0 40px rgba(227,6,19,0);    }
  }
  @keyframes waveSky {
    0%   { box-shadow: 0 0 0 0   rgba(125,212,248,0.55); }
    100% { box-shadow: 0 0 0 40px rgba(125,212,248,0);    }
  }
  @keyframes waveWhite {
    0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.55); }
    100% { box-shadow: 0 0 0 40px rgba(255,255,255,0);    }
  }

  /* Sticky CTA — same red wave, no overflow:hidden so we use shadow on element */
  .sticky-cta {
    animation: stickyWave 3s linear infinite;
  }
  @keyframes stickyWave {
    0%   { box-shadow: 0 18px 40px rgba(227,6,19,0.35), 0 0 0 1px rgba(255,255,255,0.04), 0 0 0 0   rgba(227,6,19,0.55); }
    100% { box-shadow: 0 18px 40px rgba(227,6,19,0.35), 0 0 0 1px rgba(255,255,255,0.04), 0 0 0 32px rgba(227,6,19,0);    }
  }

  /* Pause wave on hover so the shine sweep reads cleanly */
  .btn:hover,
  .sticky-cta:hover { animation-play-state: paused; }
  .btn { position: relative; overflow: hidden; isolation: isolate; }
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 700ms var(--ease-out);
    pointer-events: none;
  }
  .btn:hover::before { transform: translateX(120%); }
  .btn:active { transform: translateY(1px); }

  /* ---------- Header logo fade-in ---------- */
  .site-header { opacity: 0; transform: translateY(-12px); animation: headerIn 700ms 60ms var(--ease-out) forwards; }
  @keyframes headerIn { to { opacity: 1; transform: translateY(0); } }

}

/* ============================================================
   Reduced-motion fallback: keep things static but still readable
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .steps::before { transform: scaleX(1) !important; }
  .step { opacity: 1 !important; transform: none !important; }
  .benefit .icon path,
  .benefit .icon circle,
  .benefit .icon rect { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}