:root {
    --background-light: #F0F9FF;
    --text-light: #1f2937;
    --card-bg-light: #ffffff;
    --background-dark: #111827;
    --text-dark: #d1d5db;
    --card-bg-dark: #1f2937;
}
/* Fade-in on load */
body { opacity: 0; transition: opacity 0.5s ease-in-out; }
body.loaded { opacity: 1; }

html.dark body { background-color: var(--background-dark); color: var(--text-dark); }
body { font-family: 'Inter', sans-serif; background-color: var(--background-light); color: var(--text-light); transition: background-color 0.3s ease, color 0.3s ease; }
.font-fredoka { font-family: 'Fredoka', sans-serif; }
.gradient-text { background: linear-gradient(45deg, #3B82F6, #EC4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.modal-overlay { transition: opacity 0.3s ease; }
.modal-container { transition: transform 0.3s ease; }
.video-container { position: relative; background-color: #000; border-radius: 0.75rem; overflow: hidden; }
.video-container video { width: 100%; height: 100%; display: block; }
.video-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; display: flex; align-items: center; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); opacity: 0; transition: opacity 0.3s ease; }
.video-container:hover .video-controls, .video-container.focus-within .video-controls { opacity: 1; }
.video-controls button { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 5px 10px; }
input[type=range] { -webkit-appearance: none; width: 100%; margin: 0 15px; background: transparent; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.5); border-radius: 5px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 18px; width: 18px; border-radius: 50%; background: #EC4899; cursor: pointer; margin-top: -5px; }
.big-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; color: rgba(255,255,255,0.8); cursor: pointer; transition: transform 0.2s ease, color 0.2s ease; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.big-play-button:hover { transform: translate(-50%, -50%) scale(1.1); color: white; }
.video-playing .big-play-button { display: none; }
.card-play-overlay { transition: opacity 0.3s ease-in-out; }
.video-error-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background-color: rgba(0,0,0,0.7); padding: 1rem 2rem; border-radius: 0.5rem; text-align: center; display: none; }
/* Dark mode icon rotation */
#theme-toggle i { transition: transform 0.3s ease-in-out; }
html.dark #theme-toggle i { transform: rotate(180deg); }
/* Accessibility: Skip Link */
.skip-link { position: absolute; top: -40px; left: 0; background: #3B82F6; color: white; padding: 8px; z-index: 100; transition: top 0.3s; }
.skip-link:focus { top: 0; }