/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM GLOBAL ANIMATION SYSTEM
   ------------------------------------------------------------
   File:
   /public_html/assets/css/animations/animations.css

   FINAL PERFORMANCE-SAFE END VERSION
   Version: 3.0

   Architecture:
   - Content visible by default
   - Animations activate only after JS handshake
   - No blank page if JS is slow / unavailable
   - Fast first paint
   - Premium scroll reveals
   - Premium stagger system
   - Mobile optimized
   - Accessibility safe
   ============================================================ */


/* ============================================================
   01. VARIABLES
   ============================================================ */

:root {

    --anim-fast: 0.24s;
    --anim-normal: 0.48s;
    --anim-medium: 0.68s;
    --anim-slow: 0.9s;

    --anim-ease:
        cubic-bezier(0.2, 0.7, 0.2, 1);

    --anim-ease-out:
        cubic-bezier(0.16, 1, 0.3, 1);

    --anim-ease-in-out:
        cubic-bezier(0.65, 0, 0.35, 1);

    --anim-bounce:
        cubic-bezier(0.34, 1.56, 0.64, 1);

    --reveal-distance: 28px;

}


/* ============================================================
   02. CRITICAL PERFORMANCE-SAFE DEFAULT
   ------------------------------------------------------------
   IMPORTANT:
   Before JS initializes, ALL website content remains visible.
   This prevents blank homepage / slow first paint.
   ============================================================ */

.reveal,
.reveal-up,
.reveal-down,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-scale-up,
.reveal-rotate,
.reveal-blur {

    opacity: 1;
    transform: none;
    filter: none;

}


/* ============================================================
   03. JS READY — COMMON REVEAL BASE
   ============================================================ */

html.animations-ready
.reveal:not(.is-visible),

html.animations-ready
.reveal-up:not(.is-visible),

html.animations-ready
.reveal-down:not(.is-visible),

html.animations-ready
.reveal-left:not(.is-visible),

html.animations-ready
.reveal-right:not(.is-visible),

html.animations-ready
.reveal-scale:not(.is-visible),

html.animations-ready
.reveal-scale-up:not(.is-visible),

html.animations-ready
.reveal-rotate:not(.is-visible),

html.animations-ready
.reveal-blur:not(.is-visible) {

    opacity: 0;

    transition:
        opacity
        var(--animation-duration, var(--anim-medium))
        var(--anim-ease-out)
        var(--animation-delay, 0ms),

        transform
        var(--animation-duration, var(--anim-medium))
        var(--anim-ease-out)
        var(--animation-delay, 0ms),

        filter
        var(--animation-duration, var(--anim-medium))
        var(--anim-ease-out)
        var(--animation-delay, 0ms);

    will-change:
        opacity,
        transform;

}


/* ============================================================
   04. REVEAL UP
   ============================================================ */

html.animations-ready
.reveal-up:not(.is-visible) {

    transform:
        translate3d(
            0,
            var(--reveal-distance),
            0
        );

}


/* ============================================================
   05. REVEAL DOWN
   ============================================================ */

html.animations-ready
.reveal-down:not(.is-visible) {

    transform:
        translate3d(
            0,
            calc(var(--reveal-distance) * -1),
            0
        );

}


/* ============================================================
   06. REVEAL LEFT
   ============================================================ */

html.animations-ready
.reveal-left:not(.is-visible) {

    transform:
        translate3d(
            calc(var(--reveal-distance) * -1),
            0,
            0
        );

}


/* ============================================================
   07. REVEAL RIGHT
   ============================================================ */

html.animations-ready
.reveal-right:not(.is-visible) {

    transform:
        translate3d(
            var(--reveal-distance),
            0,
            0
        );

}


/* ============================================================
   08. REVEAL SCALE
   ============================================================ */

html.animations-ready
.reveal-scale:not(.is-visible) {

    transform:
        scale(0.96);

}


/* ============================================================
   09. REVEAL SCALE UP
   ============================================================ */

html.animations-ready
.reveal-scale-up:not(.is-visible) {

    transform:
        translate3d(0, 18px, 0)
        scale(0.96);

}


/* ============================================================
   10. REVEAL ROTATE
   ============================================================ */

html.animations-ready
.reveal-rotate:not(.is-visible) {

    transform:
        translate3d(0, 18px, 0)
        rotate(1.5deg)
        scale(0.97);

}


/* ============================================================
   11. REVEAL BLUR
   ============================================================ */

html.animations-ready
.reveal-blur:not(.is-visible) {

    filter:
        blur(8px);

    transform:
        translate3d(0, 16px, 0);

}


/* ============================================================
   12. REVEALED STATE
   ============================================================ */

html.animations-ready
.reveal.is-visible,

html.animations-ready
.reveal-up.is-visible,

html.animations-ready
.reveal-down.is-visible,

html.animations-ready
.reveal-left.is-visible,

html.animations-ready
.reveal-right.is-visible,

html.animations-ready
.reveal-scale.is-visible,

html.animations-ready
.reveal-scale-up.is-visible,

html.animations-ready
.reveal-rotate.is-visible,

html.animations-ready
.reveal-blur.is-visible {

    opacity: 1;

    transform: none;

    filter: none;

    transition:
        opacity
        var(--animation-duration, var(--anim-medium))
        var(--anim-ease-out)
        var(--animation-delay, 0ms),

        transform
        var(--animation-duration, var(--anim-medium))
        var(--anim-ease-out)
        var(--animation-delay, 0ms),

        filter
        var(--animation-duration, var(--anim-medium))
        var(--anim-ease-out)
        var(--animation-delay, 0ms);

    will-change: auto;

}


/* ============================================================
   13. SPEED MODIFIERS
   ============================================================ */

.reveal-fast {
    --animation-duration: var(--anim-normal);
}

.reveal-slow {
    --animation-duration: var(--anim-slow);
}


/* ============================================================
   14. DELAYS
   ============================================================ */

.delay-1 {
    --animation-delay: 0.05s;
}

.delay-2 {
    --animation-delay: 0.10s;
}

.delay-3 {
    --animation-delay: 0.15s;
}

.delay-4 {
    --animation-delay: 0.20s;
}

.delay-5 {
    --animation-delay: 0.25s;
}

.delay-6 {
    --animation-delay: 0.30s;
}

.delay-7 {
    --animation-delay: 0.35s;
}

.delay-8 {
    --animation-delay: 0.40s;
}


/* ============================================================
   15. STAGGER — SAFE DEFAULT
   ------------------------------------------------------------
   No JS = children remain visible.
   ============================================================ */

.stagger-children > * {

    opacity: 1;

    transform: none;

}


/* ============================================================
   16. STAGGER — JS READY / WAITING
   ============================================================ */

html.animations-ready
.stagger-children:not(.is-visible) > * {

    opacity: 0;

    transform:
        translate3d(0, 20px, 0);

    transition:
        opacity
        var(--anim-medium)
        var(--anim-ease-out),

        transform
        var(--anim-medium)
        var(--anim-ease-out);

    will-change:
        opacity,
        transform;

}


/* ============================================================
   17. STAGGER — ACTIVE
   ============================================================ */

html.animations-ready
.stagger-children.is-visible > * {

    opacity: 1;

    transform: none;

    transition:
        opacity
        var(--anim-medium)
        var(--anim-ease-out),

        transform
        var(--anim-medium)
        var(--anim-ease-out);

}


/* ============================================================
   18. STAGGER DELAYS
   ============================================================ */

html.animations-ready
.stagger-children.is-visible > *:nth-child(1) {
    transition-delay: 0.02s;
}

html.animations-ready
.stagger-children.is-visible > *:nth-child(2) {
    transition-delay: 0.07s;
}

html.animations-ready
.stagger-children.is-visible > *:nth-child(3) {
    transition-delay: 0.12s;
}

html.animations-ready
.stagger-children.is-visible > *:nth-child(4) {
    transition-delay: 0.17s;
}

html.animations-ready
.stagger-children.is-visible > *:nth-child(5) {
    transition-delay: 0.22s;
}

html.animations-ready
.stagger-children.is-visible > *:nth-child(6) {
    transition-delay: 0.27s;
}

html.animations-ready
.stagger-children.is-visible > *:nth-child(7) {
    transition-delay: 0.32s;
}

html.animations-ready
.stagger-children.is-visible > *:nth-child(8) {
    transition-delay: 0.37s;
}


/* ============================================================
   19. HERO ANIMATIONS
   ============================================================ */

.hero-animate {

    animation:
        premiumFadeUp
        0.7s
        var(--anim-ease-out)
        both;

}

.hero-title-animate {

    animation:
        premiumTitleReveal
        0.8s
        var(--anim-ease-out)
        both;

}

.hero-image-animate {

    animation:
        premiumImageEntrance
        0.9s
        var(--anim-ease-out)
        both;

}


/* ============================================================
   20. STANDARD ANIMATIONS
   ============================================================ */

.animate-fade-in {

    animation:
        premiumFadeIn
        var(--anim-medium)
        var(--anim-ease-out)
        both;

}

.animate-fade-up {

    animation:
        premiumFadeUp
        var(--anim-medium)
        var(--anim-ease-out)
        both;

}

.animate-fade-down {

    animation:
        premiumFadeDown
        var(--anim-medium)
        var(--anim-ease-out)
        both;

}

.animate-fade-left {

    animation:
        premiumFadeLeft
        var(--anim-medium)
        var(--anim-ease-out)
        both;

}

.animate-fade-right {

    animation:
        premiumFadeRight
        var(--anim-medium)
        var(--anim-ease-out)
        both;

}

.animate-scale-in {

    animation:
        premiumScaleIn
        var(--anim-medium)
        var(--anim-ease-out)
        both;

}


/* ============================================================
   21. FLOATING EFFECTS
   ============================================================ */

.animate-float {

    animation:
        premiumFloat
        5.5s
        ease-in-out
        infinite;

}

.animate-float-slow {

    animation:
        premiumFloat
        8s
        ease-in-out
        infinite;

}

.animate-float-reverse {

    animation:
        premiumFloatReverse
        7s
        ease-in-out
        infinite;

}


/* ============================================================
   22. AMBIENT EFFECTS
   ============================================================ */

.animate-pulse-soft {

    animation:
        premiumPulseSoft
        3s
        ease-in-out
        infinite;

}

.animate-gold-glow {

    animation:
        premiumGoldGlow
        3.5s
        ease-in-out
        infinite;

}

.animate-rotate-slow {

    animation:
        premiumRotate
        20s
        linear
        infinite;

}

.animate-rotate-reverse {

    animation:
        premiumRotateReverse
        24s
        linear
        infinite;

}

.animate-breathe {

    animation:
        premiumBreathe
        4.5s
        ease-in-out
        infinite;

}


/* ============================================================
   23. IMAGE REVEAL — SAFE DEFAULT
   ============================================================ */

.image-reveal {

    position: relative;

    overflow: hidden;

    isolation: isolate;

}


.image-reveal img {

    opacity: 1;

    transform: none;

}


/* ============================================================
   24. IMAGE REVEAL — JS READY
   ============================================================ */

html.animations-ready
.image-reveal:not(.is-visible) img {

    opacity: 0;

    transform:
        scale(1.055);

    transition:
        opacity
        0.7s
        var(--anim-ease-out),

        transform
        0.95s
        var(--anim-ease-out);

}


/* ============================================================
   25. IMAGE OVERLAY
   ============================================================ */

.image-reveal::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            135deg,
            var(--color-primary-deep, #17130f),
            var(--color-primary, #b67a20)
        );

    transform:
        scaleX(0);

    transform-origin:
        right center;

    pointer-events: none;

}


/* ============================================================
   26. IMAGE OVERLAY — WAITING
   ============================================================ */

html.animations-ready
.image-reveal:not(.is-visible)::after {

    transform:
        scaleX(1);

    transition:
        transform
        0.72s
        var(--anim-ease-in-out);

}


/* ============================================================
   27. IMAGE ACTIVE
   ============================================================ */

html.animations-ready
.image-reveal.is-visible img {

    opacity: 1;

    transform: none;

    transition:
        opacity
        0.7s
        var(--anim-ease-out),

        transform
        0.95s
        var(--anim-ease-out);

}


html.animations-ready
.image-reveal.is-visible::after {

    transform:
        scaleX(0);

    transition:
        transform
        0.72s
        var(--anim-ease-in-out);

}


/* ============================================================
   28. GOLD IMAGE REVEAL
   ============================================================ */

.image-reveal-gold::after {

    background:
        var(
            --gradient-gold,
            linear-gradient(
                135deg,
                #9b6419,
                #d5a24a
            )
        );

}


.image-reveal-left::after {

    transform-origin:
        left center;

}


/* ============================================================
   29. TEXT REVEAL
   ============================================================ */

.text-reveal {

    overflow: hidden;

}


.text-reveal-inner {

    display: block;

    opacity: 1;

    transform: none;

}


html.animations-ready
.text-reveal:not(.is-visible)
.text-reveal-inner {

    opacity: 0;

    transform:
        translateY(80%);

}


html.animations-ready
.text-reveal.is-visible
.text-reveal-inner {

    opacity: 1;

    transform: none;

    transition:
        opacity
        0.2s
        ease,

        transform
        0.7s
        var(--anim-ease-out);

}


/* ============================================================
   30. WORD REVEAL
   ============================================================ */

.word-reveal {

    display: inline-block;

    overflow: hidden;

    vertical-align: bottom;

}


.word-reveal > span {

    display: inline-block;

    transform: none;

}


html.animations-ready
.word-reveal:not(.is-visible) > span {

    transform:
        translateY(100%);

}


html.animations-ready
.word-reveal.is-visible > span {

    transform: none;

    transition:
        transform
        0.68s
        var(--anim-ease-out);

}


/* ============================================================
   31. LINE DRAW
   ============================================================ */

.line-draw {

    position: relative;

}


.line-draw::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    background:
        var(
            --gradient-gold,
            linear-gradient(
                90deg,
                #a86f1d,
                #d6a449
            )
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        0.7s
        var(--anim-ease-out);

}


.line-draw.is-visible::after {

    transform:
        scaleX(1);

}


/* ============================================================
   32. GOLD UNDERLINE
   ============================================================ */

.gold-underline-animate {

    position: relative;

    display: inline-block;

}


.gold-underline-animate::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -5px;
    left: 0;

    height: 2px;

    border-radius: 999px;

    background:
        var(
            --gradient-gold,
            linear-gradient(
                90deg,
                #a86f1d,
                #d6a449
            )
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        0.55s
        var(--anim-ease-out);

}


.gold-underline-animate.is-visible::after,
.gold-underline-animate:hover::after {

    transform:
        scaleX(1);

}


/* ============================================================
   33. HOVER LIFT
   ============================================================ */

.hover-lift {

    transition:
        transform
        var(--anim-normal)
        var(--anim-ease-out),

        box-shadow
        var(--anim-normal)
        var(--anim-ease-out);

}


@media (hover: hover) {

    .hover-lift:hover {

        transform:
            translate3d(0, -6px, 0);

    }

}


/* ============================================================
   34. HOVER SCALE
   ============================================================ */

.hover-scale {

    transition:
        transform
        var(--anim-normal)
        var(--anim-ease-out);

}


@media (hover: hover) {

    .hover-scale:hover {

        transform:
            scale(1.03);

    }

}


/* ============================================================
   35. ICON SHIFT
   ============================================================ */

.icon-shift {

    transition:
        transform
        var(--anim-fast)
        var(--anim-ease-out);

}


@media (hover: hover) {

    a:hover .icon-shift,
    button:hover .icon-shift {

        transform:
            translateX(4px);

    }

}


/* ============================================================
   36. PREMIUM SHINE
   ============================================================ */

.shine-effect {

    position: relative;

    overflow: hidden;

    isolation: isolate;

}


.shine-effect::after {

    content: "";

    position: absolute;

    top: -100%;
    left: -45%;

    z-index: 4;

    width: 25%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.20),
            transparent
        );

    pointer-events: none;

    transform:
        rotate(22deg);

    transition:
        left
        0.75s
        var(--anim-ease-out);

}


@media (hover: hover) {

    .shine-effect:hover::after {

        left: 125%;

    }

}


/* ============================================================
   37. GOLD SHINE
   ============================================================ */

.gold-shine::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 104, 0.24),
            transparent
        );

}


/* ============================================================
   38. BORDER GLOW
   ============================================================ */

.border-glow {

    transition:
        border-color
        var(--anim-normal)
        ease,

        box-shadow
        var(--anim-normal)
        ease;

}


@media (hover: hover) {

    .border-glow:hover {

        border-color:
            rgba(183, 138, 61, 0.34);

        box-shadow:
            0 15px 42px
            rgba(183, 138, 61, 0.10);

    }

}


/* ============================================================
   39. IMAGE ZOOM
   ============================================================ */

.image-zoom {

    overflow: hidden;

}


.image-zoom img {

    transition:
        transform
        0.72s
        var(--anim-ease-out);

}


@media (hover: hover) {

    .image-zoom:hover img {

        transform:
            scale(1.045);

    }

}


/* ============================================================
   40. PARALLAX
   ============================================================ */

.parallax-item {

    transform:
        translate3d(
            0,
            var(--parallax-y, 0),
            0
        );

    will-change:
        transform;

}


/* ============================================================
   41. MOUSE MOVE
   ============================================================ */

.mousemove-item {

    transform:
        translate3d(
            var(--move-x, 0),
            var(--move-y, 0),
            0
        );

    transition:
        transform
        0.18s
        ease-out;

    will-change:
        transform;

}


/* ============================================================
   42. TILT
   ============================================================ */

.tilt-item {

    transform:
        perspective(1000px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));

    transform-style:
        preserve-3d;

    transition:
        transform
        0.18s
        ease-out;

    will-change:
        transform;

}


.tilt-inner {

    transform:
        translateZ(18px);

}


/* ============================================================
   43. COUNTER — SAFE DEFAULT
   ============================================================ */

.counter-reveal {

    opacity: 1;

    transform: none;

}


/* ============================================================
   44. COUNTER — JS READY
   ============================================================ */

html.animations-ready
.counter-reveal:not(.is-visible) {

    opacity: 0;

    transform:
        translateY(10px);

}


html.animations-ready
.counter-reveal.is-visible {

    opacity: 1;

    transform: none;

    transition:
        opacity
        0.5s
        var(--anim-ease-out),

        transform
        0.5s
        var(--anim-ease-out);

}


/* ============================================================
   45. DOT PULSE
   ============================================================ */

.accent-dot-pulse {

    position: relative;

}


.accent-dot-pulse::after {

    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid currentColor;

    border-radius:
        50%;

    opacity: 0;

    animation:
        premiumDotPulse
        2s
        ease-out
        infinite;

}


/* ============================================================
   46. SCROLL INDICATORS
   ============================================================ */

.scroll-indicator-animate {

    animation:
        premiumScrollIndicator
        2s
        ease-in-out
        infinite;

}


.arrow-down-animate {

    animation:
        premiumArrowDown
        1.8s
        ease-in-out
        infinite;

}


/* ============================================================
   47. GRADIENT MOTION
   ============================================================ */

.gradient-motion {

    background-size:
        200% 200%;

    animation:
        premiumGradientMotion
        9s
        ease
        infinite;

}


/* ============================================================
   48. MARQUEE
   ============================================================ */

.marquee-track {

    display: flex;

    width: max-content;

    animation:
        premiumMarquee
        var(--marquee-duration, 30s)
        linear
        infinite;

}


.marquee-reverse {

    animation-direction:
        reverse;

}


@media (hover: hover) {

    .marquee-wrapper:hover
    .marquee-track {

        animation-play-state:
            paused;

    }

}


/* ============================================================
   49. KEYFRAMES — FADE
   ============================================================ */

@keyframes premiumFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes premiumFadeUp {

    from {

        opacity: 0;

        transform:
            translate3d(0, 24px, 0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0);

    }

}


@keyframes premiumFadeDown {

    from {

        opacity: 0;

        transform:
            translate3d(0, -24px, 0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0);

    }

}


@keyframes premiumFadeLeft {

    from {

        opacity: 0;

        transform:
            translate3d(-26px, 0, 0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0);

    }

}


@keyframes premiumFadeRight {

    from {

        opacity: 0;

        transform:
            translate3d(26px, 0, 0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0);

    }

}


/* ============================================================
   50. KEYFRAME — SCALE
   ============================================================ */

@keyframes premiumScaleIn {

    from {

        opacity: 0;

        transform:
            scale(0.95);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}


/* ============================================================
   51. KEYFRAME — HERO TITLE
   ============================================================ */

@keyframes premiumTitleReveal {

    from {

        opacity: 0;

        transform:
            translate3d(0, 28px, 0);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0);

    }

}


/* ============================================================
   52. KEYFRAME — HERO IMAGE
   ============================================================ */

@keyframes premiumImageEntrance {

    from {

        opacity: 0;

        transform:
            translate3d(18px, 12px, 0)
            scale(0.97);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

}


/* ============================================================
   53. KEYFRAME — FLOAT
   ============================================================ */

@keyframes premiumFloat {

    0%,
    100% {

        transform:
            translate3d(0, 0, 0);

    }

    50% {

        transform:
            translate3d(0, -10px, 0);

    }

}


@keyframes premiumFloatReverse {

    0%,
    100% {

        transform:
            translate3d(0, -6px, 0);

    }

    50% {

        transform:
            translate3d(0, 6px, 0);

    }

}


/* ============================================================
   54. KEYFRAME — PULSE
   ============================================================ */

@keyframes premiumPulseSoft {

    0%,
    100% {

        opacity: 0.82;

        transform:
            scale(1);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.025);

    }

}


/* ============================================================
   55. KEYFRAME — GOLD GLOW
   ============================================================ */

@keyframes premiumGoldGlow {

    0%,
    100% {

        box-shadow:
            0 0 0
            rgba(183, 138, 61, 0);

    }

    50% {

        box-shadow:
            0 0 28px
            rgba(183, 138, 61, 0.18);

    }

}


/* ============================================================
   56. KEYFRAME — ROTATION
   ============================================================ */

@keyframes premiumRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes premiumRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* ============================================================
   57. KEYFRAME — BREATHE
   ============================================================ */

@keyframes premiumBreathe {

    0%,
    100% {

        transform:
            scale(1);

        opacity: 0.88;

    }

    50% {

        transform:
            scale(1.03);

        opacity: 1;

    }

}


/* ============================================================
   58. KEYFRAME — DOT PULSE
   ============================================================ */

@keyframes premiumDotPulse {

    0% {

        opacity: 0.6;

        transform:
            scale(0.7);

    }

    100% {

        opacity: 0;

        transform:
            scale(1.7);

    }

}


/* ============================================================
   59. KEYFRAME — SCROLL INDICATOR
   ============================================================ */

@keyframes premiumScrollIndicator {

    0% {

        opacity: 0;

        transform:
            translateY(-4px);

    }

    30% {
        opacity: 1;
    }

    100% {

        opacity: 0;

        transform:
            translateY(7px);

    }

}


@keyframes premiumArrowDown {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(4px);

    }

}


/* ============================================================
   60. KEYFRAME — GRADIENT
   ============================================================ */

@keyframes premiumGradientMotion {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* ============================================================
   61. KEYFRAME — MARQUEE
   ============================================================ */

@keyframes premiumMarquee {

    from {

        transform:
            translate3d(0, 0, 0);

    }

    to {

        transform:
            translate3d(-50%, 0, 0);

    }

}


/* ============================================================
   62. MOBILE PERFORMANCE
   ============================================================ */

@media (max-width: 767.98px) {

    :root {

        --reveal-distance: 18px;

        --anim-medium: 0.55s;

    }


    html.animations-ready
    .stagger-children:not(.is-visible) > * {

        transform:
            translate3d(0, 14px, 0);

    }


    .animate-float {

        animation-duration:
            7s;

    }


    .animate-float-slow {

        animation-duration:
            9s;

    }


    /*
     * Expensive decorative effects are reduced on mobile.
     */

    .mousemove-item {

        transform: none !important;

    }

}


/* ============================================================
   63. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .hover-lift:hover,
    .hover-scale:hover,
    .image-zoom:hover img,
    a:hover .icon-shift,
    button:hover .icon-shift {

        transform: none;

    }


    .shine-effect:hover::after {

        left: -45%;

    }

}


/* ============================================================
   64. REDUCED MOTION
   ============================================================ */

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

    }


    .reveal,
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-scale-up,
    .reveal-rotate,
    .reveal-blur,
    .stagger-children > *,
    .counter-reveal,
    .image-reveal img,
    .text-reveal-inner,
    .word-reveal > span {

        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

        transition:
            none !important;

    }


    .image-reveal::after {

        display:
            none !important;

    }


    .hero-animate,
    .hero-title-animate,
    .hero-image-animate,
    .animate-fade-in,
    .animate-fade-up,
    .animate-fade-down,
    .animate-fade-left,
    .animate-fade-right,
    .animate-scale-in,
    .animate-float,
    .animate-float-slow,
    .animate-float-reverse,
    .animate-pulse-soft,
    .animate-gold-glow,
    .animate-rotate-slow,
    .animate-rotate-reverse,
    .animate-breathe,
    .accent-dot-pulse::after,
    .scroll-indicator-animate,
    .arrow-down-animate,
    .gradient-motion,
    .marquee-track {

        animation:
            none !important;

    }


    .parallax-item,
    .mousemove-item,
    .tilt-item,
    .tilt-inner {

        transform:
            none !important;

        will-change:
            auto !important;

    }

}


/* ============================================================
   65. PRINT
   ============================================================ */

@media print {

    .reveal,
    .reveal-up,
    .reveal-down,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-scale-up,
    .reveal-rotate,
    .reveal-blur,
    .stagger-children > *,
    .counter-reveal,
    .image-reveal img,
    .text-reveal-inner,
    .word-reveal > span {

        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;

        animation:
            none !important;

        transition:
            none !important;

    }


    .image-reveal::after {

        display:
            none !important;

    }

}


/* ============================================================
   END
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM GLOBAL ANIMATION SYSTEM
   FINAL PERFORMANCE-SAFE VERSION 3.0
   ============================================================ */