/* =====================================================
   HERO SLIDER - ENTERPRISE VERSION
   Optimized | Clean | Responsive | Performance Safe
===================================================== */

/* =====================================================
   ROOT HEIGHT CONTROL (ADMIN CONTROLLED VARIABLES)
===================================================== */

:root {
    --hero-height-desktop: 65vh;
    --hero-height-tablet: 55vh;
    --hero-height-mobile: 45vh;
}

/* Desktop */
#heroCarousel .carousel-item {
    height: var(--hero-height-desktop);
}

/* Tablet */
@media (max-width: 992px) {
    #heroCarousel .carousel-item {
        height: var(--hero-height-tablet);
    }
}

/* Mobile */
@media (max-width: 576px) {
    #heroCarousel .carousel-item {
        height: var(--hero-height-mobile);
    }
}

/* =====================================================
   HERO CONTAINER
===================================================== */

.hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    /* =====================================================
   MEDIA (IMAGE / VIDEO)
===================================================== */

    .hero-media,
    .hero-slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        will-change: transform;
        backface-visibility: hidden;
    }

/* =====================================================
   OVERLAY
===================================================== */

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Caption */
.carousel-caption {
    z-index: 5;
}

/* =====================================================
   KEN BURNS EFFECT
===================================================== */

@keyframes kenburnsZoomIn {
    from {
        transform: scale(1) translate(0, 0);
    }

    to {
        transform: scale(1.15) translate(-2%, -2%);
    }
}

@keyframes kenburnsZoomOut {
    from {
        transform: scale(1.15) translate(2%, 2%);
    }

    to {
        transform: scale(1) translate(0, 0);
    }
}

.hero-media.kenburns-in {
    animation: kenburnsZoomIn 12s ease-in-out forwards;
}

.hero-media.kenburns-out {
    animation: kenburnsZoomOut 12s ease-in-out forwards;
}

/* =====================================================
   SPLIT TEXT ANIMATIONS
===================================================== */

.split-text {
    display: inline-block;
    overflow: hidden;
}

    .split-text span {
        display: inline-block;
        opacity: 0;
    }

/* Fade Up */
.split-fade-up span {
    animation: splitFadeUp 0.6s forwards;
}

@keyframes splitFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Left */
.split-fade-left span {
    animation: splitFadeLeft 0.6s forwards;
}

@keyframes splitFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom */
.split-zoom span {
    animation: splitZoom 0.5s forwards;
}

@keyframes splitZoom {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================
   PAGINATION STYLES
===================================================== */

.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.6);
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    background-color: #ffffff;
    transform: scale(1.2);
}

/* Pill Style */
.pagination-pill .carousel-indicators [data-bs-target] {
    width: 18px;
    height: 8px;
    border-radius: 20px;
    background-color: rgba(255,255,255,0.5);
}

.pagination-pill .carousel-indicators .active {
    width: 24px;
    background-color: #ffffff;
}

/* =====================================================
   PERFORMANCE SAFE REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-media,
    .split-text span {
        animation: none !important;
        transition: none !important;
    }
}