/* ═══════════════════════════════════════════════════════════════════
   MINDORA CEYLON (MC)
   template-hero-slider.css — Hero Slider v17.0
   "Sapphire Sanctum" — Wellness-Luxury Premium Design

   Brand Identity: Wellness · Medical · Mindful Travel
   Color Soul: Sapphire Blue · Gem Gold · Serenity Sage · Healing Ivory
   Founded: Balangoda, Sabaragamuwa Province, Sri Lanka

   ⚠  ALL colour / font / shadow values reference main.css variables.
   ⚠  DO NOT hardcode any brand values in this file.
   ⚠  DO NOT inline this file in any HTML template.
   ⚠  DO NOT add fallback hardcoded company information.
═══════════════════════════════════════════════════════════════════ */


/* ── 1. ROOT CONTAINER ───────────────────────────────────────────── */
.mc-hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 640px;
    max-height: 1100px;
    overflow: hidden;
    background-color: var(--color-navy-deep);
    cursor: default;
    isolation: isolate;
}


/* ── 2. BACKGROUND MEDIA ─────────────────────────────────────────── */
.mc-hero__poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    transition: opacity 2s ease;
}

.mc-hero__poster.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.mc-hero__poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    animation: mc-ken-burns 28s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes mc-ken-burns {
    0%   { transform: scale(1.03) translate(0, 0); }
    50%  { transform: scale(1.09) translate(-0.8%, -0.6%); }
    100% { transform: scale(1.05) translate(0.5%, 0.3%); }
}

.mc-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 1;
}


/* ── 3. OVERLAY SYSTEM ───────────────────────────────────────────── */

/* Primary cinematic overlay — sapphire left-dominant */
.mc-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        /* Left heavy panel for content legibility */
        linear-gradient(
            108deg,
            rgba(var(--color-navy-rgb), 0.97) 0%,
            rgba(var(--color-navy-rgb), 0.88) 22%,
            rgba(var(--color-navy-rgb), 0.60) 44%,
            rgba(var(--color-navy-rgb), 0.22) 62%,
            rgba(var(--color-navy-rgb), 0.05) 76%,
            transparent 88%
        ),
        /* Bottom fade for indicators / scroll */
        linear-gradient(
            to top,
            rgba(var(--color-navy-rgb), 0.72) 0%,
            rgba(var(--color-navy-rgb), 0.28) 22%,
            transparent 42%
        ),
        /* Top subtle fade */
        linear-gradient(
            to bottom,
            rgba(var(--color-navy-rgb), 0.30) 0%,
            transparent 18%
        );
}

/* Sapphire gem-glow radial — upper left atmospheric accent */
.mc-hero__gem-glow {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    top: -10%;
    left: -8%;
    width: 55%;
    height: 70%;
    background: radial-gradient(
        ellipse at 25% 25%,
        rgba(var(--color-navy-rgb), 0.20) 0%,
        rgba(var(--color-gold-rgb), 0.06) 40%,
        transparent 72%
    );
    filter: blur(32px);
    animation: mc-glow-drift 16s ease-in-out infinite alternate;
}

@keyframes mc-glow-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(2%, 3%) scale(1.05); }
}

/* Right diagonal accent split — subtle warm veil */
.mc-hero__split-accent {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    top: 0;
    right: 0;
    width: 42%;
    height: 100%;
    background: linear-gradient(
        -20deg,
        rgba(var(--color-gold-rgb), 0.04) 0%,
        transparent 55%
    );
    clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Decorative corner frame accents */
.mc-hero__frame {
    position: absolute;
    inset: 24px;
    z-index: 6;
    pointer-events: none;
}

.mc-hero__frame-tl,
.mc-hero__frame-br {
    position: absolute;
    width: 44px;
    height: 44px;
    opacity: 0.28;
}

.mc-hero__frame-tl {
    top: 0;
    left: 0;
    border-top: 1.5px solid var(--color-gold);
    border-left: 1.5px solid var(--color-gold);
}

.mc-hero__frame-br {
    bottom: 0;
    right: 0;
    border-bottom: 1.5px solid var(--color-gold);
    border-right: 1.5px solid var(--color-gold);
}


/* ── 4. SLIDE NUMBER RAIL (desktop left-edge vertical) ───────────── */
.mc-hero__slide-rail {
    position: absolute;
    z-index: 10;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.5s ease 1.4s;
}

.mc-hero.is-ready .mc-hero__slide-rail {
    opacity: 1;
}

.mc-hero__slide-current {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gold);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    text-shadow: 0 0 16px rgba(var(--color-gold-rgb), 0.5);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-hero__slide-divider {
    display: block;
    width: 1.5px;
    height: 40px;
    background: linear-gradient(
        to bottom,
        var(--color-gold),
        rgba(var(--color-gold-rgb), 0.15)
    );
    border-radius: 2px;
}

.mc-hero__slide-total {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-white-50);
    letter-spacing: var(--ls-widest);
}


/* ── 5. MAIN CONTENT PANEL ───────────────────────────────────────── */
.mc-hero__content {
    position: absolute;
    z-index: 8;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--spacing-0) var(--spacing-12) var(--spacing-0) 88px;
    max-width: 660px;
    width: 62%;
}

/* Eyebrow pill */
.mc-hero__eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.mc-hero.slide-active .mc-hero__eyebrow-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}

.mc-hero__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gold);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.7);
    animation: mc-dot-pulse 2.6s ease-in-out infinite;
}

@keyframes mc-dot-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.7); transform: scale(1); }
    50%       { box-shadow: 0 0 16px rgba(var(--color-gold-rgb), 0.9); transform: scale(1.18); }
}

.mc-hero__eyebrow {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin: 0;
    line-height: 1;
}

/* Main title */
.mc-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.2vw, var(--text-7xl));
    font-weight: var(--font-weight-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--ls-tight);
    color: var(--color-white);
    margin: 0 0 var(--spacing-4);
    max-width: clamp(300px, 50vw, 680px);
    text-shadow:
        0 2px 8px  rgba(var(--color-navy-rgb), 0.55),
        0 8px 32px rgba(var(--color-navy-rgb), 0.35);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.mc-hero.slide-active .mc-hero__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
}

/* Gold last-word highlight — applied by JS via <em> wrap */
.mc-hero__title em {
    font-style: normal;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Title decorative rule */
.mc-hero__title-rule {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: left center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.mc-hero.slide-active .mc-hero__title-rule {
    opacity: 1;
    transform: scaleX(1);
    transition-delay: 0.30s;
}

.mc-hero__title-rule-bar {
    display: block;
    width: 52px;
    height: 1.5px;
    background: linear-gradient(to right, var(--color-gold), rgba(var(--color-gold-rgb), 0.0));
    border-radius: 2px;
}

.mc-hero__title-rule-gem {
    font-size: 7px;
    color: var(--color-gold);
    opacity: 0.65;
    line-height: 1;
}

/* Description */
.mc-hero__description {
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-weight-light);
    line-height: var(--leading-relaxed);
    color: var(--color-white-75);
    margin: 0 0 var(--spacing-7);
    max-width: 500px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mc-hero.slide-active .mc-hero__description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.36s;
}

/* Stats row */
.mc-hero__stats {
    list-style: none;
    margin: 0 0 var(--spacing-8);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3) var(--spacing-5);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.mc-hero.slide-active .mc-hero__stats {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.46s;
}

.mc-hero__stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    background: rgba(var(--color-gold-rgb), 0.08);
    border: 1px solid rgba(var(--color-gold-rgb), 0.18);
    border-radius: var(--radius-full, 999px);
    padding: var(--spacing-1-5) var(--spacing-4);
    backdrop-filter: blur(4px);
}

.mc-hero__stat i {
    font-size: var(--text-xs);
    color: var(--color-gold);
}

.mc-hero__stat span {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-white-85, rgba(255,255,255,0.85));
    letter-spacing: var(--ls-wide);
    white-space: nowrap;
}

/* CTA group */
.mc-hero__cta-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.mc-hero.slide-active .mc-hero__cta-group {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.56s;
}

/* Primary CTA button */
.mc-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    background: var(--gradient-gold);
    color: var(--color-navy-deep);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--radius-full, 999px);
    box-shadow: var(--shadow-gold);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    position: relative;
    overflow: hidden;
}

.mc-hero__cta-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.mc-hero__cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold-lg);
    filter: brightness(1.06);
    color: var(--color-navy-deep);
    text-decoration: none;
}

.mc-hero__cta-primary:hover::before {
    opacity: 1;
}

.mc-hero__cta-icon {
    font-size: var(--text-sm);
}

.mc-hero__cta-arrow {
    display: flex;
    align-items: center;
    font-size: 11px;
    transition: transform 0.22s ease;
}

.mc-hero__cta-primary:hover .mc-hero__cta-arrow {
    transform: translateX(3px);
}

/* Secondary CTA — ghost style */
.mc-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: transparent;
    border: 1px solid var(--color-white-30);
    color: var(--color-white-80);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--ls-wide);
    text-decoration: none;
    padding: var(--spacing-3-5) var(--spacing-7);
    border-radius: var(--radius-full, 999px);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.mc-hero__cta-secondary:hover {
    background: var(--color-white-10);
    border-color: var(--color-white-50);
    color: var(--color-white);
    text-decoration: none;
}


/* ── 6. TRUST / AWARD BADGE ──────────────────────────────────────── */
.mc-hero__trust {
    position: absolute;
    z-index: 9;
    bottom: 80px;
    right: 40px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease 1.1s, transform 0.55s ease 1.1s;
}

.mc-hero.is-ready .mc-hero__trust {
    opacity: 1;
    transform: translateY(0);
}

.mc-hero__trust-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    background: rgba(var(--color-navy-rgb), 0.55);
    border: 1px solid rgba(var(--color-gold-rgb), 0.25);
    border-radius: var(--radius-lg, 12px);
    padding: var(--spacing-3) var(--spacing-5);
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: var(--shadow-luxury);
}

.mc-hero__trust-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-gold-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-hero__trust-icon-wrap i {
    font-size: var(--text-md);
    color: var(--color-gold);
}

.mc-hero__trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mc-hero__trust-line1 {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white-95);
    line-height: 1.1;
}

.mc-hero__trust-line2 {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-gold-light);
    letter-spacing: var(--ls-wide);
}


/* ── 7. SLIDE INDICATORS (dots) ──────────────────────────────────── */
.mc-hero__indicators {
    position: absolute;
    z-index: 10;
    bottom: 38px;
    left: 200px;
    display: flex;
    align-items: center;
    gap: var(--spacing-2-5);
    opacity: 0;
    transition: opacity 0.5s ease 1.2s;
}

.mc-hero.is-ready .mc-hero__indicators {
    opacity: 1;
}

.mc-hero__dot {
    all: unset;
    cursor: pointer;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.28);
    transition: width 0.38s ease, background 0.38s ease, box-shadow 0.38s ease;
}

.mc-hero__dot.is-active {
    width: 48px;
    background: var(--color-gold);
    box-shadow: 0 0 10px rgba(var(--color-gold-rgb), 0.5);
}

.mc-hero__dot:hover:not(.is-active) {
    background: rgba(255,255,255,0.5);
}


/* ── 8. VIDEO CONTROLS ───────────────────────────────────────────── */
.mc-hero__controls {
    position: absolute;
    z-index: 10;
    bottom: 28px;
    left: 88px;
    display: flex;
    gap: var(--spacing-2);
    opacity: 0;
    transition: opacity 0.5s ease 1.3s;
}

.mc-hero.is-ready .mc-hero__controls {
    opacity: 1;
}

.mc-hero__ctrl {
    all: unset;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--color-navy-rgb), 0.60);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white-70);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.mc-hero__ctrl:hover {
    background: rgba(var(--color-gold-rgb), 0.28);
    border-color: rgba(var(--color-gold-rgb), 0.50);
    color: var(--color-gold-light);
    transform: scale(1.08);
}

.mc-hero__ctrl:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}


/* ── 9. SCROLL HINT ──────────────────────────────────────────────── */
.mc-hero__scroll-hint {
    position: absolute;
    z-index: 10;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    opacity: 0;
    transition: opacity 0.5s ease 1.6s;
    pointer-events: none;
}

.mc-hero.is-ready .mc-hero__scroll-hint {
    opacity: 0.55;
}

.mc-hero__scroll-mouse {
    width: 20px;
    height: 30px;
    border-radius: 10px;
    border: 1.5px solid var(--color-white-50);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
}

.mc-hero__scroll-wheel {
    width: 3px;
    height: 6px;
    background: var(--color-white-70);
    border-radius: 2px;
    animation: mc-scroll-wheel 1.8s ease-in-out infinite;
}

@keyframes mc-scroll-wheel {
    0%   { opacity: 1; transform: translateY(0); }
    60%  { opacity: 0; transform: translateY(8px); }
    100% { opacity: 0; transform: translateY(0); }
}

.mc-hero__scroll-label {
    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-white-50);
}


/* ── 10. LANGUAGE STRIP (scrolling marquee) ──────────────────────── */
.mc-hero__lang-strip {
    position: absolute;
    z-index: 7;
    top: 0;
    right: 0;
    width: 36%;
    height: 3px;
    overflow: hidden;
    background: linear-gradient(
        to right,
        transparent,
        rgba(var(--color-gold-rgb), 0.22),
        rgba(var(--color-gold-rgb), 0.42),
        rgba(var(--color-gold-rgb), 0.22),
        transparent
    );
}

.mc-hero__lang-strip-inner {
    /* language greeting strip — content injected by JS */
    display: none;
}


/* ── 11. SLIDE TRANSITION STATES ─────────────────────────────────── */

/* When slide is being animated OUT */
.mc-hero.slide-leaving .mc-hero__eyebrow-wrap,
.mc-hero.slide-leaving .mc-hero__title,
.mc-hero.slide-leaving .mc-hero__title-rule,
.mc-hero.slide-leaving .mc-hero__description,
.mc-hero.slide-leaving .mc-hero__stats,
.mc-hero.slide-leaving .mc-hero__cta-group {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.30s ease, transform 0.30s ease;
    transition-delay: 0s !important;
}


/* ── 12. RESPONSIVE — TABLET ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .mc-hero__content {
        padding: 0 var(--spacing-10) 0 var(--spacing-16);
        width: 72%;
        max-width: 580px;
    }

    .mc-hero__slide-rail {
        left: 14px;
    }

    .mc-hero__title {
        font-size: clamp(2rem, 4.5vw, var(--text-6xl));
    }

    .mc-hero__trust {
        bottom: 70px;
        right: 24px;
    }
}


/* ── 13. RESPONSIVE — MOBILE ─────────────────────────────────────── */
@media (max-width: 768px) {
    .mc-hero {
        max-height: none;
    }

    /* Hide vertical rail on mobile */
    .mc-hero__slide-rail {
        display: none;
    }

    .mc-hero__content {
        left: 0;
        top: auto;
        bottom: 110px;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 0 var(--spacing-6);
    }

    .mc-hero__title {
        font-size: clamp(1.9rem, 7vw, 2.8rem);
    }

    .mc-hero__description {
        font-size: var(--text-base);
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mc-hero__stats {
        gap: var(--spacing-2);
    }

    .mc-hero__stat {
        padding: var(--spacing-1) var(--spacing-3);
    }

    .mc-hero__cta-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    .mc-hero__cta-primary,
    .mc-hero__cta-secondary {
        font-size: var(--text-sm);
        padding: var(--spacing-3) var(--spacing-6);
    }

    .mc-hero__trust {
        right: 16px;
        bottom: auto;
        top: 80px;
    }

    .mc-hero__trust-inner {
        padding: var(--spacing-2) var(--spacing-3);
        gap: var(--spacing-2);
    }

    .mc-hero__trust-line1 {
        font-size: var(--text-sm);
    }

    .mc-hero__indicators {
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }

    .mc-hero__controls {
        left: 50%;
        right: auto;
        bottom: 64px;
        transform: translateX(-50%);
    }

    .mc-hero__scroll-hint {
        display: none;
    }

    .mc-hero__frame {
        inset: 12px;
    }

    .mc-hero__frame-tl,
    .mc-hero__frame-br {
        width: 28px;
        height: 28px;
    }
}


/* ── 14. REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-hero__poster-img,
    .mc-hero__gem-glow,
    .mc-hero__eyebrow-dot,
    .mc-hero__scroll-wheel {
        animation: none !important;
    }

    .mc-hero__eyebrow-wrap,
    .mc-hero__title,
    .mc-hero__title-rule,
    .mc-hero__description,
    .mc-hero__stats,
    .mc-hero__cta-group {
        transition: opacity 0.2s ease !important;
        transform: none !important;
    }
}