/* ═══════════════════════════════════════════════════════════
   55 – FILM-GRAIN OVERLAY
   Cinematic Analog-Textur · Ultra-Luxury „Human Touch"
   Benchmark: Byredo / Aesop / Cartier
   
   Hauchzarter, animierter Film-Grain über der gesamten Seite.
   Signalisiert dem Unterbewusstsein: „handgemacht, nicht KI".
   Auf 120Hz-Displays besonders edel.
   
   TECHNIK:
   - SVG feTurbulence-Filter erzeugt prozedurales Grain
   - Kein externes Bild nötig → 0 Bytes extra Download
   - mix-blend-mode:overlay → verschmilzt mit jedem Hintergrund
   - steps(5) Animation → erzeugt organisches Korn-Flimmern
   - pointer-events:none → blockiert keine Interaktion
   ═══════════════════════════════════════════════════════════ */

.ophyr-film-grain {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.028;
    mix-blend-mode: overlay;
    /* SVG-Filter wird via JS als inline-SVG injiziert */
    filter: url(#ophyr-grain-filter);
    /* Vollständige Viewport-Abdeckung */
    width: 100vw;
    height: 100vh;
    /* GPU-Layer erzwingen für Performance */
    will-change: transform;
    /* Animation: Subtile Verschiebung erzeugt organisches Flimmern */
    animation: grain-shift 0.6s steps(5) infinite;
}

/* Grain-Flimmern: Subtile Position-Shifts simulieren
   wechselnde Korn-Muster auf 120Hz-Displays.
   steps(5) statt linear → sieht aus wie echtes Filmkorn,
   nicht wie digitales Rauschen. */
@keyframes grain-shift {
    0%   { transform: translate3d(0, 0, 0); }
    20%  { transform: translate3d(-1.5%, -2.5%, 0); }
    40%  { transform: translate3d(2%, 1%, 0); }
    60%  { transform: translate3d(-0.5%, 2%, 0); }
    80%  { transform: translate3d(1.5%, -1.5%, 0); }
    100% { transform: translate3d(-1%, 0.5%, 0); }
}

/* ── Mobile: Komplett deaktivieren (SVG-Filter + Animation zu teuer für 120Hz) ── */
@media (max-width: 47.99rem) {
    .ophyr-film-grain {
        display: none !important;
    }
}

/* ── Reduced Motion: Grain statisch (kein Flimmern) ── */
@media (prefers-reduced-motion: reduce) {
    .ophyr-film-grain {
        animation: none;
        opacity: 0.015;
    }
}