/* Grainy Red Gradient & Rough Glass Effect */

.grain-container {
    position: relative;
    overflow: hidden;
    background: #000;
}

/* Red shimmering "Engine Life" - Smaller, more focused blobs */
.grain-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #000;
}

.grain-blob {
    position: absolute;
    width: 8vw;
    /* 3x smaller than 25vw */
    height: 8vw;
    border-radius: 50%;
    filter: blur(35px);
    /* Adjusted for smaller size */
    opacity: 0.5;
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: left, top;

    /* Physics handled by grain-mouse.js velocity engine */
    left: var(--blob-x, 50%);
    top: var(--blob-y, 50%);
    transform: translate(-50%, -50%);
    transition: none;
}

.blob-1 {
    background: radial-gradient(circle, #FF0000 0%, var(--color-primary) 50%, transparent 90%);
    z-index: 10;
    opacity: 0.8;
}

.blob-2 {
    background: radial-gradient(circle, #D40A0A 0%, #990808 50%, transparent 85%);
    z-index: 9;
    opacity: 0.6;
}

.blob-3 {
    background: radial-gradient(circle, var(--color-primary) 0%, #800000 50%, transparent 80%);
    z-index: 8;
    opacity: 0.5;
}

.blob-4 {
    background: radial-gradient(circle, #800000 0%, #4D0000 60%, transparent 75%);
    z-index: 7;
    opacity: 0.4;
}

.blob-5 {
    background: radial-gradient(circle, #660000 0%, transparent 70%);
    z-index: 6;
    opacity: 0.3;
}



/* Semi-transparent "Rough Glass" Pane */
.glass-pane {
    position: absolute;
    inset: 0;
    z-index: 10;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.01) 100%);

    /* Premium Inner Glow & Edge Highlight */
    box-shadow:
        inset 0 1px 0px rgba(255, 255, 255, 0.25),
        /* Top Edge */
        inset 0 -1px 0px rgba(0, 0, 0, 0.3),
        /* Bottom Detail */
        inset 0 0 240px rgba(230, 12, 12, 0.05);
    /* Subtle Red Inner Glow */
}

/* The Grain/Roughness - Noble Filmic Grain */
.glass-pane::before {
    content: '';
    position: absolute;
    inset: -200%;
    /* Monochrome Fractal Noise for that premium feel */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 150px 150px;
    opacity: 0.15;
    /* Subtler, more elegant */
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 11;
    animation: film-jitter 0.2s steps(4) infinite;
    will-change: transform;
    /* Protect UI thread */
    transform: translateZ(0);
}

@keyframes film-jitter {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-1%, -1.5%);
    }

    50% {
        transform: translate(1.5%, 0.5%);
    }

    75% {
        transform: translate(-0.5%, 1%);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* --- FILMIC IMAGE GRAIN (Automatic for Galleres) --- */

/* Apply this class to any image container to give it a vintage film look */
.filmic-grain,
.panel {
    position: relative;
    overflow: hidden;
}

.filmic-grain::after,
.panel::after {
    content: '';
    position: absolute;
    inset: -100%;
    /* Extra margin for jitter animation */
    z-index: 50;
    pointer-events: none;

    /* Heavy Film Grain - Visible & Textured */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    background-size: 150px 150px;
    opacity: 0.9;
    mix-blend-mode: overlay;

    /* Reusing the jitter animation for "living" texture */
    animation: film-jitter 0.25s steps(4) infinite;
    will-change: transform;
}

/* Subtle vignette to focus the eye on film-style shots */
.filmic-grain::before,
.panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

/* Content layer */
.grain-content {
    position: relative;
    z-index: 20;
}

/* --- TEXT ENHANCEMENT --- */

/* Special class for 'Living' Grainy Typography */
.grain-text {
    position: relative;
    /* Base color fallback */
    color: #FF0000;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;

    /* Much finer noise (0.85) to fix pixelation on retina displays */
    /* Layer 2: Gradient base */
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.65'/%3E%3C/svg%3E"),
        linear-gradient(to bottom, #FF1A1A, #A60000);

    /* Smaller background size for finer detail */
    background-size: 150px 150px, 100% 100%;

    /* Using 'multiply' keeps it deep red/metallic instead of pinkish 'color-dodge' */
    background-blend-mode: multiply, normal;
    background-repeat: repeat;

    /* Animation uses percentages to avoid sub-pixel tearing on Safari */
    animation: text-grain-boil 0.2s steps(4) infinite;

    /* 🔥 CRITICAL FIX: Removed filter: drop-shadow(...) ! 
       Applying drop shadow to background-clip:text causes severe visual striping/corruption in iOS Safari.
       The glow is already handled correctly by the absolute blur span injected in the JS template. */
}

@keyframes text-grain-boil {
    0% {
        background-position: 0% 0%, 0 0;
    }

    25% {
        background-position: 12% 18%, 0 0;
    }

    50% {
        background-position: 23% 7%, 0 0;
    }

    75% {
        background-position: 8% 25%, 0 0;
    }

    100% {
        background-position: 0% 0%, 0 0;
    }
}