/* ============================================================
   VR THEME PARK — TEXT ANIMATION EFFECTS
   Inspired by: https://www.vrthemepark.com.au/
   ============================================================ */

/* ----------------------------------------------------------
   1. ANIMATED GRADIENT HERO HEADING
   Usage: <h1 class="vr-hero-title">YOUR ADVENTURE STARTS HERE!</h1>
   ---------------------------------------------------------- */
.vr-hero-title {
    background: linear-gradient(270deg,
            #ffffff 0%,
            #c4b5fd 20%,
            #818cf8 40%,
            #60a5fa 60%,
            #c4b5fd 80%,
            #ffffff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-sweep 4s ease-in-out infinite;
}

@keyframes gradient-sweep {
    0% {
        background-position: 0% 50%;
    }

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

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

/* ----------------------------------------------------------
   2. NEON GLOW HIGHLIGHT SPAN
   Usage: <span class="vr-neon-text">highlighted word</span>
   ---------------------------------------------------------- */
.vr-neon-text {
    color: #ffffff;
    text-shadow: none;
}

/* ----------------------------------------------------------
   3. SCROLL-REVEAL — handled by AOS library
   (data-aos="fade-up", data-aos="fade-right", etc.)
   AOS adds .aos-animate when element enters the viewport.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   4. TYPEWRITER EFFECT
   Usage: <span class="vr-typewriter" data-text="Your text here"></span>
   Needs vr-typewriter JS block below.
   ---------------------------------------------------------- */
.vr-typewriter {
    border-right: 3px solid #a78bfa;
    white-space: nowrap;
    overflow: hidden;
    animation: blink-cursor 0.8s step-end infinite;
    display: inline-block;
}

@keyframes blink-cursor {

    0%,
    100% {
        border-color: #a78bfa;
    }

    50% {
        border-color: transparent;
    }
}

/* ----------------------------------------------------------
   5. SECTION HEADING SLIDE-IN WITH UNDERLINE
   Usage: <h2 class="vr-section-heading">Action Zone</h2>
   ---------------------------------------------------------- */
.vr-section-heading {
    position: relative;
    display: inline-block;
}

.vr-section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, #7c3aed, #3b82f6);
    border-radius: 2px;
    transition: width 0.7s ease-out 0.3s;
}

/* Underline expands when AOS brings the heading into view */
.vr-section-heading.aos-animate::after {
    width: 100%;
}

/* ----------------------------------------------------------
   6. SHIMMER TEXT (for promotional/highlight text)
   Usage: <span class="vr-shimmer">BOOK NOW</span>
   ---------------------------------------------------------- */
.vr-shimmer {
    position: relative;
    display: inline-block;
    background: linear-gradient(110deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 70%),
        linear-gradient(90deg, #7c3aed, #60a5fa, #7c3aed);
    background-size: 200% 100%, 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-sweep 2.5s linear infinite;
}

@keyframes shimmer-sweep {
    0% {
        background-position: -100% 0, 0 0;
    }

    100% {
        background-position: 200% 0, 0 0;
    }
}

/* ----------------------------------------------------------
   7. LETTER-STAGGER REVEAL (hero words appear one by one)
   Applied dynamically by JS on .vr-word-split elements.
   ---------------------------------------------------------- */
.vr-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: word-rise 0.5s ease-out forwards;
}

@keyframes word-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----------------------------------------------------------
   8. COUNTER / STAT NUMBER ANIMATION
   Handled purely via JS (countUp), no extra class needed.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   9. REDUCED-MOTION: respect user preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .vr-hero-title,
    .vr-neon-text,
    .vr-typewriter,
    .vr-shimmer,
    .vr-word {
        animation: none !important;
        -webkit-text-fill-color: inherit;
        color: inherit;
        background: none;
        text-shadow: none;
        border-right: none;
        opacity: 1;
        transform: none;
    }

    .vr-reveal,
    .vr-section-heading {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .vr-section-heading::after {
        width: 100%;
    }
}