/* ============================================
   CINEMATIC CSS TREATMENTS FOR IMAGES
   Movie Poster-Level Visual Effects
   ============================================ */

/* 1. TEAL/ORANGE BLOCKBUSTER - Michael Bay / Marvel Style */
.cinematic-teal-orange {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-teal-orange::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(255, 120, 0, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(0, 180, 216, 0.3) 0%, transparent 50%),
        linear-gradient(135deg, rgba(0, 150, 199, 0.2) 0%, rgba(255, 94, 0, 0.2) 100%);
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 1;
}

.cinematic-teal-orange::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
    z-index: 2;
}

.cinematic-teal-orange img {
    filter:
        contrast(1.25)
        saturate(1.4)
        brightness(1.05);
}

/* 2. GOLDEN HOUR AMPLIFIED - Top Gun / 1917 Style */
.cinematic-golden-hour {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-golden-hour::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 200, 100, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, rgba(255, 150, 50, 0.15) 0%, rgba(255, 100, 0, 0.1) 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.cinematic-golden-hour::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 40% 40%, transparent 30%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

.cinematic-golden-hour img {
    filter:
        contrast(1.25)
        brightness(1.08)
        saturate(1.45)
        sepia(0.1)
        hue-rotate(5deg);
}

/* 3. FILM GRAIN VINTAGE EPIC - Documentary War Film */
.cinematic-film-grain {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-film-grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.08;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 3;
}

.cinematic-film-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 25%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 0.75) 100%),
        linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, transparent 30%);
    pointer-events: none;
    z-index: 2;
}

.cinematic-film-grain img {
    filter:
        contrast(1.3)
        brightness(1.0)
        saturate(0.85)
        sepia(0.08);
}

/* 4. STEEL BLUE PRECISION - Sicario / Military Technical */
.cinematic-steel-blue {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-steel-blue::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(100, 140, 170, 0.25) 0%, rgba(60, 90, 120, 0.2) 100%);
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 1;
}

.cinematic-steel-blue::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 35%, rgba(10, 20, 35, 0.7) 100%),
        linear-gradient(to bottom, rgba(20, 40, 60, 0.2) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.cinematic-steel-blue img {
    filter:
        contrast(1.3)
        brightness(0.95)
        saturate(0.9)
        hue-rotate(-15deg);
}

/* 5. BLADE RUNNER NEON TECH - Sci-Fi Atmospheric */
.cinematic-neon-tech {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-neon-tech::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.12) 0%, transparent 40%),
        linear-gradient(180deg, rgba(0, 20, 40, 0.4) 0%, rgba(20, 0, 40, 0.3) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

.cinematic-neon-tech::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 10, 30, 0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

.cinematic-neon-tech img {
    filter:
        contrast(1.2)
        brightness(0.95)
        saturate(1.3)
        hue-rotate(-10deg);
}

/* 6. DARK VIGNETTE SPOTLIGHT - Nolan's Dark Knight */
.cinematic-spotlight {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 20%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.85) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.cinematic-spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 2;
}

.cinematic-spotlight img {
    filter:
        contrast(1.35)
        brightness(1.1)
        saturate(1.2);
}

/* 7. GRITTY WAR FILM - 13 Hours / Black Hawk Down */
.cinematic-war-grit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-war-grit::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 30, 35, 0.3) 0%, transparent 50%, rgba(15, 20, 25, 0.4) 100%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.cinematic-war-grit::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 2;
}

.cinematic-war-grit img {
    filter:
        contrast(1.4)
        brightness(0.9)
        saturate(0.7)
        sepia(0.15)
        hue-rotate(-5deg);
}

/* BONUS: LIGHT LEAK - Cinema Camera Flares */
.cinematic-light-leak {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cinematic-light-leak::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(255, 220, 150, 0.3) 0%, transparent 25%),
        radial-gradient(circle at 15% 20%, rgba(255, 180, 100, 0.2) 0%, transparent 20%),
        linear-gradient(135deg, rgba(255, 200, 100, 0.15) 0%, transparent 40%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
}

.cinematic-light-leak::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 2;
}

.cinematic-light-leak img {
    filter:
        contrast(1.25)
        brightness(1.1)
        saturate(1.3);
}