/* =============================================================
   ANTERA — Scroll Reveal & Button Animations
   animations.css
   ============================================================= */

/* ----------------------------------------------------------------
   1. SCROLL-REVEAL BASE STATES
   Elements start hidden; JS drives them to their final state.
   ---------------------------------------------------------------- */

/* Fade + rise (default) */
[data-anim],
[data-anim-left],
[data-anim-right],
[data-anim-scale],
[data-anim-stagger]>* {
    will-change: transform, opacity;
}

/* ----------------------------------------------------------------
   2. BUTTON ANIMATIONS
   Works on <a>, <button> elements sitewide.
   Classes added automatically by JS or manually in HTML.
   ---------------------------------------------------------------- */

/* --- 2a. Base animated button --- */
.btn-anim {
    position: relative;
    overflow: hidden;
    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.2s ease;
    isolation: isolate;
}

/* Lift on hover */
.btn-anim:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(247, 148, 33, 0.35);
}

/* Press on click */
.btn-anim:active {
    transform: translateY(0px);
    transition-duration: 0.1s;
}

/* ----------------------------------------------------------------
   2b. Ripple effect layer (injected by JS)
   ---------------------------------------------------------------- */
.btn-anim .btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleExpand 0.6s linear forwards;
    pointer-events: none;
    z-index: 5;
}

@keyframes rippleExpand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ----------------------------------------------------------------
   2c. Shine / glide effect
   ---------------------------------------------------------------- */
.btn-anim::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 0%,
            transparent 30%,
            rgba(255, 255, 255, 0.18) 50%,
            transparent 70%,
            transparent 100%);
    background-size: 200% 100%;
    background-position: -100% 0;
    transition: background-position 0.55s ease;
    z-index: 1;
    border-radius: inherit;
}

.btn-anim:hover::before {
    background-position: 200% 0;
}

/* ----------------------------------------------------------------
   2d. Animated border pulse (optional class .btn-pulse)
   ---------------------------------------------------------------- */
.btn-pulse {
    animation: borderPulse 2s ease-in-out infinite;
}

@keyframes borderPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(247, 148, 33, 0.55);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(247, 148, 33, 0);
    }
}

/* ----------------------------------------------------------------
   2e. Glow button variant (.btn-glow)
   ---------------------------------------------------------------- */
.btn-glow {
    transition: box-shadow 0.35s ease, transform 0.2s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 22px 4px rgba(247, 148, 33, 0.6);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   3. SCROLL COUNTER / FUN-FACT extra polish
   ---------------------------------------------------------------- */
.fun-fact-anim {
    transition: transform 0.4s ease;
}

.fun-fact-anim:hover {
    transform: scale(1.05);
}

/* ----------------------------------------------------------------
   4. IMAGE HOVER ZOOM (cards, gallery, etc.)
   ---------------------------------------------------------------- */
.img-hover-zoom {
    overflow: hidden;
    border-radius: inherit;
}

.img-hover-zoom img {
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.img-hover-zoom:hover img {
    transform: scale(1.07);
}

/* ----------------------------------------------------------------
   5. SECTION TITLE UNDERLINE ANIMATION
   Add class .title-underline to headings for a decorative effect.
   ---------------------------------------------------------------- */
.title-underline {
    position: relative;
    display: inline-block;
}

.title-underline.in-view::after {
    width: 100%;
}