/**
 * SCROLL REVEAL ANIMATIONS
 * CSS-based reveal effects triggered by IntersectionObserver
 */

/* ==========================================
   BASE REVEAL CLASSES
========================================== */

/* Hidden state (before reveal) */
.reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity 800ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Revealed state */
.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   REVEAL VARIANTS
========================================== */

/* Fade only (no movement) */
[data-reveal="fade"] {
    transform: none !important;
}

[data-reveal="fade"].reveal-hidden {
    opacity: 0;
    transform: none;
}

/* Slide from left */
[data-reveal="slide-left"].reveal-hidden {
    opacity: 0;
    transform: translateX(-50px);
}

/* Slide from right */
[data-reveal="slide-right"].reveal-hidden {
    opacity: 0;
    transform: translateX(50px);
}

/* Scale up */
[data-reveal="scale"].reveal-hidden {
    opacity: 0;
    transform: scale(0.9);
}

/* Slide and fade (default, more dramatic) */
[data-reveal="slide-up-large"].reveal-hidden {
    opacity: 0;
    transform: translateY(60px);
}

/* Rotate in */
[data-reveal="rotate"].reveal-hidden {
    opacity: 0;
    transform: rotateX(-15deg);
    transform-origin: bottom;
}

/* ==========================================
   EASING VARIANTS
========================================== */

/* Bouncy entrance */
[data-reveal-easing="bounce"] {
    transition: 
        opacity 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
        transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Smooth ease */
[data-reveal-easing="smooth"] {
    transition: 
        opacity 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Sharp snap */
[data-reveal-easing="snap"] {
    transition: 
        opacity 500ms cubic-bezier(0.4, 0, 1, 1),
        transform 500ms cubic-bezier(0.4, 0, 1, 1);
}

/* ==========================================
   DURATION VARIANTS
========================================== */

[data-reveal-duration="fast"] {
    transition-duration: 400ms;
}

[data-reveal-duration="slow"] {
    transition-duration: 1200ms;
}

[data-reveal-duration="very-slow"] {
    transition-duration: 1600ms;
}

/* ==========================================
   STAGGER GROUPS
   Apply to parent containers for automatic staggering
========================================== */

.reveal-stagger-group > [data-reveal] {
    transition-delay: 0ms; /* Will be set by JS */
}

/* ==========================================
   GOTHIC THEMED REVEAL (Custom for your site)
========================================== */

[data-reveal="gothic"] {
    transition: 
        opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 1000ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="gothic"].reveal-hidden {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px) brightness(0.5);
}

[data-reveal="gothic"].revealed {
    filter: blur(0) brightness(1);
}

/* ==========================================
   BLOOD DRIP EFFECT (Experimental)
========================================== */

[data-reveal="blood-drip"] {
    transition: 
        opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="blood-drip"].reveal-hidden {
    opacity: 0;
    transform: translateY(-20px);
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%);
}

[data-reveal="blood-drip"].revealed {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================
   REDUCED MOTION SUPPORT
========================================== */

@media (prefers-reduced-motion: reduce) {
    .reveal-hidden,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}