/* ═══════════════════════════════════════════════
   ANIMATIONS.CSS — Keyframes & Motion
═══════════════════════════════════════════════ */

/* ── Entry animations ──────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

/* ── Background animations ─────────────────── */
@keyframes gridDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

@keyframes morphShape {
  0%,  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25%        { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50%        { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75%        { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
}

@keyframes rotateBorder {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ── Ocean animations ──────────────────────── */
@keyframes waveScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes cloudFloat {
  0%   { transform: translateX(0px)  translateY(0px)   scale(1);    opacity: 0.4; }
  25%  { transform: translateX(45px) translateY(-22px) scale(1.06); opacity: 0.7; }
  50%  { transform: translateX(85px) translateY(12px)  scale(0.97); opacity: 0.5; }
  75%  { transform: translateX(35px) translateY(-12px) scale(1.03); opacity: 0.65; }
  100% { transform: translateX(0px)  translateY(0px)   scale(1);    opacity: 0.4; }
}

@keyframes foamRise {
  0%   { transform: translateY(0)     scale(1);   opacity: 0.6; }
  100% { transform: translateY(-90px) scale(0.1); opacity: 0; }
}

/* ── UI animations ─────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.55); }
}

@keyframes expandLine {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); }
}

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

@keyframes barFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Hero entry sequence ───────────────────── */
.hero-tag    { opacity: 0; animation: fadeUp 0.8s var(--ease-spring) 0.3s forwards; }
.hero h1     { opacity: 0; animation: fadeUp 0.9s var(--ease-spring) 0.5s forwards; }
.hero-sub    { opacity: 0; animation: fadeUp 0.9s var(--ease-spring) 0.7s forwards; }
.hero-actions{ opacity: 0; animation: fadeUp 0.9s var(--ease-spring) 0.9s forwards; }
.hero-visual { opacity: 0; animation: scaleIn 1.1s var(--ease-spring) 0.6s forwards; }
.scroll-hint { opacity: 0; animation: fadeIn 1s ease 1.6s forwards; }