/**
 * ═══════════════════════════════════════════════════════════════════════════
 * TRIGGERED! — Animation Styles
 * Agent 4: Front-End Engineer
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base reveal state - Only hide if JS is enabled */
.js-enabled .reveal-up,
.js-enabled .reveal-down,
.js-enabled .reveal-left,
.js-enabled .reveal-right,
.js-enabled .reveal-fade {
    opacity: 0;
    transition: opacity var(--duration-cinematic) var(--ease-cinematic),
        transform var(--duration-cinematic) var(--ease-cinematic);
    transition-delay: var(--delay, 0ms);
}

/* Specific start positions when JS is enabled */
.js-enabled .reveal-up {
    transform: translateY(40px);
}

.js-enabled .reveal-down {
    transform: translateY(-40px);
}

.js-enabled .reveal-left {
    transform: translateX(-40px);
}

.js-enabled .reveal-right {
    transform: translateX(40px);
}

.js-enabled .reveal-fade {
    transform: none;
}

/* Default state for when JS is disabled or not yet loaded */
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-fade {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Revealed state */
.reveal-up.revealed,
.reveal-down.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-fade.revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARALLAX EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */

.parallax {
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: transform var(--duration-normal) var(--ease-out);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.page-transition {
    position: fixed;
    inset: 0;
    background-color: var(--color-void);
    z-index: var(--z-max);
    transform: translateY(100%);
    transition: transform var(--duration-cinematic) var(--ease-cinematic);
}

.page-transition--active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-void);
    z-index: var(--z-max);
    transition: opacity var(--duration-slow) var(--ease-out);
}

.loader--hidden {
    opacity: 0;
    pointer-events: none;
}

.loader__spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-ash);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEXT ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.text-reveal {
    overflow: hidden;
}

.text-reveal__inner {
    display: inline-block;
    transform: translateY(100%);
    animation: textReveal var(--duration-cinematic) var(--ease-cinematic) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes textReveal {
    to {
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE REVEAL
   ═══════════════════════════════════════════════════════════════════════════ */

.image-reveal {
    position: relative;
    overflow: hidden;
}

.image-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-void);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform var(--duration-cinematic) var(--ease-cinematic);
}

.image-reveal.revealed::after {
    transform: scaleX(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC FADE
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes cinematicFadeIn {
    0% {
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.cinematic-fade {
    animation: cinematicFadeIn var(--duration-dramatic) var(--ease-cinematic) forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUBTLE FLOAT
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes subtleFloat {

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

    50% {
        transform: translateY(-10px);
    }
}

.subtle-float {
    animation: subtleFloat 6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .parallax {
        transform: none !important;
    }

    .hover-lift:hover,
    .hover-scale:hover {
        transform: none;
    }

    .text-reveal__inner {
        transform: none;
        animation: none;
    }

    .image-reveal::after {
        display: none;
    }

    .cinematic-fade {
        animation: none;
        opacity: 1;
        filter: none;
    }

    .subtle-float {
        animation: none;
    }
}