/* ═══════════ CORE KEYFRAMES ═══════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* ═══════════ SCROLL PROGRESS BAR ═══════════ */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, #ff5722, #ff9800, #ffc107, #00e5c4, #ff5722);
  background-size: 300% auto;
  animation: gradShift 3s linear infinite;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px rgba(255,87,34,0.6);
}
@keyframes gradShift {
  0%   { background-position: 0%   center; }
  100% { background-position: 300% center; }
}

/* ═══════════ CURSOR GLOW ═══════════ */
.cursor-glow {
  position: fixed;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,87,34,0.055) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  transition: top 0.1s ease-out, left 0.1s ease-out;
  will-change: top, left;
}

/* ═══════════ PARTICLE CANVAS ═══════════ */
#particles-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════ SHIMMER ON BUTTONS ═══════════ */
.hero-cta, .nav-cta, .tc-fire, .form-submit { position: relative; overflow: hidden; }
.hero-cta::after, .nav-cta::after, .tc-fire::after, .form-submit::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  animation: shimmerBtn 3.5s ease-in-out infinite;
}
@keyframes shimmerBtn {
  0%       { left: -100%; }
  60%, 100% { left: 160%; }
}

/* ═══════════ FLOATING ORBS ═══════════ */
.orb {
  position: fixed; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: 0;
  animation: orbFloat ease-in-out infinite;
}
.orb-1 { width: 450px; height: 450px; background: rgba(255,87,34,0.04);   animation-duration: 22s; top: 10vh; left: 5vw; }
.orb-2 { width: 320px; height: 320px; background: rgba(0,229,196,0.035);  animation-duration: 28s; animation-delay: -10s; top: 60vh; right: 8vw; }
.orb-3 { width: 260px; height: 260px; background: rgba(41,121,255,0.03);  animation-duration: 20s; animation-delay: -6s;  bottom: 15vh; left: 40vw; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0)      scale(1); }
  33%       { transform: translate(35px, -45px) scale(1.06); }
  66%       { transform: translate(-22px, 28px) scale(0.96); }
}

/* ═══════════ TIMELINE DOT PULSE RINGS ═══════════ */
.tl-dot { position: relative; }
.tl-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  opacity: 0;
  animation: ringPulse 2.5s ease-out infinite;
}
@keyframes ringPulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.65); }
}

/* ═══════════ TIMELINE STEP SCROLL ANIMATION ═══════════ */
.tl-item {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-item.tl-visible {
  opacity: 1;
  transform: translateX(0);
}
.tl-dot {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tl-item.tl-visible .tl-dot {
  transform: scale(1);
}

/* ═══════════ HERO TITLE TEXT SHIMMER ═══════════ */
.hero-title .fire {
  background: linear-gradient(90deg, #ff5722, #ff9800, #ffc107, #ff9800, #ff5722) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: textShimmer 3s linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 200% center; }
}

/* ═══════════ RIPPLE CLICK ═══════════ */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: rippleAnim 0.65s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ═══════════ SECTION HEADER ANIMATE-IN ═══════════ */
.animate-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-in.visible { opacity: 1; transform: translateY(0); }

/* ═══════════ ENHANCED CARD HOVERS ═══════════ */
.hl-card:hover  { box-shadow: 0 8px 40px rgba(255,87,34,0.09), 0 0 0 1px rgba(255,87,34,0.12); }
.aud-card:hover { box-shadow: 0 8px 32px rgba(255,152,0,0.08); }
.chip { transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s; }
.chip:hover { box-shadow: 0 0 20px rgba(0,229,196,0.1); transform: translateY(-2px); }

/* ═══════════ NAVBAR SCROLLED STATE ═══════════ */
.navbar.scrolled { background: rgba(5,8,15,0.97); border-bottom-color: rgba(255,87,34,0.1); }

/* ═══════════ HERO PRICE STRIP PULSE ═══════════ */
.hero-price-strip { animation: fadeUp 0.7s 0.7s both, pricePulse 3s 2.5s ease-in-out infinite; }
@keyframes pricePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,87,34,0);   border-color: rgba(255,87,34,0.25); }
  50%       { box-shadow: 0 0 30px rgba(255,87,34,0.22); border-color: rgba(255,87,34,0.55); }
}

/* ═══════════ FEATURED PRICING CARD PULSE ═══════════ */
.pricing-card.featured { animation: featuredPulse 3s ease-in-out infinite; }
@keyframes featuredPulse {
  0%, 100% { box-shadow: 0 0 60px rgba(255,87,34,0.15), 0 0 0 1px rgba(255,87,34,0.4); }
  50%       { box-shadow: 0 0 90px rgba(255,152,0,0.28), 0 0 0 1px rgba(255,193,7,0.6); }
}

/* ═══════════ AUTHOR CARD GLOW ═══════════ */
.author-card { transition: box-shadow 0.4s; }
.author-card:hover { box-shadow: 0 0 60px rgba(0,229,196,0.08); }

/* ═══════════ BOOK FRAME GLOW BREATHE ═══════════ */
@keyframes bookGlow {
  0%, 100% { box-shadow: 0 20px 80px rgba(0,0,0,0.5),  0 0 80px  rgba(255,87,34,0.08); }
  50%       { box-shadow: 0 30px 100px rgba(0,0,0,0.55), 0 0 120px rgba(255,87,34,0.16); }
}
.harrison-book-frame { animation: bookGlow 5s ease-in-out infinite; }

/* ═══════════ TIMELINE LINE DRAW ═══════════ */
.tl-line {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl-line.tl-line-visible {
  transform: scaleY(1);
}

/* ═══════════ FEATURED CARD — FLOAT ANIMATION ═══════════ */
.pricing-card.featured {
  animation: featuredPulse 3s ease-in-out infinite, cardFloat 4s ease-in-out infinite !important;
}
@keyframes cardFloat {
  0%, 100% { transform: scale(1.03) translateY(0); }
  50%       { transform: scale(1.03) translateY(-8px); }
}

/* ═══════════ PRICE SPOTLIGHT RING ═══════════ */
.price-spotlight-ring {
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, rgba(255,87,34,0.6), rgba(255,193,7,0.5), rgba(255,87,34,0.0)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: ringRotate 3s linear infinite;
  pointer-events: none;
}
@keyframes ringRotate {
  0%   { filter: hue-rotate(0deg)   brightness(1);   }
  50%  { filter: hue-rotate(20deg)  brightness(1.3); }
  100% { filter: hue-rotate(0deg)   brightness(1);   }
}

/* ═══════════ PRICE BIG NUMBER — BREATHE ═══════════ */
.pricing-card.featured .tier-price {
  animation: priceBreathe 2.5s ease-in-out infinite;
}
@keyframes priceBreathe {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(255,87,34,0)); transform: scale(1); }
  50%       { filter: drop-shadow(0 0 18px rgba(255,152,0,0.55)); transform: scale(1.04); }
}

/* ═══════════ SAVING BADGE ═══════════ */
.price-saving-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(0,230,118,0.15), rgba(0,229,196,0.08));
  border: 1px solid rgba(0,230,118,0.35);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: #69f0ae;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  animation: badgePop 1s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════ SPARKLE DOTS ON FEATURED CARD ═══════════ */
.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow:
    0 0 0 1.5px rgba(255,87,34,0.25),
    0 0 40px rgba(255,87,34,0.12),
    0 0 80px rgba(255,152,0,0.06);
  animation: cardAura 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes cardAura {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(255,87,34,0.25), 0 0 40px rgba(255,87,34,0.12), 0 0 80px rgba(255,152,0,0.06); }
  50%       { box-shadow: 0 0 0 2px rgba(255,193,7,0.45),   0 0 60px rgba(255,152,0,0.25), 0 0 120px rgba(255,87,34,0.12); }
}

/* ═══════════ MODAL POP ANIMATION ═══════════ */
.modal-overlay.active .modal-card {
  animation: modalPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}