/* ══════════════════════════════════════════════════════════════════
   CLICKBAIT — ANIMATIONS
   Custom keyframes + a CSS-only fallback for the AOS scroll library.
   If AOS ever fails to load (offline, CDN blocked), the fallback at the
   bottom guarantees every element is still visible.
   ══════════════════════════════════════════════════════════════════ */


/* Pulsing ring behind the video play buttons */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0    rgba(255, 198, 0, .55); }
  70%  { box-shadow: 0 0 0 20px rgba(255, 198, 0, 0); }
  100% { box-shadow: 0 0 0 0    rgba(255, 198, 0, 0); }
}

/* Slow breathing glow used behind the hero and final CTA */
@keyframes breathe {
  0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.06); }
}
.hero__glow,
.cta__glow { animation: breathe 9s ease-in-out infinite; }

/* Gentle float — add class="float" to any element you want to bob */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.float { animation: float 5s ease-in-out infinite; }

/* Shine sweep across primary buttons on hover */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, .55),
    transparent
  );
  transform: skewX(-20deg);
  transition: left .7s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }

/* Underline reveal for footer headings */
.footer__head { position: relative; padding-bottom: 10px; }
.footer__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 2px;
  background: var(--accent);
}

/* FAQ answer slide-down */
.faq__item[open] .faq__a {
  animation: faq-open .35s var(--ease);
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── AOS FALLBACK ─────────────────────────────────────────────────
   AOS hides elements with its own CSS then reveals them with JS.
   If its stylesheet loads but the script does not, elements would stay
   invisible. `.no-aos` is set by js/main.js when AOS is unavailable.
   ────────────────────────────────────────────────────────────────── */
.no-aos [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}