/* ==========================================================================
   BeeOrder website animations

   1. Reveal on scroll   — add data-reveal="fade-up | fade-start | zoom" to any element.
                           public/js/app.js adds the "is-visible" class when it
                           enters the screen. Delay with style="--reveal-delay: 200ms".
   2. Continuous motion  — navbar drop-in, marquee, floating shapes, mascot.
   3. Reduced motion     — everything is switched off for visitors who ask
                           their system for less motion.
   ========================================================================== */


/* 1. Reveal on scroll
   ========================================================================== */

/* "--direction-sign" flips horizontal movement for right-to-left pages */
:root {
    --direction-sign: 1;
}

[dir='rtl'] {
    --direction-sign: -1;
}

/* Only hidden when JavaScript runs (the "js" class is added in the layout <head>) */
.js [data-reveal] {
    opacity: 0;
    transition:
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal='fade-up'] {
    transform: translateY(40px);
}

/* Slides in from the start side: from the left in English, from the right in Arabic */
.js [data-reveal='fade-start'] {
    transform: translateX(calc(-48px * var(--direction-sign)));
}

.js [data-reveal='zoom'] {
    transform: scale(0.9);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}


/* 2. Continuous motion
   ========================================================================== */

/* Navbar slides down when the page opens */
.navbar {
    animation: navbar-drop-in 0.8s var(--ease-out) both;
}

@keyframes navbar-drop-in {
    from {
        opacity: 0;
        translate: 0 -120%;
    }
}

/* Hero underline is "drawn" from the start side after the title appears */
.js .hero__title-highlight::after {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.9s var(--ease-out) 0.6s;
}

[dir='ltr'].js .hero__title-highlight::after {
    clip-path: inset(0 100% 0 0);
}

.js .hero__title.is-visible .hero__title-highlight::after {
    clip-path: inset(0 0 0 0);
}

/* Marquee: endless scroll. The content is repeated 4 times, so moving by 50% loops seamlessly */
.marquee__track {
    animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

.marquee--reverse .marquee__track {
    animation-direction: reverse;
}

.partners .marquee:hover .marquee__track {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    from {
        translate: 0;
    }

    to {
        translate: calc(-50% * var(--direction-sign));
    }
}

/* Offers card % signs float gently, each at its own rhythm */
.percent {
    animation: float 4s ease-in-out infinite;
}

.percent--medium {
    animation-duration: 5s;
    animation-delay: -1.5s;
}

.percent--small {
    animation-duration: 3.5s;
    animation-delay: -0.8s;
}

@keyframes float {
    50% {
        translate: 0 -10px;
    }
}

/* "&" between the category cards wiggles */
.categories__ampersand img {
    animation: wiggle 3s ease-in-out infinite;
}

@keyframes wiggle {
    0%,
    100% {
        rotate: 8deg;
    }

    50% {
        rotate: -8deg;
    }
}

/* BeePRO bee floats on its ring (the water ripples stay still) */
.pro__mascot-bee {
    animation: bob 3.2s ease-in-out infinite;
}

@keyframes bob {
    0%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }

    50% {
        translate: 0 -10px;
        rotate: -3deg;
    }
}

/* PRO badge pulses slightly */
.pro__badge {
    animation: pulse 2.8s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        scale: 1.08;
    }
}


/* 3. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .js .hero__title-highlight::after {
        clip-path: none;
    }
}