/* ====================================================
   animations.css v1
   Micro-interactions & scroll reveals for 404 Club.
   Does NOT touch layout, typography or existing hovers.
   ==================================================== */


/* ============================
   KEYFRAMES
   ============================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero ball: translateX(-50%) must stay in keyframes or it overrides CSS */
@keyframes heroFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-16px); }
}

/* Pleasure illustration: same translateX(-50%) pattern */
@keyframes pleasureFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-14px); }
}

@keyframes simpleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}


/* ============================
   PAGE LOAD — HERO
   ============================ */

.hero__header {
  animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__footer {
  animation: fadeIn 0.6s ease 0.55s both;
}

/* Title & badges only at ≥769px — mobile has absolute transforms that conflict */
@media (min-width: 769px) {
  .hero__title       { animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
  .hero__badge--left { animation: fadeIn 0.6s ease 0.35s both; }
  .hero__badge--right{ animation: fadeIn 0.6s ease 0.5s both; }
}


/* ============================
   PAGE LOAD — APPLICATION
   ============================ */

.app {
  animation: fadeIn 0.65s ease both;
}


/* ============================
   PAGE LOAD — IBAN
   ============================ */

.pay {
  animation: fadeIn 0.65s ease both;
}


/* ============================
   AMBIENT: FLOATING ELEMENTS
   ============================ */

/* Hero ball — starts after initial load settle */
.hero__ball {
  animation: heroFloat 7s ease-in-out 1.2s infinite;
}

/* Pleasure illustration */
.pleasure__image {
  animation: pleasureFloat 9s ease-in-out 0.5s infinite;
}

/* Footer round ball */
.footer-img {
  animation: simpleFloat 7s ease-in-out 0.5s infinite;
}


/* ============================
   STACKING CONTEXT FIXES
   Opacity transitions on .reveal create temporary stacking
   contexts that can push absolutely-positioned siblings under.
   Explicit z-index keeps them consistently on top.
   ============================ */

.community__note,
.community__sym {
  z-index: 1;
}


/* ============================
   SCROLL REVEAL
   Gated by .js so content stays
   visible when JS is disabled.
   ============================ */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* ============================
   BURGER MENU — CONTENT STAGGER
   Content fades up after the
   panel finishes sliding in.
   ============================ */

.burger-menu__logo,
.burger-menu__nav,
.burger-menu__cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.burger-menu--open .burger-menu__logo {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

.burger-menu--open .burger-menu__nav {
  opacity: 1;
  transform: none;
  transition-delay: 0.26s;
}

.burger-menu--open .burger-menu__cta {
  opacity: 1;
  transform: none;
  transition-delay: 0.34s;
}


/* ============================
   REDUCED MOTION
   ============================ */

@media (prefers-reduced-motion: reduce) {
  /* Kill all keyframe animations */
  .hero__header,
  .hero__title,
  .hero__badge--left,
  .hero__badge--right,
  .hero__footer,
  .hero__ball,
  .pleasure__image,
  .footer-img,
  .app,
  .pay {
    animation: none !important;
  }

  /* Reveal instantly */
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Burger: no stagger, always visible */
  .burger-menu__logo,
  .burger-menu__nav,
  .burger-menu__cta,
  .burger-menu--open .burger-menu__logo,
  .burger-menu--open .burger-menu__nav,
  .burger-menu--open .burger-menu__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}