/* c5 — keyframes та reveal-хелпери */

@keyframes hazard-scroll{
  from{ background-position:0 0 }
  to{ background-position:62px 0 }
}
.hazard-marquee{ background-position:0 0; }

@keyframes beacon-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,196,0,.7) }
  70%{ box-shadow:0 0 0 9px rgba(255,196,0,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,196,0,0) }
}

@keyframes stamp-in{
  0%{ opacity:0; transform:scale(1.6) rotate(-10deg) }
  60%{ opacity:1; transform:scale(.92) rotate(-6deg) }
  100%{ opacity:1; transform:scale(1) rotate(-6deg) }
}

@keyframes draw-check{
  to{ stroke-dashoffset:0 }
}

@keyframes ticker-move{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

/* reveal — використовується разом з GSAP, але має CSS-фолбек без JS */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) }
.reveal.is-visible{ opacity:1; transform:translateY(0) }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .6s var(--ease-out), transform .6s var(--ease-stamp) }
.reveal-scale.is-visible{ opacity:1; transform:scale(1) }

.js-hero-title{ opacity:0; transform:scale(1.5) rotate(-4deg); }
.js-hero-title.is-stamped{ animation:stamp-in .7s var(--ease-stamp) forwards }

.hz-line{ stroke-dasharray:1000; stroke-dashoffset:1000 }
.hz-line.is-drawn{ transition:stroke-dashoffset 1.4s var(--ease-out) }
.hz-line.is-drawn{ stroke-dashoffset:0 }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important }
  .js-hero-title{ opacity:1 !important; transform:none !important; animation:none !important }
  .hazard-divider--anim{ animation:none !important }
  .beacon-dot{ animation:none !important }
}