/* ══════════════════════════════════════════
   ANIMATIONS — Bebop Donut Shop
   ══════════════════════════════════════════ */

/* ── Reveal states (pre-GSAP) ── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

.reveal-fade {
  opacity: 0;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

/* ── Hero title overflow container ── */
.hero-title-line1,
.hero-title-line2 {
  overflow: hidden;
  display: block;
}

/* ── Scroll line animation ── */
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Particle animation ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50%       { transform: translateY(-30px) rotate(180deg); opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 0.9; transform: scale(1.3); }
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: twinkle var(--duration, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.particle.star {
  background: var(--color-text-primary);
  opacity: 0.4;
}

/* ── Floating accent ring ── */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.4; }
  50%  { transform: scale(1.06); opacity: 0.7; }
  100% { transform: scale(1); opacity: 0.4; }
}

/* ── Glow pulse on hero CTA ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(238,77,139,0.3); }
  50%       { box-shadow: 0 4px 40px rgba(238,77,139,0.6); }
}

.btn-primary {
  animation: glowPulse 3s ease-in-out infinite;
}

.btn-primary:hover {
  animation: none;
}

/* ══════════════════════════════════════════
   SWORDFISH II FLYBY
   ══════════════════════════════════════════ */

.swordfish-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9998;
}

.swordfish {
  position: absolute;
  width: 140px;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Trail pseudo-element — horizontal comet tail */
.swordfish::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(to left, rgba(93,207,202,0.6), transparent);
  border-radius: 999px;
  pointer-events: none;
}

/* Fly left-to-right — scaleX(-1) baked in so translateX doesn't override it */
@keyframes fly-ltr {
  0%   { transform: translateX(-200px) scaleX(-1); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 200px)) scaleX(-1); opacity: 0; }
}

/* Fly right-to-left — nose already faces left, no flip needed */
@keyframes sflyRTL {
  0%   { transform: translateX(calc(100vw + 200px)); opacity: 0; }
  5%   { opacity: 0.45; }
  92%  { opacity: 0.45; }
  100% { transform: translateX(-200px); opacity: 0; }
}

.swordfish.fly-ltr {
  animation: fly-ltr var(--sfly-dur, 6s) cubic-bezier(0.22,1,0.36,1) forwards;
}

.swordfish.fly-rtl {
  transform: scaleX(1);
  animation: sflyRTL var(--sfly-dur, 6s) cubic-bezier(0.22,1,0.36,1) forwards;
}

/* Trail direction flips with ship */
.swordfish.fly-ltr::after {
  right: auto;
  left: 100%;
  background: linear-gradient(to right, rgba(93,207,202,0.6), transparent);
}

.swordfish.fly-rtl::after {
  right: 100%;
  left: auto;
  background: linear-gradient(to left, rgba(93,207,202,0.6), transparent);
}

/* ── Nav scrolled backdrop ── */
#nav {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

#nav.scrolled {
  background: rgba(7,14,13,0.95);
  box-shadow: 0 2px 24px rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}