/* ==========================================================================
   SCROLL REVEAL ANIMATION SYSTEM - PREMIUM CINEMATIC ENGINE
   Ultra-smooth, performance-optimized, scroll-triggered reveals & parallax
   ========================================================================== */

:root {
    --sr-ease: cubic-bezier(0.16, 1, 0.3, 1);       /* Iconic Apple / Linear curve */
    --sr-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --sr-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sr-duration-fast: 0.6s;
    --sr-duration-base: 0.85s;
    --sr-duration-slow: 1.1s;
    --sr-stagger-base: 0.08s;
}

/* Base state for all scroll-reveal elements */
.sr-reveal,
[data-reveal] {
    opacity: 0;
    will-change: transform, opacity, filter;
    transition-property: transform, opacity, filter;
    transition-duration: var(--sr-duration-base);
    transition-timing-function: var(--sr-ease);
    transition-delay: var(--sr-delay, 0s);
}

/* ==========================================================================
   Reveal Directions & Styles
   ========================================================================== */

/* Upward reveal with subtle blur (Default) */
.sr-reveal,
.sr-up,
[data-reveal="up"] {
    transform: translate3d(0, 36px, 0);
    filter: blur(8px);
}

/* Downward reveal */
.sr-down,
[data-reveal="down"] {
    transform: translate3d(0, -36px, 0);
    filter: blur(8px);
}

/* Left-to-right reveal */
.sr-left,
[data-reveal="left"] {
    transform: translate3d(-45px, 0, 0);
    filter: blur(6px);
}

/* Right-to-left reveal */
.sr-right,
[data-reveal="right"] {
    transform: translate3d(45px, 0, 0);
    filter: blur(6px);
}

/* Soft Fade In */
.sr-fade,
[data-reveal="fade"] {
    transform: translate3d(0, 0, 0);
    filter: blur(6px);
}

/* Scale & Pop */
.sr-scale,
[data-reveal="scale"] {
    transform: scale3d(0.92, 0.92, 1) translate3d(0, 20px, 0);
    filter: blur(6px);
}

/* ==========================================================================
   Revealed State (Triggered when entering viewport)
   ========================================================================== */
.sr-reveal.is-revealed,
[data-reveal].is-revealed,
.is-revealed > .sr-reveal,
.is-revealed.sr-up,
.is-revealed.sr-down,
.is-revealed.sr-left,
.is-revealed.sr-right,
.is-revealed.sr-fade,
.is-revealed.sr-scale {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    filter: blur(0px);
}

/* ==========================================================================
   Cinematic Image Reveals (Mask & Zoom Out)
   ========================================================================== */
.sr-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.sr-image-wrapper img,
.sr-image {
    opacity: 0;
    transform: scale3d(1.12, 1.12, 1) translate3d(0, 15px, 0);
    filter: blur(10px);
    transition: transform var(--sr-duration-slow) var(--sr-ease),
                opacity var(--sr-duration-base) var(--sr-ease),
                filter var(--sr-duration-base) var(--sr-ease);
    will-change: transform, opacity, filter;
}

.is-revealed .sr-image-wrapper img,
.is-revealed.sr-image,
.sr-image-wrapper.is-revealed img {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    filter: blur(0px);
}

/* Image Curtain Mask Reveal */
.sr-mask-reveal {
    position: relative;
    overflow: hidden;
}

.sr-mask-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0f172a;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform var(--sr-duration-slow) cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2;
    pointer-events: none;
}

.sr-mask-reveal.is-revealed::after {
    transform: scaleX(0);
}

/* ==========================================================================
   Word-by-Word & Line-by-Line Heading Staggers
   ========================================================================== */
.sr-heading-split {
    overflow: hidden;
}

.sr-word-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    margin-right: 0.28em;
}

.sr-word {
    display: inline-block;
    transform: translate3d(0, 115%, 0);
    opacity: 0;
    filter: blur(4px);
    transition: transform 0.75s var(--sr-ease),
                opacity 0.65s var(--sr-ease),
                filter 0.55s var(--sr-ease);
    transition-delay: calc(var(--word-idx, 0) * 0.038s + var(--heading-delay, 0s));
    will-change: transform, opacity, filter;
}

.is-revealed .sr-word,
.sr-heading-split.is-revealed .sr-word {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: blur(0px);
}

/* ==========================================================================
   Staggered Container Lists & Grids
   ========================================================================== */
.sr-stagger-group {
    --stagger-step: 0.08s;
}

/* Apply sequential delay to staggered children automatically */
.sr-stagger-group > * {
    transition-delay: calc(var(--stagger-idx, 0) * var(--stagger-step, 0.08s) + var(--base-delay, 0s));
}

/* ==========================================================================
   Parallax Elements & Smooth Scrolling Backgrounds
   ========================================================================== */
.sr-parallax-bg {
    will-change: transform;
    transition: transform 0.1s linear;
}

.sr-parallax-floating {
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ambient Floating Glow Bubbles */
.sr-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    animation: ambient-float 12s ease-in-out infinite alternate;
}

@keyframes ambient-float {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(25px, -20px, 0) scale(1.08);
    }
    100% {
        transform: translate3d(-15px, 20px, 0) scale(0.95);
    }
}

/* ==========================================================================
   Interactive Premium Hover Effects
   ========================================================================== */

/* Elevate with soft depth shadow */
.hover-elevate {
    transition: transform 0.4s var(--sr-ease),
                box-shadow 0.4s var(--sr-ease),
                border-color 0.4s var(--sr-ease);
}

.hover-elevate:hover {
    transform: translate3d(0, -7px, 0);
    box-shadow: 0 20px 35px -10px rgba(15, 23, 42, 0.12),
                0 10px 15px -5px rgba(15, 23, 42, 0.04);
}

/* Card inner image zoom on hover */
.hover-zoom-img {
    overflow: hidden;
}

.hover-zoom-img img {
    transition: transform 0.65s var(--sr-ease);
}

.hover-zoom-img:hover img {
    transform: scale3d(1.06, 1.06, 1);
}

/* Magnetic Button Glow */
.btn-magnetic {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--sr-ease), box-shadow 0.3s var(--sr-ease);
}

.btn-magnetic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.5s var(--sr-ease), opacity 0.5s var(--sr-ease);
    pointer-events: none;
}

.btn-magnetic:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.btn-magnetic:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

/* Badge pulse shine */
.sr-badge-shine {
    position: relative;
    overflow: hidden;
}

.sr-badge-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    animation: badge-sweep 4.5s ease-in-out infinite;
}

@keyframes badge-sweep {
    0%, 70% {
        left: -60%;
    }
    100% {
        left: 140%;
    }
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after,
    .sr-reveal,
    [data-reveal],
    .sr-word,
    .sr-image,
    .sr-image-wrapper img {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition-duration: 0.001s !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
    
    .sr-mask-reveal::after {
        display: none !important;
    }
}