:root {
  --background: 120 16% 96%;
  --foreground: 132 18% 8%;
  --primary: 126 100% 52%;
  --primary-foreground: 132 28% 5%;
  --secondary: 210 10% 82%;
  --secondary-foreground: 132 18% 8%;
  --muted: 140 8% 88%;
  --muted-foreground: 132 8% 35%;
  --destructive: 0 84% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 132 10% 78%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 24px hsl(126 100% 20% / 0.12);
  --shadow-md: 0 18px 48px hsl(126 100% 18% / 0.18);
  --shadow-lg: 0 30px 90px hsl(126 100% 14% / 0.28);
  --transition-fast: 140ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.75rem;
}
.dark {
  --background: 132 20% 3%;
  --foreground: 130 24% 94%;
  --primary: 126 100% 52%;
  --primary-foreground: 132 28% 5%;
  --secondary: 210 8% 72%;
  --secondary-foreground: 132 20% 4%;
  --muted: 132 12% 13%;
  --muted-foreground: 132 10% 68%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 132 14% 20%;
  --card: 132 18% 7%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, hsl(126 100% 52% / .16), transparent 34rem),
    radial-gradient(circle at 90% 20%, hsl(210 10% 82% / .14), transparent 28rem),
    linear-gradient(135deg, hsl(var(--background)), hsl(132 24% 2%));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button, a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1rem); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.glass {
  background: linear-gradient(145deg, hsl(var(--card) / .88), hsl(var(--card) / .54));
  border: 1px solid hsl(var(--border) / .9);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px);
}
.neon-text { text-shadow: 0 0 22px hsl(var(--primary) / .65); }
.neon-ring { box-shadow: 0 0 0 1px hsl(var(--primary) / .42), 0 0 42px hsl(var(--primary) / .24); }
.scan-grid {
  background-image: linear-gradient(hsl(var(--primary) / .09) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--primary) / .09) 1px, transparent 1px);
  background-size: 28px 28px;
}
.trainer-stage {
  background:
    radial-gradient(circle at 50% 30%, hsl(var(--primary) / .18), transparent 15rem),
    linear-gradient(180deg, hsl(132 22% 8%), hsl(132 24% 2%));
  position: relative;
  overflow: hidden;
}
.trainer-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 15;
}
.youtube-demo-frame { 
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / .15); 
  border-radius: var(--radius-lg);
}
.live-dot { width: .7rem; height: .7rem; border-radius: 999px; background: hsl(var(--primary)); box-shadow: 0 0 18px hsl(var(--primary)); animation: livePulse 1s ease-in-out infinite alternate; }
.coach-subtitle { 
  position: absolute; 
  z-index: 25; 
  left: 1.5rem; 
  right: 1.5rem; 
  bottom: 8.5rem; 
  padding: 1.25rem 1.5rem; 
  border-radius: 1.5rem; 
  background: rgba(0, 0, 0, 0.9); 
  border: 1px solid hsl(var(--primary) / .4); 
  color: #fff; 
  font-weight: 800; 
  font-size: 1.15rem; 
  text-align: left; 
  line-height: 1.35; 
  box-shadow: 0 15px 50px rgba(0,0,0,0.6);
  animation: subtitleSlide .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes subtitleSlide { from { opacity: 0; transform: translateY(15px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.video-center-control { position: absolute; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 6rem; height: 6rem; border-radius: 999px; display: grid; place-items: center; background: hsl(var(--primary) / .98); color: hsl(var(--primary-foreground)); box-shadow: 0 0 80px hsl(var(--primary) / .6); opacity: 0; transition: all var(--transition-smooth); }
.trainer-compact .video-center-control { width: 4.5rem; height: 4.5rem; }
.youtube-demo-frame:hover .video-center-control, .video-center-control:focus-visible, .video-center-control.is-paused { opacity: 1; transform: translate(-50%, -50%) scale(1.15); outline: none; }
.video-controls-bar { position: absolute; z-index: 45; left: 1.25rem; right: 1.25rem; bottom: 1rem; min-height: 3.5rem; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: .75rem 1.5rem; border-radius: 1.25rem; background: rgba(0, 0, 0, 0.92); border: 1px solid hsl(var(--primary) / .3); color: hsl(var(--muted-foreground)); font-size: .8rem; font-weight: 900; backdrop-filter: blur(20px); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.video-timeline { height: .6rem; border-radius: 999px; overflow: hidden; background: hsl(var(--muted) / .2); position: relative; border: 1px solid white/5; }
.video-timeline div { height: 100%; background: hsl(var(--primary)); box-shadow: 0 0 25px hsl(var(--primary)); animation: timelineLoop 60s linear infinite; width: 0; }
.trainer-paused, .trainer-paused * { animation-play-state: paused !important; }
@keyframes timelineLoop { from { width: 0; } to { width: 100%; } }
@keyframes livePulse { from { opacity: .3; transform: scale(.7); } to { opacity: 1; transform: scale(1.3); } }
.progress-glow { box-shadow: 0 0 35px hsl(var(--primary) / .9); }
.cinematic-enter { animation: cinematicEnter .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cinematicEnter { from { opacity: 0; transform: translateY(50px); filter: blur(20px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.safe-bottom { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.bottom-nav { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

/* Movie effect for video */
video {
  filter: contrast(1.15) brightness(0.85) saturate(1.2) sepia(0.05);
  transition: filter 0.6s ease;
}
.trainer-stage:hover video {
  filter: contrast(1.2) brightness(0.95) saturate(1.3);
}

.pulse-primary { animation: pulsePrimary 2s infinite; }
@keyframes pulsePrimary { 0% { box-shadow: 0 0 0 0 rgba(34, 255, 0, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(34, 255, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 255, 0, 0); } }

/* Premium athletic breathing bounce animation for still images */
@keyframes athleticBounce {
  0% { transform: scale(1.02) translateY(0); }
  50% { transform: scale(1.05) translateY(-3px); filter: brightness(1.04) contrast(1.1); }
  100% { transform: scale(1.02) translateY(0); }
}
.athletic-bounce {
  animation: athleticBounce 3.2s ease-in-out infinite;
}