/* ============================================
   HERO ANIMATIONS
============================================ */
@keyframes heroWordmarkIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroScrollIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================
   HERO WORDMARK LETTER INTERACTIONS
============================================ */
.hero-wordmark .letter {
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 0.4s cubic-bezier(0.25, 1.25, 0.5, 1),
              filter 0.3s ease;
  cursor: pointer;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(201, 168, 76, 0.35));
}
.hero-wordmark .letter:hover,
.hero-wordmark .letter.tapped {
  transform: translateY(-12px) rotateX(-14deg) rotateY(10deg) scale(1.08);
  filter: drop-shadow(0 10px 30px rgba(201,168,76,0.65));
}
.hero-wordmark .letter:hover + .letter,
.hero-wordmark .letter:has(+ .letter:hover) {
  transform: translateY(-4px) rotateY(-4deg);
}

@media (hover: none) {
  .hero-wordmark .letter {
    animation: letterAmbient 5s ease-in-out infinite;
  }
  .hero-wordmark .letter:nth-child(1) { animation-delay: 0s; }
  .hero-wordmark .letter:nth-child(2) { animation-delay: 0.4s; }
  .hero-wordmark .letter:nth-child(3) { animation-delay: 0.8s; }
  .hero-wordmark .letter:nth-child(4) { animation-delay: 1.2s; }
}
@keyframes letterAmbient {
  0%, 100% { transform: translateY(0) rotateY(0); filter: drop-shadow(0 0 24px rgba(201,168,76,0.35)); }
  50% { transform: translateY(-6px) rotateY(6deg); filter: drop-shadow(0 6px 26px rgba(201,168,76,0.55)); }
}

/* ============================================
   SCROLL PULSE (hero scroll indicator)
============================================ */
@keyframes scrollPulse {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   PARTICLES (carousel atmosphere)
============================================ */
.particle {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  opacity: 0;
  animation: particleFloat 14s linear infinite;
}
.particle.large { width: 3px; height: 3px; box-shadow: 0 0 10px var(--gold-light); }
.particle.small { width: 1.5px; height: 1.5px; opacity: 0.6; }
@keyframes particleFloat {
  0%   { transform: translate(0, 20px) scale(0.5); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { transform: translate(var(--drift-x, 20px), -60vh) scale(1); opacity: 0.8; }
  90%  { opacity: 0.7; }
  100% { transform: translate(calc(var(--drift-x, 20px) * 1.5), -110vh) scale(0.3); opacity: 0; }
}

/* ============================================
   URGENCY PULSE — Enhancement #3
   Slow heartbeat on "3/3" stat and mentorship Apply button.
   Max opacity 0.25 — subtle, not attention-grabbing.
============================================ */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(201,168,76,0); }
  50% { box-shadow: 0 0 16px rgba(201,168,76,0.25); }
}
.proof-stat--pulse .proof-number {
  animation: subtlePulse 3s ease-in-out infinite;
  border-radius: 2px;
}
.tier-cta-pulse {
  animation: subtlePulse 3s ease-in-out infinite;
}

/* ============================================
   BUNDLE CARD SHIMMER BORDER — Enhancement #6
   Total cycle 10s: shimmer active ~4s, then 6s static rest.
   The gradient sweep occupies the first 40% of the timeline.
============================================ */
@keyframes shimmerBorder {
  0%   { transform: translateX(-100%); opacity: 0; }
  5%   { opacity: 1; }
  40%  { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* ============================================
   MODAL STEP FADE
============================================ */
@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   REDUCED MOTION
============================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cursor-glow, .cursor-core, .cursor-trail-dot { display: none; }
  .bp-grid { transform: none !important; }
  .hero-glow { transform: translate(-50%, -50%) !important; }
  /* Keep tier-sign transforms — don't flatten 3D carousel.
     Kill animated easing so cards snap instead of glide. */
  .tier-sign { transition: none !important; }
  .particle { animation: none !important; opacity: 0 !important; }
  .book-cover { transform: rotateY(-8deg) rotateX(4deg) !important; }
  .proof-stat--pulse .proof-number,
  .tier-cta-pulse { animation: none !important; box-shadow: none !important; }
}
