/* ===== CINEMATIC & FILM-STYLE VISUAL EFFECTS ===== */

/* Camera Movement Effects */
@keyframes cinematicPan {
  0% {
    transform: translateX(-100%) scale(1.1);
  }
  100% {
    transform: translateX(100%) scale(1.1);
  }
}

@keyframes cinematicZoom {
  0% {
    transform: scale(1) translateZ(0);
    filter: blur(0px);
  }
  50% {
    transform: scale(1.5) translateZ(100px);
    filter: blur(2px);
  }
  100% {
    transform: scale(2) translateZ(200px);
    filter: blur(0px);
  }
}

@keyframes dollyZoom {
  0% {
    transform: perspective(1000px) translateZ(0) scale(1);
  }
  50% {
    transform: perspective(500px) translateZ(-200px) scale(1.5);
  }
  100% {
    transform: perspective(300px) translateZ(-400px) scale(2);
  }
}

@keyframes trackingShot {
  0% {
    transform: translateX(-50px) rotateY(-10deg);
  }
  25% {
    transform: translateX(0) rotateY(0deg);
  }
  50% {
    transform: translateX(50px) rotateY(10deg);
  }
  75% {
    transform: translateX(25px) rotateY(5deg);
  }
  100% {
    transform: translateX(0) rotateY(0deg);
  }
}

/* Lighting Effects */
@keyframes dramaticLighting {
  0% {
    box-shadow: 
      -50px -50px 100px rgba(255, 215, 0, 0.3),
      50px 50px 100px rgba(0, 100, 255, 0.2);
    filter: contrast(1) brightness(1);
  }
  50% {
    box-shadow: 
      50px -50px 150px rgba(255, 100, 100, 0.4),
      -50px 50px 150px rgba(100, 255, 100, 0.3);
    filter: contrast(1.3) brightness(1.2);
  }
  100% {
    box-shadow: 
      0 -100px 200px rgba(255, 255, 255, 0.2),
      0 100px 200px rgba(0, 0, 0, 0.4);
    filter: contrast(1.1) brightness(0.9);
  }
}

@keyframes spotlightSweep {
  0% {
    background: radial-gradient(ellipse 200px 100px at 0% 50%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(255, 255, 255, 0.4) 40%, 
      transparent 70%);
  }
  50% {
    background: radial-gradient(ellipse 200px 100px at 50% 50%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(255, 255, 255, 0.4) 40%, 
      transparent 70%);
  }
  100% {
    background: radial-gradient(ellipse 200px 100px at 100% 50%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(255, 255, 255, 0.4) 40%, 
      transparent 70%);
  }
}

@keyframes filmNoir {
  0%, 100% {
    filter: contrast(1.5) brightness(0.8) saturate(0.3);
    box-shadow: 
      inset 100px 0 200px rgba(0, 0, 0, 0.7),
      inset -100px 0 200px rgba(0, 0, 0, 0.7);
  }
  50% {
    filter: contrast(2) brightness(0.6) saturate(0.1);
    box-shadow: 
      inset 150px 0 300px rgba(0, 0, 0, 0.8),
      inset -150px 0 300px rgba(0, 0, 0, 0.8);
  }
}

/* Transition Effects */
@keyframes fadeToBlack {
  0% {
    opacity: 1;
    filter: brightness(1);
  }
  80% {
    opacity: 0.3;
    filter: brightness(0.3);
  }
  100% {
    opacity: 0;
    filter: brightness(0);
  }
}

@keyframes crossFade {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wipeTransition {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes irisTransition {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(100% at 50% 50%);
  }
}

/* Film Grain and Texture */
@keyframes filmGrain {
  0%, 100% {
    background-position: 0% 0%;
    opacity: 0.03;
  }
  10% {
    background-position: -5% -10%;
    opacity: 0.05;
  }
  20% {
    background-position: -15% 5%;
    opacity: 0.04;
  }
  30% {
    background-position: 7% -25%;
    opacity: 0.06;
  }
  40% {
    background-position: -5% 25%;
    opacity: 0.03;
  }
  50% {
    background-position: -15% -10%;
    opacity: 0.05;
  }
  60% {
    background-position: 15% 0%;
    opacity: 0.04;
  }
  70% {
    background-position: 0% 15%;
    opacity: 0.06;
  }
  80% {
    background-position: 3% -20%;
    opacity: 0.03;
  }
  90% {
    background-position: -10% 10%;
    opacity: 0.05;
  }
}

@keyframes vintageFlicker {
  0%, 100% {
    opacity: 1;
    filter: sepia(0.3) contrast(1.2) brightness(1);
  }
  2% {
    opacity: 0.95;
    filter: sepia(0.4) contrast(1.3) brightness(0.9);
  }
  4% {
    opacity: 1;
    filter: sepia(0.2) contrast(1.1) brightness(1.1);
  }
  6% {
    opacity: 0.98;
    filter: sepia(0.5) contrast(1.4) brightness(0.8);
  }
  8% {
    opacity: 1;
    filter: sepia(0.3) contrast(1.2) brightness(1);
  }
}

/* Depth of Field Effects */
@keyframes focusPull {
  0% {
    filter: blur(5px) brightness(0.8);
    transform: scale(0.95);
  }
  50% {
    filter: blur(0px) brightness(1.1);
    transform: scale(1.02);
  }
  100% {
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
}

@keyframes rackFocus {
  0% {
    filter: blur(8px);
    opacity: 0.7;
  }
  30% {
    filter: blur(4px);
    opacity: 0.85;
  }
  60% {
    filter: blur(1px);
    opacity: 0.95;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

/* Color Grading Effects */
@keyframes colorGrading {
  0% {
    filter: hue-rotate(0deg) saturate(1) contrast(1) brightness(1);
  }
  25% {
    filter: hue-rotate(30deg) saturate(1.3) contrast(1.2) brightness(1.1);
  }
  50% {
    filter: hue-rotate(60deg) saturate(0.8) contrast(1.4) brightness(0.9);
  }
  75% {
    filter: hue-rotate(90deg) saturate(1.1) contrast(1.1) brightness(1.2);
  }
  100% {
    filter: hue-rotate(120deg) saturate(1) contrast(1) brightness(1);
  }
}

@keyframes tealOrange {
  0%, 100% {
    filter: 
      sepia(0.3) 
      saturate(1.4) 
      hue-rotate(170deg) 
      contrast(1.2) 
      brightness(1.1);
  }
  50% {
    filter: 
      sepia(0.5) 
      saturate(1.6) 
      hue-rotate(200deg) 
      contrast(1.4) 
      brightness(0.9);
  }
}

/* Lens Effects */
@keyframes lensFlare {
  0% {
    background: radial-gradient(circle at 20% 20%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(255, 200, 100, 0.6) 20%, 
      rgba(255, 100, 100, 0.4) 40%, 
      transparent 60%);
    opacity: 0;
  }
  50% {
    background: radial-gradient(circle at 50% 50%, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(255, 200, 100, 0.8) 20%, 
      rgba(255, 100, 100, 0.6) 40%, 
      transparent 60%);
    opacity: 1;
  }
  100% {
    background: radial-gradient(circle at 80% 80%, 
      rgba(255, 255, 255, 0.8) 0%, 
      rgba(255, 200, 100, 0.6) 20%, 
      rgba(255, 100, 100, 0.4) 40%, 
      transparent 60%);
    opacity: 0;
  }
}

@keyframes chromaticAberration {
  0%, 100% {
    filter: 
      drop-shadow(2px 0 0 red) 
      drop-shadow(-2px 0 0 cyan);
  }
  50% {
    filter: 
      drop-shadow(4px 0 0 red) 
      drop-shadow(-4px 0 0 cyan) 
      drop-shadow(0 2px 0 yellow) 
      drop-shadow(0 -2px 0 magenta);
  }
}

/* Motion Blur Effects */
@keyframes motionBlur {
  0% {
    filter: blur(0px);
    transform: translateX(0);
  }
  50% {
    filter: blur(3px);
    transform: translateX(100px);
  }
  100% {
    filter: blur(0px);
    transform: translateX(200px);
  }
}

@keyframes speedLines {
  0% {
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.1) 45%, 
      rgba(255, 255, 255, 0.3) 50%, 
      rgba(255, 255, 255, 0.1) 55%, 
      transparent 100%);
    transform: translateX(-100%);
  }
  100% {
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.1) 45%, 
      rgba(255, 255, 255, 0.3) 50%, 
      rgba(255, 255, 255, 0.1) 55%, 
      transparent 100%);
    transform: translateX(100%);
  }
}

/* Utility Classes */
.cinematic-pan {
  animation: cinematicPan 10s infinite linear;
  overflow: hidden;
}

.cinematic-zoom {
  animation: cinematicZoom 8s infinite ease-in-out;
  transform-style: preserve-3d;
}

.dolly-zoom {
  animation: dollyZoom 6s infinite ease-in-out;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.tracking-shot {
  animation: trackingShot 5s infinite ease-in-out;
  transform-style: preserve-3d;
}

.dramatic-lighting {
  animation: dramaticLighting 8s infinite ease-in-out;
  position: relative;
}

.spotlight-sweep {
  animation: spotlightSweep 6s infinite linear;
  position: relative;
  overflow: hidden;
}

.film-noir {
  animation: filmNoir 10s infinite ease-in-out;
  position: relative;
}

.fade-to-black {
  animation: fadeToBlack 3s ease-in-out;
}

.cross-fade {
  animation: crossFade 4s infinite ease-in-out;
}

.wipe-transition {
  animation: wipeTransition 2s ease-in-out;
}

.iris-transition {
  animation: irisTransition 3s ease-in-out;
}

.film-grain {
  position: relative;
}

.film-grain::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 80%, transparent 0%, rgba(255,255,255,0.3) 1%, transparent 1.5%),
    radial-gradient(circle at 80% 20%, transparent 0%, rgba(255,255,255,0.3) 1%, transparent 1.5%),
    radial-gradient(circle at 40% 40%, transparent 0%, rgba(255,255,255,0.3) 1%, transparent 1.5%);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  animation: filmGrain 0.2s infinite;
  pointer-events: none;
}

.vintage-flicker {
  animation: vintageFlicker 0.1s infinite;
}

.focus-pull {
  animation: focusPull 4s ease-in-out;
}

.rack-focus {
  animation: rackFocus 3s ease-out;
}

.color-grading {
  animation: colorGrading 8s infinite ease-in-out;
}

.teal-orange {
  animation: tealOrange 6s infinite ease-in-out;
}

.lens-flare {
  animation: lensFlare 4s infinite ease-in-out;
  position: relative;
}

.chromatic-aberration {
  animation: chromaticAberration 2s infinite ease-in-out;
}

.motion-blur {
  animation: motionBlur 3s infinite ease-in-out;
}

.speed-lines {
  position: relative;
  overflow: hidden;
}

.speed-lines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: speedLines 0.5s infinite linear;
  pointer-events: none;
}

/* Cinematic Containers */
.cinematic-scene {
  position: relative;
  overflow: hidden;
  background: #000;
}

.letterbox {
  position: relative;
}

.letterbox::before,
.letterbox::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 10%;
  background: #000;
  z-index: 10;
}

.letterbox::before {
  top: 0;
}

.letterbox::after {
  bottom: 0;
}

/* Performance Optimizations */
.cinematic-container {
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

.cinematic-container * {
  will-change: transform, filter;
  transform-style: preserve-3d;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .cinematic-pan {
    animation-duration: 15s;
  }
  
  .cinematic-zoom {
    animation-duration: 12s;
  }
  
  .letterbox::before,
  .letterbox::after {
    height: 8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-pan,
  .cinematic-zoom,
  .dolly-zoom,
  .tracking-shot,
  .dramatic-lighting,
  .spotlight-sweep,
  .film-noir,
  .cross-fade,
  .focus-pull,
  .rack-focus,
  .color-grading,
  .teal-orange,
  .lens-flare,
  .chromatic-aberration,
  .motion-blur {
    animation-duration: 20s;
    animation-iteration-count: 1;
  }
  
  .film-grain::before,
  .vintage-flicker,
  .speed-lines::before {
    animation: none;
  }
}