/* ============================================
   SLEEP APNEA TRAFFIC LIGHT - ANIMATIONS
   ============================================ */
/* --- Keyframes --- */
/* General Fade / Slide */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
/* Floating Blobs */
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 20px) scale(0.95); }
}
/* Dot Pulse (badge) */
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.3); }
}
/* Traffic Light Glow Pulses */
@keyframes glowPulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.3); }
}
@keyframes glowPulseSlow {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.25); }
}
/* Hero Preview Traffic Light - Cycle through lights */
@keyframes tl-red-on {
  0%, 15%, 100% { background: radial-gradient(circle at 35% 35%, #5a1a1a, #2d0d0d); box-shadow: inset 0 4px 12px rgba(0,0,0,0.5); }
  20%, 60%      { background: radial-gradient(circle at 35% 35%, #FF5252, #C62828); box-shadow: 0 0 40px rgba(198,40,40,0.8), 0 0 80px rgba(198,40,40,0.4); }
}
@keyframes tl-yellow-on {
  0%, 25%, 100% { background: radial-gradient(circle at 35% 35%, #4a3a0d, #221a06); box-shadow: inset 0 4px 12px rgba(0,0,0,0.5); }
  35%, 60%      { background: radial-gradient(circle at 35% 35%, #FFD740, #F9A825); box-shadow: 0 0 40px rgba(249,168,37,0.8), 0 0 80px rgba(249,168,37,0.4); }
}
@keyframes tl-green-on {
  0%, 65%, 100% { background: radial-gradient(circle at 35% 35%, #0d3a1a, #071a0d); box-shadow: inset 0 4px 12px rgba(0,0,0,0.5); }
  70%, 90%      { background: radial-gradient(circle at 35% 35%, #69F0AE, #2E7D32); box-shadow: 0 0 40px rgba(46,125,50,0.8), 0 0 80px rgba(46,125,50,0.4); }
}
/* Hero preview cycle animations */
.hero-tl-red    { animation: tl-red-on    6s ease-in-out infinite; }
.hero-tl-yellow { animation: tl-yellow-on 6s ease-in-out infinite; }
.hero-tl-green  { animation: tl-green-on  6s ease-in-out infinite; }
/* Step Form Transition */
@keyframes stepIn {
  from { opacity: 0; transform: translateX(20px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes stepOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-20px); }
}
/* Progress bar analyze */
@keyframes analyzeProgress {
  0%   { width: 0%; }
  20%  { width: 30%; }
  50%  { width: 65%; }
  80%  { width: 85%; }
  100% { width: 100%; }
}
/* Result reveal */
@keyframes resultReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.result-wrapper {
  animation: resultReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Traffic light result - bounce in */
@keyframes trafficLightDrop {
  0%   { transform: translateY(-80px) rotate(-5deg); opacity: 0; }
  60%  { transform: translateY(8px) rotate(1deg); opacity: 1; }
  80%  { transform: translateY(-4px) rotate(-0.5deg); }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
/* 애니메이션은 JS에서 클래스를 통해 제어 - 기본 opacity 제거 */
.result-traffic-light-display .traffic-light-housing {
  opacity: 1;
}
.result-traffic-light-display .traffic-light-housing.do-drop {
  animation: trafficLightDrop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Confetti Particles (green result) */
@keyframes confettiDrop {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(80px) rotate(360deg); opacity: 0; }
}
.confetti-particle {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confettiDrop 1.5s ease-in forwards;
  pointer-events: none;
}
/* Warning Pulse (yellow result) */
@keyframes warningPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.05); opacity: 0.85; }
}
/* Danger Shake (red result) */
@keyframes dangerShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80%      { transform: translateX(4px); }
}
/* Score counter animation */
@keyframes countUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
/* Choice button ripple */
.choice-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(21,101,192,0.2), transparent);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.choice-btn:active::before {
  transform: scale(2);
  opacity: 1;
}
/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/* Floating card in hero */
@keyframes floatCard {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(1deg); }
}
.hero-preview-card { animation: floatCard 5s ease-in-out infinite; }
/* Shimmer loading effect */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* Notification badge bounce */
@keyframes badgeBounce {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}
/* Traffic light sequential illuminate (result display) */
.tl-illuminate-red {
  animation: illuminateRed 0.5s ease forwards;
}
.tl-illuminate-yellow {
  animation: illuminateYellow 0.5s ease forwards;
}
.tl-illuminate-green {
  animation: illuminateGreen 0.5s ease forwards;
}
@keyframes illuminateRed {
  from { background: radial-gradient(circle at 35% 35%, #5a1a1a, #2d0d0d); box-shadow: inset 0 4px 12px rgba(0,0,0,0.5); }
  to   { background: radial-gradient(circle at 35% 35%, #FF5252, #C62828); box-shadow: 0 0 40px rgba(198,40,40,0.9), 0 0 80px rgba(198,40,40,0.5); }
}
@keyframes illuminateYellow {
  from { background: radial-gradient(circle at 35% 35%, #4a3a0d, #221a06); box-shadow: inset 0 4px 12px rgba(0,0,0,0.5); }
  to   { background: radial-gradient(circle at 35% 35%, #FFD740, #F9A825); box-shadow: 0 0 40px rgba(249,168,37,0.9), 0 0 80px rgba(249,168,37,0.5); }
}
@keyframes illuminateGreen {
  from { background: radial-gradient(circle at 35% 35%, #0d3a1a, #071a0d); box-shadow: inset 0 4px 12px rgba(0,0,0,0.5); }
  to   { background: radial-gradient(circle at 35% 35%, #69F0AE, #2E7D32); box-shadow: 0 0 40px rgba(46,125,50,0.9), 0 0 80px rgba(46,125,50,0.5); }
}
/* Particle burst */
@keyframes burstParticle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
/* result header decoration line */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
/* Trust counter count up animation */
.trust-count {
  display: inline-block;
  animation: countUp 0.6s ease forwards;
}