/* ========================================
   SLEEPMAXX - Animation System
   OURA RING INSPIRED - Calm, Sophisticated
   Smooth 60fps GPU-accelerated transitions
   ======================================== */

/* ========================================
   PERFORMANCE OPTIMIZATION
   ======================================== */

.slide,
.option-btn,
.option-btn-full,
.challenge-card,
.btn-continue,
.btn-next,
.quote-text,
.big-number,
.energy-age-number {
  will-change: transform, opacity;
}

/* ========================================
   SLIDE TRANSITIONS
   Calm, graceful reveals
   ======================================== */

.slide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: 
    opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 0s 400ms;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: none; /* CRITICAL: Use 'none' not 'translateY(0)' - prevents containing block for fixed-position buttons */
  transition: 
    opacity 400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 0s 0s;
}

.slide.exit {
  opacity: 0;
  transform: translateY(-12px);
  transition: 
    opacity 300ms ease-in,
    transform 300ms ease-in;
}

/* Quote slides - slower, more meditative */
.slide[data-slide="1"],
.slide[data-slide="2"] {
  transform: translateY(28px);
  transition-duration: 600ms;
}

/* Reveal slides - gentle scale */
.slide[data-slide="6"],
.slide[data-slide="24"],
.slide[data-slide="26"] {
  transform: scale(0.97) translateY(16px);
  transition: 
    opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 0s 700ms;
}

.slide[data-slide="6"].active,
.slide[data-slide="24"].active,
.slide[data-slide="26"].active {
  transform: none; /* CRITICAL: Use 'none' not 'scale(1) translateY(0)' - prevents containing block */
  transition: 
    opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 0s 0s;
}

/* ========================================
   QUOTE ANIMATIONS
   ======================================== */

.quote-mark {
  opacity: 0;
}

.slide.active .quote-mark {
  animation: quoteMarkReveal 0.8s ease-out 0.1s forwards;
}

@keyframes quoteMarkReveal {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.9);
  }
  to {
    opacity: 0.25;
    transform: translateY(0) scale(1);
  }
}

/* Quote text word-by-word */
.quote-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  transition: 
    opacity 0.4s ease-out,
    transform 0.4s ease-out,
    filter 0.4s ease-out;
}

.quote-word.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Quote line animation variant */
.quote-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  transition: 
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}

.quote-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gentle breathing after reveal */
.quote-text.reveal-complete {
  animation: gentleBreathing 6s ease-in-out infinite;
}

@keyframes gentleBreathing {
  0%, 100% { 
    opacity: 1;
    filter: brightness(1);
  }
  50% { 
    opacity: 0.96;
    filter: brightness(1.03);
  }
}

/* Author fade-in */
.quote-author {
  opacity: 0;
  transform: translateY(8px);
}

.slide.active .quote-author {
  animation: authorReveal 0.6s ease-out forwards;
  animation-delay: var(--author-delay, 2s);
}

@keyframes authorReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   SELECTION BUTTONS
   Oura-style smooth interactions
   ======================================== */

.option-btn,
.option-btn-full,
.challenge-card {
  position: relative;
  overflow: hidden;
  transition: 
    transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

/* Hover lift */
.option-btn:hover,
.option-btn-full:hover,
.challenge-card:hover {
  transform: translateY(-3px);
}

/* Press state */
.option-btn:active,
.option-btn-full:active,
.challenge-card:active {
  transform: scale(0.97);
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ripple effect */
.option-btn::before,
.option-btn-full::before,
.challenge-card::before {
  content: '';
  position: absolute;
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--accent-teal-glow) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 0.5s ease, height 0.5s ease, opacity 0.4s ease;
  pointer-events: none;
}

.option-btn.ripple::before,
.option-btn-full.ripple::before,
.challenge-card.ripple::before {
  width: 280px;
  height: 280px;
  opacity: 1;
}

.option-btn.ripple-fade::before,
.option-btn-full.ripple-fade::before,
.challenge-card.ripple-fade::before {
  opacity: 0;
}

/* Selection glow - Oura teal */
.option-btn.selected,
.option-btn-full.selected,
.challenge-card.selected {
  animation: selectionGlow 0.4s ease-out;
}

@keyframes selectionGlow {
  0% {
    box-shadow: 0 0 0 rgba(90, 200, 200, 0);
  }
  100% {
    box-shadow: var(--shadow-glow-teal);
  }
}

/* Checkmark animation - gentle fade in */
.selection-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: scale(0.9);
  transition: 
    opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.option-btn.selected .selection-check,
.option-btn-full.selected .selection-check,
.challenge-card.selected .selection-check {
  opacity: 1;
  transform: scale(1);
}

/* No bouncy keyframes - smooth transition handles it */

/* SVG checkmark draw */
.selection-check svg path {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}

.option-btn.selected .selection-check svg path,
.option-btn-full.selected .selection-check svg path {
  animation: checkDraw 0.35s ease-out 0.15s forwards;
}

@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* ========================================
   PROGRESS DOTS - Calm, subtle
   ======================================== */

.progress-dot {
  transition: 
    all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.5s ease;
}

.progress-dot.active {
  animation: dotBreathing 4s ease-in-out infinite;
}

@keyframes dotBreathing {
  0%, 100% {
    box-shadow: 
      0 0 4px var(--accent-teal-glow),
      0 0 14px rgba(90, 200, 200, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 
      0 0 10px var(--accent-teal-glow),
      0 0 22px rgba(90, 200, 200, 0.3);
    transform: scale(1.03);
  }
}

.progress-dot.completed {
  box-shadow: 0 0 6px rgba(90, 200, 200, 0.2);
}

.progress-dot.transitioning {
  animation: dotTransition 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes dotTransition {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* ========================================
   CHALLENGE CARDS (Slide 10)
   ======================================== */

.slide[data-slide="10"] .challenge-card {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
}

.slide[data-slide="10"].active .challenge-card {
  animation: cardReveal 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.slide[data-slide="10"].active .challenge-card:nth-child(1) { animation-delay: 0.05s; }
.slide[data-slide="10"].active .challenge-card:nth-child(2) { animation-delay: 0.12s; }
.slide[data-slide="10"].active .challenge-card:nth-child(3) { animation-delay: 0.19s; }
.slide[data-slide="10"].active .challenge-card:nth-child(4) { animation-delay: 0.26s; }
.slide[data-slide="10"].active .challenge-card:nth-child(5) { animation-delay: 0.33s; }

@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   STAT NUMBER COUNT-UP
   ======================================== */

.stat-number-animated {
  display: inline-block;
}

.stat-number-animated.counting {
  /* No animation - just smooth opacity handled by JS */
  opacity: 0.9;
  transition: opacity 0.1s ease;
}

.stat-number-animated.count-complete {
  animation: numberComplete 0.5s ease-out forwards;
}

@keyframes numberComplete {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.big-number.shimmer-complete {
  background-size: 200% 100%;
  animation: shimmer 2.5s ease-in-out;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ========================================
   ENERGY AGE REVEAL (Slide 26) - DRAMATIC KILLER SCREEN
   ======================================== */

.energy-age-slide {
  background: var(--bg-deep) !important;
  position: relative;
  overflow: hidden;
}

/* Dramatic backdrop darkening */
.energy-age-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  opacity: 0;
  transition: opacity 1s ease-out;
  pointer-events: none;
  z-index: 0;
}

.energy-age-slide.active .energy-age-backdrop {
  animation: backdropDarken 1.5s ease-out 0.3s forwards;
}

@keyframes backdropDarken {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Radial glow behind the number */
.energy-age-slide::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(ellipse, rgba(248, 113, 113, 0.15) 0%, rgba(251, 191, 36, 0.1) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.energy-age-slide.active::before {
  animation: glowAppear 2s ease-out 1.5s forwards;
}

@keyframes glowAppear {
  0% { opacity: 0; transform: translateX(-50%) scale(0.8); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.energy-age-reveal {
  opacity: 0;
  transform: translateY(24px);
  position: relative;
  z-index: 2;
}

/* CRITICAL FIX: Energy age reveal animation - use explicit visibility */
.slide[data-slide="26"].active .energy-age-reveal {
  animation: energyAgeReveal 0.7s ease-out 0.2s forwards;
}

/* New animation with explicit from/to states for reliability */
@keyframes energyAgeReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
    visibility: visible;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

@keyframes revealContent {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Number container */
.energy-age-number-container {
  position: relative;
  display: inline-block;
}

/* Glow ring behind number */
.energy-age-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 113, 113, 0.25) 0%, rgba(251, 191, 36, 0.15) 50%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.energy-age-glow-ring.active {
  animation: glowRingPulse 2.5s ease-in-out infinite;
}

@keyframes glowRingPulse {
  0%, 100% { 
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 40px rgba(248, 113, 113, 0.35), 
      0 0 80px rgba(251, 191, 36, 0.25),
      inset 0 0 20px rgba(248, 113, 113, 0.1);
  }
  50% { 
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 
      0 0 70px rgba(248, 113, 113, 0.55), 
      0 0 140px rgba(251, 191, 36, 0.35),
      inset 0 0 30px rgba(248, 113, 113, 0.15);
  }
}

/* Initial glow ring burst on reveal */
.energy-age-glow-ring.burst {
  animation: glowRingBurst 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes glowRingBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
}

.energy-age-number {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.energy-age-number.counting .digit {
  display: inline-block;
  animation: digitFade 0.12s ease-out;
}

@keyframes digitFade {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Number tick - smooth counting animation */
.energy-age-number.number-tick {
  animation: numberTick 0.08s ease-out;
}

@keyframes numberTick {
  0% { 
    opacity: 0.85;
    transform: scale(1.02);
  }
  100% { 
    opacity: 1;
    transform: scale(1);
  }
}

/* FINAL REVEAL - Dramatic scale up with glow and subtle shake */
.energy-age-number.reveal-final {
  animation: energyRevealFinal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes energyRevealFinal {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  25% {
    transform: scale(1.18);
    filter: brightness(1.4) drop-shadow(0 0 40px rgba(248, 113, 113, 0.5));
  }
  35% {
    transform: scale(1.12) translateX(-2px);
    filter: brightness(1.3) drop-shadow(0 0 30px rgba(248, 113, 113, 0.4));
  }
  40% {
    transform: scale(1.14) translateX(2px);
    filter: brightness(1.35) drop-shadow(0 0 35px rgba(251, 191, 36, 0.4));
  }
  45% {
    transform: scale(1.10) translateX(-1px);
  }
  55% {
    transform: scale(1.08);
    filter: brightness(1.15) drop-shadow(0 0 25px rgba(248, 113, 113, 0.3));
  }
  100% {
    transform: scale(1.06);
    filter: brightness(1) drop-shadow(0 0 15px rgba(248, 113, 113, 0.2));
  }
}

/* Persistent glow after reveal */
.energy-age-number.energy-age-final {
  animation: energyAgePersistentGlow 3s ease-in-out infinite;
}

@keyframes energyAgePersistentGlow {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(248, 113, 113, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(248, 113, 113, 0.35));
  }
}

/* Energy Age explanation fade in */
.energy-age-explanation {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.energy-age-explanation.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Energy gap reveal - gentle fade up */
.energy-gap {
  opacity: 0;
  transform: translateY(8px);
}

.energy-gap.gap-reveal {
  animation: gapRevealAnim 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes gapRevealAnim {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Confetti container - repurposed as subtle glow effect */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

/* Soft ambient particles instead of confetti */
.confetti-piece {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

.confetti-piece.burst {
  animation: softGlowRise 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes softGlowRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  30% {
    opacity: 0.4;
    transform: translateY(var(--burst-y, -40px)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--burst-y, -40px) - 60px)) scale(0.8);
  }
}

/* ========================================
   ENERGY CURVE DRAW (Slides 27-28) - POLISHED
   ======================================== */

.curve-draw {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawCurve 2s ease-out forwards;
}

@keyframes drawCurve {
  to { stroke-dashoffset: 0; }
}

/* You Are Here dot - pulsing animation */
.you-are-here-dot {
  opacity: 0;
  transform: scale(0.8);
}

.you-are-here-dot.pop {
  animation: dotPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}

@keyframes dotPopIn {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* Gap area pulse - more visible */
.energy-gap-area {
  opacity: 0;
}

.energy-gap-area.pulse {
  animation: gapPulseEnhanced 2.5s ease-in-out infinite 2s;
}

@keyframes gapPulseEnhanced {
  0%, 100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.35;
  }
}

/* Gap pulse overlay for canvas */
.gap-pulse-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.gap-pulse-overlay.active {
  animation: overlayPulse 2.5s ease-in-out infinite;
}

@keyframes overlayPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.15; }
}

/* Time labels stagger - 4 labels only: 6AM, 12PM, 6PM, 12AM */
.time-label {
  opacity: 0;
  animation: fadeIn 0.4s ease-out forwards;
}

.time-label:nth-child(1) { animation-delay: 1.2s; }
.time-label:nth-child(2) { animation-delay: 1.35s; }
.time-label:nth-child(3) { animation-delay: 1.5s; }
.time-label:nth-child(4) { animation-delay: 1.65s; }

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Energy curve container enhancements */
.energy-curve-container {
  position: relative;
}

/* Curve insight fade in */
.curve-insight {
  opacity: 0;
}

.slide[data-slide="28"].active .curve-insight {
  animation: fadeInUp 0.5s ease-out 2.2s forwards;
}

/* Gap callout with highlight animation */
.gap-callout {
  opacity: 0;
}

.slide[data-slide="28"].active .gap-callout {
  animation: fadeInUp 0.5s ease-out 2.6s forwards;
}

/* Peak info with emphasis */
.peak-info {
  opacity: 0;
}

.slide[data-slide="28"].active .peak-info {
  animation: fadeInUp 0.5s ease-out 3s forwards;
}

/* Chart legend enhancement */
.curve-legend {
  opacity: 0;
}

.slide[data-slide="28"].active .curve-legend {
  animation: fadeIn 0.4s ease-out 1s forwards;
}

/* Legend dot animations */
.legend-dot.current {
  animation: legendDotPulse 2s ease-in-out infinite 1.5s;
}

@keyframes legendDotPulse {
  0%, 100% { box-shadow: 0 0 4px var(--accent-teal-glow); }
  50% { box-shadow: 0 0 12px var(--accent-teal-glow); }
}

.legend-dot.optimal {
  animation: legendDotPulseGreen 2s ease-in-out infinite 1.7s;
}

@keyframes legendDotPulseGreen {
  0%, 100% { box-shadow: 0 0 4px rgba(110, 231, 183, 0.4); }
  50% { box-shadow: 0 0 12px rgba(110, 231, 183, 0.6); }
}

/* ========================================
   SCREEN TIME (Slide 30)
   ======================================== */

.app-item-enhanced {
  opacity: 0;
  transform: translateX(-24px);
}

.slide[data-slide="30"].active .app-item-enhanced {
  animation: appSlideIn 0.5s ease-out forwards;
}

.slide[data-slide="30"].active .app-item-enhanced:nth-child(1) { animation-delay: 0.1s; }
.slide[data-slide="30"].active .app-item-enhanced:nth-child(2) { animation-delay: 0.2s; }
.slide[data-slide="30"].active .app-item-enhanced:nth-child(3) { animation-delay: 0.3s; }

@keyframes appSlideIn {
  0% { opacity: 0; transform: translateX(-24px); }
  70% { opacity: 1; transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); }
}

.screen-equation {
  opacity: 0;
}

.slide[data-slide="30"].active .screen-equation {
  animation: revealContent 0.5s ease-out 0.5s forwards;
}

/* ========================================
   PROTOCOL TIMELINE (Slide 32)
   ======================================== */

.protocol-item {
  opacity: 0;
  transform: translateX(-16px);
}

.slide[data-slide="32"].active .protocol-item:nth-child(1) { animation: protocolIn 0.4s ease-out 0.1s forwards; }
.slide[data-slide="32"].active .protocol-item:nth-child(2) { animation: protocolIn 0.4s ease-out 0.18s forwards; }
.slide[data-slide="32"].active .protocol-item:nth-child(3) { animation: protocolIn 0.4s ease-out 0.26s forwards; }
.slide[data-slide="32"].active .protocol-item:nth-child(4) { animation: protocolIn 0.4s ease-out 0.34s forwards; }
.slide[data-slide="32"].active .protocol-item:nth-child(5) { animation: protocolIn 0.4s ease-out 0.42s forwards; }

@keyframes protocolIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.protocol-item.highlight .protocol-icon {
  animation: iconGlow 2.5s ease-in-out infinite;
}

@keyframes iconGlow {
  0%, 100% { box-shadow: 0 0 12px var(--accent-teal-glow); }
  50% { box-shadow: 0 0 20px var(--accent-teal-glow), 0 0 36px rgba(90, 200, 200, 0.15); }
}

/* ========================================
   PAYWALL (Slide 33)
   ======================================== */

.paywall-slide {
  background: 
    radial-gradient(ellipse at 50% 20%, rgba(139, 127, 212, 0.08) 0%, transparent 50%),
    var(--bg-deep) !important;
}

.paywall-header {
  opacity: 0;
}

.slide[data-slide="33"].active .paywall-header {
  animation: revealContent 0.6s ease-out forwards;
}

.paywall-logo {
  animation: gentleFloat 4s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.summary-card {
  opacity: 0;
}

.slide[data-slide="33"].active .summary-card {
  animation: cardRevealSummary 0.6s ease-out 0.2s forwards;
}

@keyframes cardRevealSummary {
  0% { opacity: 0; transform: translateY(16px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.summary-row {
  opacity: 0;
  transform: translateY(8px);
}

.slide[data-slide="33"].active .summary-row:nth-child(1) { animation: rowIn 0.35s ease-out 0.3s forwards; }
.slide[data-slide="33"].active .summary-row:nth-child(2) { animation: rowIn 0.35s ease-out 0.38s forwards; }
.slide[data-slide="33"].active .summary-row:nth-child(3) { animation: rowIn 0.35s ease-out 0.46s forwards; }
.slide[data-slide="33"].active .summary-row:nth-child(4) { animation: rowIn 0.35s ease-out 0.54s forwards; }

@keyframes rowIn {
  to { opacity: 1; transform: translateY(0); }
}

.tonight-preview {
  opacity: 0;
}

.slide[data-slide="33"].active .tonight-preview {
  animation: revealContent 0.5s ease-out 0.5s forwards;
}

.tonight-item {
  opacity: 0;
  transform: translateX(16px);
}

.slide[data-slide="33"].active .tonight-item:nth-child(1) { animation: tonightIn 0.4s ease-out 0.65s forwards; }
.slide[data-slide="33"].active .tonight-item:nth-child(2) { animation: tonightIn 0.4s ease-out 0.78s forwards; }
.slide[data-slide="33"].active .tonight-item:nth-child(3) { animation: tonightIn 0.4s ease-out 0.91s forwards; }

@keyframes tonightIn {
  to { opacity: 1; transform: translateX(0); }
}

.tonight-cta {
  opacity: 0;
}

.slide[data-slide="33"].active .tonight-cta {
  animation: fadeIn 0.4s ease-out 1.1s forwards;
}

/* Trial button */
.trial-button {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
}

.slide[data-slide="33"].active .trial-button {
  animation: trialButtonReveal 0.6s ease-out 1.3s forwards;
}

@keyframes trialButtonReveal {
  0% { opacity: 0; transform: translateY(8px) scale(0.97); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Premium shimmer on CTA */
.trial-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    transparent 100%
  );
  animation: ctaShimmer 3.5s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes ctaShimmer {
  0% { left: -100%; }
  35%, 100% { left: 100%; }
}

/* ========================================
   STARFIELD - Subtle & Calm
   Contained within phone viewport (375x812)
   ======================================== */

.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.stars-layer,
.stars-layer-2,
.stars-layer-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.stars-layer {
  animation: twinkle1 12s ease-in-out infinite, drift1 50s linear infinite;
  opacity: 0.5;
}

.stars-layer-2 {
  animation: twinkle2 16s ease-in-out infinite reverse, drift2 70s linear infinite reverse;
  opacity: 0.4;
}

.stars-layer-3 {
  animation: twinkle3 14s ease-in-out infinite, drift3 90s linear infinite;
  opacity: 0.3;
}

@keyframes twinkle1 {
  0%, 100% { opacity: 0.5; }
  25% { opacity: 0.6; }
  50% { opacity: 0.4; }
  75% { opacity: 0.55; }
}

@keyframes twinkle2 {
  0%, 100% { opacity: 0.4; }
  33% { opacity: 0.5; }
  66% { opacity: 0.35; }
}

@keyframes twinkle3 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.4; }
}

@keyframes drift1 {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-24px) translateX(8px); }
}

@keyframes drift2 {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-16px) translateX(-10px); }
}

@keyframes drift3 {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-32px) translateX(4px); }
}

/* Shooting star - very subtle */
.shooting-star {
  position: absolute;
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 200, 200, 0.5), transparent);
  transform: rotate(-45deg);
  animation: shootingStar 10s ease-out infinite;
  opacity: 0;
  border-radius: 1px;
}

.shooting-star:nth-child(2) {
  animation-delay: 4s;
}

@keyframes shootingStar {
  0% { opacity: 0; transform: rotate(-45deg) translateX(0); }
  2% { opacity: 1; }
  8% { opacity: 0; transform: rotate(-45deg) translateX(200px); }
  100% { opacity: 0; }
}

/* ========================================
   BUTTON INTERACTIONS
   ======================================== */

.btn-continue:hover:not(.disabled),
.btn-next:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    var(--shadow-glow-teal),
    0 10px 40px rgba(90, 200, 200, 0.25);
}

.btn-continue:active:not(.disabled),
.btn-next:active {
  transform: translateY(0) scale(0.98);
  transition: transform 0.1s;
}

/* Focus glow */
input:focus,
button:focus-visible {
  outline: none;
  box-shadow: 
    0 0 0 2px rgba(90, 200, 200, 0.4),
    0 0 16px rgba(90, 200, 200, 0.15);
}

/* ========================================
   HOPE SLIDE (Slide 27) - Energy Age Explanation
   ======================================== */

.hope-slide {
  background: 
    radial-gradient(ellipse at 50% 55%, rgba(110, 231, 183, 0.08) 0%, transparent 55%),
    var(--bg-deep) !important;
}

.hope-container {
  opacity: 0;
}

.slide[data-slide="27"].active .hope-container {
  animation: revealContent 0.7s ease-out forwards;
}

.hope-icon {
  animation: gentleGlow 3.5s ease-in-out infinite;
}

/* PROMINENT "Updates in 7 days" badge */
.update-badge.prominent {
  background: linear-gradient(135deg, rgba(90, 200, 200, 0.15) 0%, rgba(139, 127, 212, 0.12) 100%);
  border: 2px solid var(--accent-teal);
  padding: 16px 28px;
  border-radius: 20px;
  box-shadow: 
    0 0 20px rgba(90, 200, 200, 0.25),
    0 4px 20px rgba(0, 0, 0, 0.3);
  animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(90, 200, 200, 0.25),
      0 4px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 
      0 0 35px rgba(90, 200, 200, 0.4),
      0 4px 25px rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
  }
}

.update-badge.prominent .update-text {
  font-size: 16px;
  color: var(--text-primary);
}

.update-badge.prominent .update-days {
  font-size: 20px;
  color: var(--accent-teal);
  text-shadow: 0 0 10px rgba(90, 200, 200, 0.5);
}

@keyframes gentleGlow {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    opacity: 0.85;
    transform: scale(1.03);
    filter: brightness(1.08);
  }
}

.hope-headline {
  opacity: 0;
}

.slide[data-slide="26"].active .hope-headline {
  animation: revealContent 0.5s ease-out 0.4s forwards;
}

.hope-stats {
  opacity: 0;
}

.slide[data-slide="26"].active .hope-stats {
  animation: revealContent 0.5s ease-out 0.7s forwards;
}

.update-teaser {
  opacity: 0;
}

.slide[data-slide="26"].active .update-teaser,
.slide[data-slide="27"].active .update-teaser {
  animation: updateBadgeReveal 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.8s forwards;
}

@keyframes updateBadgeReveal {
  0% { 
    opacity: 0; 
    transform: translateY(12px) scale(0.95);
  }
  60% { 
    opacity: 1; 
    transform: translateY(-3px) scale(1.02);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0) scale(1);
  }
}

/* Subtle pulse after reveal */
.slide[data-slide="27"].active .update-badge {
  animation: badgeSubtlePulse 3s ease-in-out 1.5s infinite;
}

@keyframes badgeSubtlePulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(90, 200, 200, 0.1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(90, 200, 200, 0.2);
  }
}

/* ========================================
   CHART SLIDE (Slides 27-28)
   ======================================== */

.chart-slide .chart-title {
  opacity: 0;
}

.slide.active.chart-slide .chart-title {
  animation: fadeIn 0.5s ease-out forwards;
}

.chart-slide .energy-curve-container {
  opacity: 0;
}

.slide.active.chart-slide .energy-curve-container {
  animation: fadeIn 0.5s ease-out 0.15s forwards;
}

.curve-legend {
  opacity: 0;
}

.slide.active.chart-slide .curve-legend {
  animation: fadeIn 0.4s ease-out 0.4s forwards;
}

.gap-insight {
  opacity: 0;
}

.slide.active.chart-slide .gap-insight {
  animation: revealContent 0.5s ease-out 1.6s forwards;
}

/* ========================================
   PARTICLES (Optional Enhancement)
   ======================================== */

.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, var(--accent-teal-glow) 0%, transparent 70%);
  border-radius: 50%;
  animation: particleFloat 8s ease-in-out infinite;
  opacity: 0;
}

.particle:nth-child(odd) {
  background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 70%);
}

.slide.active .particle {
  opacity: 0.6;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% { opacity: 0.5; }
  50% {
    transform: translateY(-32px) translateX(16px) scale(1.1);
    opacity: 0.6;
  }
  90% { opacity: 0.5; }
}

.particle:nth-child(1) { left: 10%; top: 65%; animation-delay: 0s; animation-duration: 9s; }
.particle:nth-child(2) { left: 30%; top: 75%; animation-delay: 0.6s; animation-duration: 7s; }
.particle:nth-child(3) { left: 50%; top: 80%; animation-delay: 1.2s; animation-duration: 10s; }
.particle:nth-child(4) { left: 70%; top: 70%; animation-delay: 1.8s; animation-duration: 6s; }
.particle:nth-child(5) { left: 85%; top: 78%; animation-delay: 2.4s; animation-duration: 8s; }

/* ========================================
   PROTOCOL RINGS - Slide 32
   Staggered entry animation
   ======================================== */

.slide[data-slide="32"] .protocol-ring {
  opacity: 0;
  transform: translateY(16px) scale(0.9);
}

.slide[data-slide="32"].active .protocol-ring {
  animation: protocolRingReveal 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.slide[data-slide="32"].active .protocol-ring:nth-child(1) { animation-delay: 0.1s; }
.slide[data-slide="32"].active .protocol-ring:nth-child(2) { animation-delay: 0.2s; }
.slide[data-slide="32"].active .protocol-ring:nth-child(3) { animation-delay: 0.3s; }
.slide[data-slide="32"].active .protocol-ring:nth-child(4) { animation-delay: 0.4s; }

@keyframes protocolRingReveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Protocol summary slide up */
.slide[data-slide="32"] .protocol-summary {
  opacity: 0;
  transform: translateY(12px);
}

.slide[data-slide="32"].active .protocol-summary {
  animation: protocolSummaryReveal 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.6s forwards;
}

@keyframes protocolSummaryReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .starfield,
  .particles-container {
    display: none;
  }
}