/* ========================================
   PIK_AI — Animations & Scroll Effects
   v3.0 — Light Theme Redesign
   ======================================== */

/* === SCROLL-TRIGGERED REVEALS === */

.reveal-up {
  opacity: 0;
  transform: translateY(28px);
}

.reveal-down {
  opacity: 0;
  transform: translateY(-28px);
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
}

.reveal-fade {
  opacity: 0;
}

/* Revealed state (added by JS) */
.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  transition:
    opacity var(--duration-reveal) var(--ease-spring),
    transform var(--duration-reveal) var(--ease-spring);
}

/* === STAGGER DELAYS === */
.stagger > *:nth-child(1)  { transition-delay: 0ms; }
.stagger > *:nth-child(2)  { transition-delay: 100ms; }
.stagger > *:nth-child(3)  { transition-delay: 220ms; }
.stagger > *:nth-child(4)  { transition-delay: 360ms; }
.stagger > *:nth-child(5)  { transition-delay: 500ms; }
.stagger > *:nth-child(6)  { transition-delay: 640ms; }

.stagger-wide > *:nth-child(1) { transition-delay: 0ms; }
.stagger-wide > *:nth-child(2) { transition-delay: 150ms; }
.stagger-wide > *:nth-child(3) { transition-delay: 350ms; }
.stagger-wide > *:nth-child(4) { transition-delay: 550ms; }
.stagger-wide > *:nth-child(5) { transition-delay: 750ms; }
.stagger-wide > *:nth-child(6) { transition-delay: 950ms; }

/* === CTA BUTTON GLOW PULSE === */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(180, 190, 60, 0.2), 0 1px 3px rgba(0,0,0,0.08); }
  50%      { box-shadow: 0 4px 32px rgba(180, 190, 60, 0.35), 0 1px 3px rgba(0,0,0,0.08); }
}

.btn--primary:hover {
  animation: cta-glow 2.5s ease-in-out infinite;
}

/* === GLASS CARD SHIMMER === */
@keyframes glass-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.card-glass:hover::after {
  animation: glass-shimmer 1.2s ease-out;
}

/* === COUNT-UP ANIMATION HELPER === */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* === HERO FLOAT CARDS — subtle breathing === */
@keyframes float-breathe-1 {
  0%, 100% { transform: translateX(20px) translateY(0); }
  50%      { transform: translateX(20px) translateY(-6px); }
}

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

@keyframes float-breathe-3 {
  0%, 100% { transform: translateX(30px) translateY(0); }
  50%      { transform: translateX(30px) translateY(-5px); }
}

@keyframes float-breathe-4 {
  0%, 100% { transform: translateX(5px) translateY(0); }
  50%      { transform: translateX(5px) translateY(-7px); }
}

.hero__float-card:nth-child(1) { animation: float-breathe-1 5s ease-in-out infinite; }
.hero__float-card:nth-child(2) { animation: float-breathe-2 6s ease-in-out infinite 0.5s; }
.hero__float-card:nth-child(3) { animation: float-breathe-3 5.5s ease-in-out infinite 1s; }
.hero__float-card:nth-child(4) { animation: float-breathe-4 6.5s ease-in-out infinite 1.5s; }
.hero__float-card:nth-child(5) { animation: float-breathe-1 5.8s ease-in-out infinite 2s; }
.hero__float-card:nth-child(6) { animation: float-breathe-2 6.2s ease-in-out infinite 2.5s; }

/* === TIMELINE DOTS PULSE === */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(151, 151, 255, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(151, 151, 255, 0); }
}

.timeline__dot.revealed {
  animation: dot-pulse 2s ease-in-out 1;
}

/* === SPINNER === */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === BACK TO TOP === */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-white);
  color: var(--text-on-light);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--duration-normal) var(--ease-default);
  box-shadow: var(--shadow-sm);
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent-purple);
  color: #1a1a1a;
  border-color: var(--accent-purple);
  box-shadow: var(--shadow-glow-purple);
}

/* === FLOATING DECO-CIRCLES — gentle bob === */
@keyframes floatCircle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.02); }
}

.deco-circle {
  animation: floatCircle 6s ease-in-out infinite;
}
.deco-circle:nth-child(2n) { animation-duration: 8s; animation-delay: 1s; }
.deco-circle:nth-child(3n) { animation-duration: 7s; animation-delay: 2s; }
.deco-circle:nth-child(4n) { animation-duration: 9s; animation-delay: 0.5s; }
.deco-circle:nth-child(5n) { animation-duration: 6.5s; animation-delay: 1.5s; }

/* === FLOATING TRAINING CARDS — all cards float === */
@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.section--dark .card-glass {
  animation: floatCard 4s ease-in-out infinite;
}
.section--dark .card-glass:nth-child(1) { animation-delay: 0s; }
.section--dark .card-glass:nth-child(2) { animation-delay: 0.5s; }
.section--dark .card-glass:nth-child(3) { animation-delay: 1.0s; }
.section--dark .card-glass:nth-child(4) { animation-delay: 1.5s; }
.section--dark .card-glass:nth-child(5) { animation-delay: 2.0s; }
.section--dark .card-glass:nth-child(6) { animation-delay: 2.5s; }

.section--dark .card-glass:hover {
  animation-play-state: paused;
  transform: translateY(-10px);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .hero__float-card { animation: none !important; }
  .deco-circle { animation: none !important; }
  .section--dark .card-glass { animation: none !important; }
  .timeline__dot { animation: none !important; }
  .btn--primary:hover { animation: none !important; }
  .card-glass:hover::after { animation: none !important; }

  .reveal-up,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}