/* ==========================================================================
   MISSION BIRTHDAY - STYLES & CINEMATIC THEMES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Cinzel:wght@600;800;900&family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --theme-primary: #E63946;   /* Mission Crimson */
  --theme-accent: #D4AF37;    /* Champagne Gold */
  --theme-bg: #090A0F;        /* Deep Obsidian */
  --theme-card: #12141D;      /* Stealth Gray */
  --theme-border: #2A2E3D;
  --theme-glow: rgba(230, 57, 70, 0.4);
}

/* 1. Theme: Don Ka Call (Retro 70s Underworld) */
body.theme-don {
  --theme-primary: #D97706;   /* Vintage Brass Amber */
  --theme-accent: #F59E0B;
  --theme-bg: #100C08;
  --theme-card: #1C150E;
  --theme-border: #3D2D1B;
  --theme-glow: rgba(217, 119, 6, 0.45);
}

/* 2. Theme: Dharma Blockbuster (Grand Romance / KJo) */
body.theme-dharma {
  --theme-primary: #EC4899;   /* Royal Rose */
  --theme-accent: #FBBF24;    /* Warm Gold */
  --theme-bg: #0F0914;
  --theme-card: #1A1024;
  --theme-border: #3D204E;
  --theme-glow: rgba(236, 72, 153, 0.4);
}

/* 3. Theme: Mass Fiesta (KGF / Pushpa Mega Action) */
body.theme-mass {
  --theme-primary: #EA580C;   /* Fiery Ember */
  --theme-accent: #EAB308;    /* Electric Gold */
  --theme-bg: #0D0502;
  --theme-card: #1B0E07;
  --theme-border: #441A0B;
  --theme-glow: rgba(234, 88, 12, 0.5);
}

body {
  background-color: var(--theme-bg);
  color: #F3F4F6;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Bollywood Display Typography */
.font-display {
  font-family: 'Anton', sans-serif;
  letter-spacing: 0.05em;
}

.font-cinematic {
  font-family: 'Cinzel', serif;
}

/* Golden Foil Shimmer Text */
.gold-gradient-text {
  background: linear-gradient(135deg, #FFF0B3 0%, #D4AF37 50%, #AA7C11 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Crimson Alert Text */
.crimson-gradient-text {
  background: linear-gradient(135deg, #FF6B6B 0%, #E63946 60%, #9B111E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Secret Agent Laser Grid Scanner */
.laser-grid {
  background-size: 30px 30px;
  background-image: 
    linear-gradient(to right, rgba(230, 57, 70, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 57, 70, 0.12) 1px, transparent 1px);
}

/* Scanline Animation */
@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(1000%); }
}

.animate-scanline {
  animation: scanline 4s linear infinite;
}

/* Film Grain Texture */
.film-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* 9:16 Vertical Mobile Trailer Frame */
.trailer-viewport {
  aspect-ratio: 9 / 16;
  max-width: 420px;
  max-height: 740px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9), 0 0 30px var(--theme-glow);
  border: 2px solid var(--theme-border);
}

/* Pulse Glows */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px var(--theme-glow); }
  50% { box-shadow: 0 0 35px var(--theme-glow); }
}

.glow-card {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Hero Reveal Glasses Animation */
@keyframes drop-glasses {
  0% { transform: translateY(-60px) scale(1.3); opacity: 0; }
  60% { transform: translateY(0px) scale(1.0); opacity: 1; }
  80% { transform: translateY(-5px); }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-sunglasses {
  animation: drop-glasses 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 0.6s;
}

/* 3D Tilt Card */
.tilt-card {
  perspective: 1000px;
  transition: transform 0.5s ease;
}

.tilt-card:hover {
  transform: translateY(-4px) rotateX(4deg) rotateY(-4deg);
}

/* Subtle Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Custom Checkbox Checkmark */
input[type="checkbox"]:checked {
  background-color: var(--theme-primary);
  border-color: var(--theme-accent);
}