/* =========================================================
   ROOVAA VISUAL SYSTEM
   ========================================================= */

:root {
    --roova-orange: #ff4500;
    --roova-orange-dark: #df3d00;
    --roova-cream: #fff8f4;
    --roova-ink: #111827;
    --roova-muted: #6b7280;
}


/* =========================================================
   ROOVAA HOMEPAGE HERO SLIDESHOW
   ========================================================= */

.roova-hero-slide {
    position: absolute;
    inset: 0;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 900ms ease;
}


.roova-hero-slide.is-active {
    opacity: 1;
}


.roova-hero-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.02);

    transition:
        transform 7s ease;
}


.roova-hero-slide.is-active img {
    transform: scale(1.07);
}


/*
A dark transparent layer stays above every image,
but below the headline.

This keeps white text readable even when the
background photograph is bright.
*/
.roova-hero-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 15, 0.58) 0%,
            rgba(5, 8, 15, 0.68) 45%,
            rgba(5, 8, 15, 0.72) 100%
        );
}


/* ---------- GLASS ELEMENTS ---------- */

.roova-glass {
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}


/* ---------- IMAGE CARDS ---------- */

.roova-image-card {
    position: relative;
    overflow: hidden;
}

.roova-image-card img {
    transition:
        transform 500ms ease,
        filter 500ms ease;
}

.roova-image-card:hover img {
    transform: scale(1.07);
}

.roova-image-card-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(15, 23, 42, 0.42) 0%,
            rgba(15, 23, 42, 0.10) 35%,
            rgba(15, 23, 42, 0.00) 65%
        );
}


/* ---------- REVEAL ANIMATION ---------- */

.roova-reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 650ms ease,
        transform 650ms ease;
}

.roova-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ---------- PREMIUM CARD ---------- */

.roova-premium-card {
    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        border-color 250ms ease;
}

.roova-premium-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 24px 60px rgba(17, 24, 39, 0.12);
}


/* ---------- HORIZONTAL VISUAL RAIL ---------- */

.roova-visual-rail {
    overflow-x: auto;

    scrollbar-width: none;

    scroll-snap-type: x mandatory;
}

.roova-visual-rail::-webkit-scrollbar {
    display: none;
}

.roova-visual-rail > * {
    scroll-snap-align: start;
}


/* Accessibility */

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

    .roova-hero-slide,
    .roova-hero-slide img,
    .roova-reveal,
    .roova-premium-card,
    .roova-image-card img {
        transition: none !important;
        animation: none !important;
    }
}