/* ==========================================================================
   Flowzco — Animations
   Hero merge cinematic, floating cards, glow pulses, parallax blobs
   ========================================================================== */

/* ---------- Ambient background wash (very subtle, hero only) ---------- */
@keyframes blobDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(14px, -10px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1); }
}
.glow-blob { animation: blobDrift 22s ease-in-out infinite; }
.glow-blob.slow { animation-duration: 30s; }
.glow-blob.rev { animation-direction: reverse; }

/* ---------- Floating cards (subtle) ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float { animation: floatY 6.5s ease-in-out infinite; }
.float-slow { animation: floatY 8.5s ease-in-out infinite; }

/* ---------- Fade / scale reveal (used with IntersectionObserver toggling .is-visible via .reveal) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade { opacity: 0; animation: fadeUp 0.8s var(--ease) both; }

/* ---------- Navbar entrance ---------- */
@keyframes navIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
.navbar { animation: navIn 0.6s var(--ease) both; }

/* ---------- Typewriter cursor ---------- */
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.typing-cursor {
  display: inline-block; width: 3px; margin-left: 3px;
  background: var(--purple-light); vertical-align: -0.05em; height: 0.85em;
  animation: caretBlink 0.9s steps(1) infinite;
}

/* ---------- Pulse ring (status indicators) ---------- */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
  70% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.pulse-ring { animation: pulseRing 2.4s ease-out infinite; }

/* ==========================================================================
   HERO ANIMATION — plays once
   A bare AI-brain icon and a bare marketplace shopping-bag icon (no boxes,
   no gradients) move toward each other, combine, and transform into the
   Flowzco mark, positioned directly beneath the primary CTA. The mark then
   stays on screen permanently wrapped in a continuous, realistic flame
   built from a layered SVG shape + turbulence filter — flat colors only.
   ========================================================================== */

.hero-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 260px;
  margin: 8px auto 0;
  pointer-events: none;
}

.orb-float { position: absolute; top: 50%; left: 50%; }

/* One-shot journey from resting position to center, then gone for good */
.orb-move { position: absolute; top: 0; left: 0; transform-origin: center; }
.orb-move.left {
  animation: flyInLeft 1.6s var(--ease) 0.4s 1 both;
}
.orb-move.right {
  animation: flyInRight 1.6s var(--ease) 0.4s 1 both;
}

@keyframes flyInLeft {
  0%   { transform: translate(-140px, 0) scale(1); opacity: 1; }
  70%  { transform: translate(-10px, 0) scale(0.75); opacity: 1; }
  100% { transform: translate(0, 0) scale(0.2); opacity: 0; }
}
@keyframes flyInRight {
  0%   { transform: translate(140px, 0) scale(1); opacity: 1; }
  70%  { transform: translate(10px, 0) scale(0.75); opacity: 1; }
  100% { transform: translate(0, 0) scale(0.2); opacity: 0; }
}

/* Bare icons — no tile, no border, no gradient. Just the shape + a soft drop shadow. */
.hero-icon {
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 14px rgba(6,9,18,0.35));
}
.hero-icon.icon-ai { color: var(--purple-light); }
.hero-icon.icon-bag { color: var(--green-light); }

/* Combine explosion — bright flat-white core + two expanding solid-color shockwave rings */
.hero-burst {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: #ffffff;
  opacity: 0;
  filter: blur(3px);
  animation: burstOnce 0.65s var(--ease) 1.6s 1 both;
  z-index: 4;
}
@keyframes burstOnce {
  0%   { transform: translate(-50%, -50%) scale(0.15); opacity: 0; }
  30%  { transform: translate(-50%, -50%) scale(1.7); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

.hero-shock {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 2px solid var(--purple-light);
  opacity: 0;
  z-index: 3;
}
.hero-shock.ring-1 { animation: shockRing 0.85s var(--ease) 1.62s 1 both; }
.hero-shock.ring-2 { border-color: var(--green-light); animation: shockRing 0.95s var(--ease) 1.72s 1 both; }
@keyframes shockRing {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}

/* Merged Flowzco mark — the ghost-with-a-brain, standalone (no box), appears
   once then breathes gently forever, centered exactly on the stage. */
.hero-logo {
  position: absolute; top: 50%; left: 50%;
  width: 128px; height: 128px;
  transform: translate(-50%, -50%) scale(0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  filter: drop-shadow(0 10px 22px rgba(6,9,18,0.45));
  animation:
    logoAppearOnce 0.7s var(--ease) 1.9s 1 both,
    logoBreathe 3.6s ease-in-out 2.6s infinite;
  z-index: 3;
}
.hero-logo svg { width: 100%; height: 100%; overflow: visible; }
.hero-logo .ghost-body { fill: var(--purple); }
.hero-logo .ghost-eyes circle { fill: var(--green-light); }
@keyframes logoAppearOnce {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-8deg); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
@keyframes logoBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.035); }
}

/* ---------- Eyes (home hero only) — blink + gently track the cursor ---------- */
.hero-logo .hero-eyes { animation: blinkEyes 5.2s ease-in-out 3.4s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes blinkEyes {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}

/* Aura — flat, blurred solid-color rings (no gradients) that ignite once
   right as the mark forms, then pulse gently forever. Centered exactly on
   the logo so the whole mark reads as one balanced, symmetric composite. */
.hero-aura {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: auraIgniteOnce 1s ease-out 2.4s 1 both;
}
.aura-ring {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.aura-ring.a { width: 148px; height: 148px; background: var(--purple); opacity: 0.22; filter: blur(18px); animation: auraPulseA 3.6s ease-in-out infinite; }
.aura-ring.b { width: 200px; height: 200px; background: var(--green); opacity: 0.14; filter: blur(28px); animation: auraPulseB 4.6s ease-in-out 0.4s infinite; }
.aura-ring.c { width: 110px; height: 110px; background: var(--purple-light); opacity: 0.22; filter: blur(12px); animation: auraPulseA 2.8s ease-in-out 0.2s infinite; }

@keyframes auraIgniteOnce { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes auraPulseA {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes auraPulseB {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.14; }
  50%      { transform: translate(-50%, -50%) scale(1.22); opacity: 0.22; }
}

@media (max-width: 640px) {
  .hero-stage { height: 220px; max-width: 320px; }
  .hero-icon { width: 44px; height: 44px; }
  .hero-logo { width: 96px; height: 96px; }
  .aura-ring.a { width: 112px; height: 112px; }
  .aura-ring.b { width: 152px; height: 152px; }
  .aura-ring.c { width: 82px; height: 82px; }
  @keyframes flyInLeft {
    0%   { transform: translate(-90px, 0) scale(1); opacity: 1; }
    70%  { transform: translate(-8px, 0) scale(0.75); opacity: 1; }
    100% { transform: translate(0, 0) scale(0.2); opacity: 0; }
  }
  @keyframes flyInRight {
    0%   { transform: translate(90px, 0) scale(1); opacity: 1; }
    70%  { transform: translate(8px, 0) scale(0.75); opacity: 1; }
    100% { transform: translate(0, 0) scale(0.2); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb-move, .hero-burst, .hero-logo, .hero-aura, .aura-ring, .hero-eyes, .glow-blob, .float, .float-slow {
    animation: none !important;
  }
  .hero-logo, .hero-aura { opacity: 1; }
  .hero-logo { transform: translate(-50%, -50%) scale(1); }
  .orb-move.left, .orb-move.right { display: none; }
}