/**
 * FINAL POLISH - PIXEL PERFECT ALIGNMENT
 * Hungama AI Film Festival
 * 
 * Apple-grade enhancements:
 * - Hero gradient depth (vignette opacity increase 30-40%)
 * - Pure white typography + red glow accents
 * - Cinematic easing on all motion
 * - Timeline visibility + animated nodes
 * - Motion system consistency
 */

/* ============================================================
   HERO SECTIONS - ENHANCED DEPTH
   ============================================================ */

.vision-hero::before,
[class*="hero"]::before {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.70) 50%,
    rgba(225, 29, 46, 0.15) 100%
  ) !important;
}

/* Enhanced vignette depth */
.vignette {
  background: radial-gradient(
    ellipse 150% 150% at center,
    transparent 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0.75) 100%
  ) !important;
}

/* ============================================================
   TYPOGRAPHY - PURE WHITE + RED GLOW
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  text-shadow: 0 0 0 transparent;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

h1 {
  font-size: 3.5rem !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

h2 {
  font-size: 2.5rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

h3 {
  font-size: 1.75rem !important;
  line-height: 1.3 !important;
}

/* Red accent text with glow */
.text-red-600,
.text-brandRed,
[class*="red"],
a.text-red {
  color: #ef4444 !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.highlight-red,
.accent-text {
  background: linear-gradient(135deg, #ffffff 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.2));
}

/* ============================================================
   MOTION SYSTEM - CINEMATIC EASING ENFORCEMENT
   ============================================================ */

/* Replace all ease with cubic-bezier(0.4, 0, 0.2, 1) */
* {
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button,
a,
.interactive,
[role="button"],
.card,
.hover-element {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 300ms !important;
}

/* ============================================================
   TIMELINE ENHANCEMENTS
   ============================================================ */

.timeline-vertical-line {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(239, 68, 68, 0.2) 5%,
    rgba(239, 68, 68, 0.6) 50%,
    rgba(239, 68, 68, 0.2) 95%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
  width: 2px !important;
}

.timeline-dot {
  width: 20px !important;
  height: 20px !important;
  background: #ef4444 !important;
  border: 3px solid rgba(0, 0, 0, 0.95) !important;
  box-shadow: 
    0 0 0 2px #ef4444,
    0 0 24px rgba(239, 68, 68, 0.8) !important;
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 
      0 0 0 2px #ef4444,
      0 0 24px rgba(239, 68, 68, 0.8),
      0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 
      0 0 0 2px #ef4444,
      0 0 32px rgba(239, 68, 68, 1),
      0 0 8px 2px rgba(239, 68, 68, 0.3);
  }
  100% {
    box-shadow: 
      0 0 0 2px #ef4444,
      0 0 24px rgba(239, 68, 68, 0.8),
      0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.timeline-step-content {
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.03) !important;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation: fadeInUp 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  opacity: 0;
}

.timeline-step-content:nth-child(1) { animation-delay: 0ms !important; }
.timeline-step-content:nth-child(2) { animation-delay: 100ms !important; }
.timeline-step-content:nth-child(3) { animation-delay: 200ms !important; }
.timeline-step-content:nth-child(4) { animation-delay: 300ms !important; }
.timeline-step-content:nth-child(5) { animation-delay: 400ms !important; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.timeline-step-content:hover {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(239, 68, 68, 0.3) !important;
}

/* ============================================================
   CARD SYSTEM - CONSISTENT HOVER MOTION
   ============================================================ */

.card,
.press-release-card,
.nominee-card,
.jury-card,
.tech-partner-card,
.brand-asset-card {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover,
.press-release-card:hover,
.nominee-card:hover,
.jury-card:hover,
.tech-partner-card:hover,
.brand-asset-card:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 
    0 16px 32px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(239, 68, 68, 0.25) !important;
}

/* ============================================================
   BUTTON ENHANCEMENTS
   ============================================================ */

button,
.btn,
[role="button"],
.cta-button {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

button:hover,
.btn:hover,
[role="button"]:hover,
.cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 12px 24px rgba(239, 68, 68, 0.25),
    0 0 16px rgba(239, 68, 68, 0.2) !important;
}

button:active,
.btn:active,
[role="button"]:active,
.cta-button:active {
  transform: translateY(0) !important;
}

/* ============================================================
   LOGO HOVER - MONOCHROME TO COLOR TRANSITION
   ============================================================ */

.partner-logo,
.sponsor-logo,
.logo,
[class*="logo"] {
  filter: grayscale(1) brightness(0.9) !important;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.partner-logo:hover,
.sponsor-logo:hover,
.logo:hover,
[class*="logo"]:hover {
  filter: grayscale(0) brightness(1.1) drop-shadow(0 0 16px rgba(239, 68, 68, 0.4)) !important;
}

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

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

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[data-scroll-animate] {
  animation: slideInUp 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  opacity: 0;
}

/* ============================================================
   SECTION TRANSITIONS - CINEMATIC BLENDING
   ============================================================ */

section {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

section::after {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   GLASS ELEMENTS - INNER GLOW
   ============================================================ */

.glass,
[class*="glass"],
.backdrop-blur {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 
    inset 0 0 1px rgba(255, 255, 255, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.glass:hover,
[class*="glass"]:hover,
.backdrop-blur:hover {
  box-shadow: 
    inset 0 0 2px rgba(255, 255, 255, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(239, 68, 68, 0.15) !important;
}

/* ============================================================
   INPUT FOCUS STATES
   ============================================================ */

input,
textarea,
select {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 
    0 0 0 3px rgba(239, 68, 68, 0.1),
    inset 0 0 0 1px rgba(239, 68, 68, 0.2) !important;
}

/* ============================================================
   BREADCRUMBS & NAVIGATION
   ============================================================ */

nav a {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

nav a:hover {
  color: #ef4444 !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   RESPONSIVENESS
   ============================================================ */

@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.25rem !important; }
  
  .timeline-step { gap: 1.5rem !important; }
  
  .card:hover,
  .press-release-card:hover {
    transform: translateY(-2px) scale(1.005) !important;
  }
}

/* ============================================================
   VISION PAGE - HERO TEXT SPLIT COLORS
   ============================================================ */

h1 span.text-white {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

h1 span.text-red-600 {
  color: #8b2e2e !important;
  text-shadow: 0 0 12px rgba(139, 46, 46, 0.4);
  font-weight: 700 !important;
}