/* ============================================================
   ANIMATIONS — Fetching Fortunes × E Summit
   ============================================================ */

/* ── Entrance Animations ────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Ambient / Loop Animations ──────────────────────────── */
@keyframes rotateFloat {
  0%   { transform: rotate(0deg) translateY(0px); }
  25%  { transform: rotate(3deg) translateY(-12px); }
  50%  { transform: rotate(0deg) translateY(-20px); }
  75%  { transform: rotate(-3deg) translateY(-12px); }
  100% { transform: rotate(0deg) translateY(0px); }
}

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

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

@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241,93,12,0); }
  50%       { box-shadow: 0 0 0 6px rgba(241,93,12,0.18); }
}

/* ── Scroll-reveal classes ──────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.72s cubic-bezier(.22,.68,0,1.2),
              transform 0.72s cubic-bezier(.22,.68,0,1.2);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.45s; }

/* ── Hero animations (play immediately) ─────────────────── */
.hero-badge  { animation: fadeUp  0.7s ease both; animation-delay: 0.15s; }
.hero-title  { animation: fadeUp  0.8s ease both; animation-delay: 0.30s; }
.hero-sub    { animation: fadeUp  0.8s ease both; animation-delay: 0.48s; }
.hero-cta    { animation: fadeUp  0.8s ease both; animation-delay: 0.62s; }
.scroll-hint { animation: fadeIn  1.0s ease both, float-hint 2.8s 1.2s ease-in-out infinite; }
.hero-star   { animation: rotateFloat 14s ease-in-out infinite; }

@keyframes float-hint {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: 0.3; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 0.5; }
}

/* ── Stats strip ticker ─────────────────────────────────── */
.stats-ticker {
  display: flex;
  gap: 0;
  animation: ticker 28s linear infinite;
  will-change: transform;
}
.stats-ticker:hover { animation-play-state: paused; }

/* ── Process step hover ──────────────────────────────────── */
.process-step:hover .step-node {
  border-color: var(--tan);
  box-shadow: 0 0 0 6px rgba(241,93,12,0.12);
}
.process-step:hover .step-name { color: var(--tan); }

/* ── Number counter animation ────────────────────────────── */
.count-up {
  display: inline-block;
  transition: all 0.3s;
}

/* ── Glowing CTA button ──────────────────────────────────── */
.btn-glow {
  animation: borderPulse 3s ease-in-out infinite;
}

/* ── Header scroll state ─────────────────────────────────── */
.site-header.scrolled {
  background: rgba(13,23,40,0.96);
  border-bottom-color: rgba(241,93,12,0.22);
}

/* ── Mobile nav overlay ──────────────────────────────────── */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--blue);
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(.77,0,.18,1);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: color 0.2s;
}
.mobile-nav a:hover { color: var(--tan); }

/* ── Hamburger ───────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 860px) {
  .hamburger { display: flex; }
}