/**
 * Cinematic Ivory — Animations Stylesheet
 * 
 * Purpose: Defines keyframe-driven visual effects such as film grain shifting
 * and defines the classes for scroll-fades. Uses js-enabled prefixes to
 * ensure progressive enhancement.
 */

/* ==================================================
   1. FILM GRAIN OVERLAY (.film-grain)
   Purpose: Infinite translation loop shifting SVG turbulence noise coordinates.
   ================================================== */
.film-grain {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200%;
    background: transparent url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E') repeat;
    opacity: 0.038;
    pointer-events: none;
    z-index: 99999;
    animation: grain-shift 8s steps(10) infinite;
}

@keyframes grain-shift {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(-7%, -20%); }
    40% { transform: translate(-18%, 15%); }
    50% { transform: translate(-10%, 10%); }
    60% { transform: translate(-15%, -15%); }
    70% { transform: translate(-20%, 18%); }
    80% { transform: translate(-5%, -20%); }
    90% { transform: translate(-10%, 5%); }
}


/* ==================================================
   2. IMAGE ZOOM & REVEAL TRANSITIONS (.reveal-wrapper)
   Purpose: Slow scaling animations.
   ================================================== */
.reveal-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.reveal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15);
    transition: transform 1.8s var(--ease-expo);
}

.reveal-wrapper.active .reveal-image {
    transform: scale(1);
}


/* ==================================================
   3. PROGRESSIVE ENHANCEMENT ANIMATION TRIGGERS
   Purpose: CSS opacity 0 is ONLY applied if Javascript executes successfully
   and adds the '.js-enabled' class to the html root. If JS is offline,
   all sections load fully visible by default.
   ================================================== */
/* General scroll fade elements */
.js-enabled .fade-up-init {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth);
}

/* Activated via scrollTrigger callbacks or scroll classes toggles */
.js-enabled .fade-up-init.fade-up-active,
.fade-up-init.fade-up-active {
    opacity: 1;
    transform: translateY(0);
}


/* ==================================================
   4. CINEMATIC SLOW ZOOM (Ken Burns Backgrounds)
   Purpose: Subtle slow-loop zoom for hero backdrop overlays.
   ================================================== */
.slow-zoom-bg {
    animation: slow-zoom-loop 40s ease-in-out infinite alternate;
}

@keyframes slow-zoom-loop {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}


/* ==================================================
   5. TYPOGRAPHY LINE REVEAL (SplitType fallbacks)
   Purpose: Splits typography lines clips overflows.
   ================================================== */
.split-line {
    overflow: hidden;
    position: relative;
    display: block;
}

.split-line .word, .split-line .char {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 1.2s var(--ease-expo), opacity 1.2s var(--ease-expo);
}

.revealed .split-line .word,
.revealed .split-line .char {
    transform: translateY(0);
    opacity: 1;
}