/* ======================== Slider-Start (Maroon • Gold • Ivory — Ultra Premium) =========================== */

.home-slide {
    /* ---- Theme palette ---- */
    --maroon-900: #2A050B;
    --maroon-800: #3A060D;
    --maroon-700: #4E0912;
    --maroon-600: #6B0F1A;
    --maroon-500: #80161F;

    --gold-700: #9C7411;
    --gold-600: #B8860B;
    --gold-500: #D4AF37;
    --gold-400: #E0C158;
    --gold-300: #EBD07A;

    --ivory:      #FFFDF5;
    --ivory-soft: #FAF4E4;
    --ivory-warm: #F5EAD0;

    --card-bg: linear-gradient(160deg, #1A0308 0%, #2A050B 55%, #140206 100%);

    /* ---- Motion curves ---- */
    --ease-slide:  cubic-bezier(.16, 1, .3, 1);
    --ease-press:  cubic-bezier(.4, 0, .2, 1);
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --ease-silk:   cubic-bezier(.65, 0, .35, 1);
}

/* ============================================================
   STAGE
   ============================================================ */
.home-slide .slider {
    position: relative;
    height: 100vh;
    min-height: 620px;
    width: 100%;
    margin: auto;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, #2A050B 0%, #140206 70%),
        #140206;
    perspective: 2200px;
    perspective-origin: 50% 50%;
    isolation: isolate;
}

/* Ambient floating orbs — golden + maroon */
.home-slide .slider::before,
.home-slide .slider::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    opacity: .55;
}
.home-slide .slider::before {
    width: 620px; height: 620px;
    top: -180px; left: -180px;
    background: radial-gradient(circle, rgba(212,175,55,.55), transparent 65%);
    animation: hsOrbA 16s ease-in-out infinite alternate;
}
.home-slide .slider::after {
    width: 720px; height: 720px;
    bottom: -240px; right: -200px;
    background: radial-gradient(circle, rgba(107,15,26,.55), transparent 65%);
    animation: hsOrbB 20s ease-in-out infinite alternate;
}
@keyframes hsOrbA {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes hsOrbB {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(-100px, -60px) scale(1.2); }
}

/* Animated subtle golden grid */
.home-slide .slider > .slides::before {
    content: "";
    position: absolute;
    inset: -40px;
    background-image:
        linear-gradient(rgba(212,175,55,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,.06) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
    animation: hsGrid 30s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes hsGrid {
    0%   { transform: translate(0,0); }
    100% { transform: translate(70px, 70px); }
}

/* Hide radios */
.home-slide .slide-radio { display: none; }

.home-slide .slides {
    position: relative;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
}

/* ============================================================
   SLIDE CARDS — base (off to the RIGHT)
   ============================================================ */
.home-slide .slide {
    position: absolute;
    top: 44px;
    right: 72px;
    bottom: 116px;
    left: 72px;
    overflow: hidden;
    border-radius: 26px;
    background: var(--card-bg);
    border: 1px solid rgba(212,175,55,.28);

    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform:
        translateX(72%)
        translateZ(-160px)
        rotateY(28deg)
        scale(.84);
    transform-origin: 100% 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;

    box-shadow:
        0 2px 6px rgba(0,0,0,.32),
        0 18px 40px rgba(0,0,0,.48),
        0 44px 90px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(212,175,55,.18),
        inset 0 -1px 0 rgba(0,0,0,.4);

    transition:
        transform 1.2s var(--ease-slide),
        opacity .9s var(--ease-press),
        box-shadow .9s var(--ease-slide),
        border-color .6s ease;
    will-change: transform, opacity;
}

/* ============================================================
   ACTIVE SLIDE — golden glow ring
   ============================================================ */
#slide-1:checked ~ .slides [data-slide="1"],
#slide-2:checked ~ .slides [data-slide="2"],
#slide-3:checked ~ .slides [data-slide="3"],
#slide-4:checked ~ .slides [data-slide="4"],
#slide-5:checked ~ .slides [data-slide="5"] {
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
    transform:
        translateX(0)
        translateZ(0)
        rotateY(0)
        scale(1);
    transform-origin: 50% 50%;
    border-color: rgba(212,175,55,.55);

    box-shadow:
        0 6px 14px rgba(0,0,0,.4),
        0 34px 70px rgba(0,0,0,.55),
        0 70px 120px rgba(0,0,0,.6),
        0 0 60px rgba(212,175,55,.28),
        0 0 130px rgba(212,175,55,.14),
        inset 0 1px 0 rgba(212,175,55,.35),
        inset 0 -1px 0 rgba(0,0,0,.4);
    animation: hsFrameGlow 4.5s ease-in-out infinite;
}
@keyframes hsFrameGlow {
    0%, 100% {
        box-shadow:
            0 6px 14px rgba(0,0,0,.4),
            0 34px 70px rgba(0,0,0,.55),
            0 70px 120px rgba(0,0,0,.6),
            0 0 60px rgba(212,175,55,.28),
            0 0 130px rgba(212,175,55,.14),
            inset 0 1px 0 rgba(212,175,55,.35);
    }
    50% {
        box-shadow:
            0 6px 14px rgba(0,0,0,.4),
            0 34px 70px rgba(0,0,0,.55),
            0 70px 120px rgba(0,0,0,.6),
            0 0 80px rgba(212,175,55,.45),
            0 0 160px rgba(212,175,55,.22),
            inset 0 1px 0 rgba(212,175,55,.5);
    }
}

/* ============================================================
   PREVIOUS SLIDES — pushed LEFT
   ============================================================ */
#slide-2:checked ~ .slides [data-slide="1"],
#slide-3:checked ~ .slides [data-slide="1"],
#slide-4:checked ~ .slides [data-slide="1"],
#slide-5:checked ~ .slides [data-slide="1"],
#slide-3:checked ~ .slides [data-slide="2"],
#slide-4:checked ~ .slides [data-slide="2"],
#slide-5:checked ~ .slides [data-slide="2"],
#slide-4:checked ~ .slides [data-slide="3"],
#slide-5:checked ~ .slides [data-slide="3"],
#slide-5:checked ~ .slides [data-slide="4"] {
    opacity: 0;
    pointer-events: none;
    transform:
        translateX(-72%)
        translateZ(-160px)
        rotateY(-28deg)
        scale(.84);
    transform-origin: 0% 50%;
    box-shadow:
        0 2px 6px rgba(0,0,0,.32),
        0 18px 40px rgba(0,0,0,.48),
        0 44px 90px rgba(0,0,0,.6);
}

/* ============================================================
   IMAGE with KEN BURNS + sepia-gold tint on idle
   ============================================================ */
.home-slide .slide img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: contrast(98%) brightness(.82) saturate(1.05) sepia(.15);
    transform: scale(1.12);
    transition: filter .9s ease;
    will-change: transform;
}

.home-slide .slide:hover img {
    filter: contrast(106%) brightness(1) saturate(1.18) sepia(.05);
}

/* Cinematic slow zoom on the active slide */
#slide-1:checked ~ .slides [data-slide="1"] img,
#slide-2:checked ~ .slides [data-slide="2"] img,
#slide-3:checked ~ .slides [data-slide="3"] img,
#slide-4:checked ~ .slides [data-slide="4"] img,
#slide-5:checked ~ .slides [data-slide="5"] img {
    animation: hsKenBurns 9s ease-out forwards;
}
@keyframes hsKenBurns {
    0%   { transform: scale(1.14) translate(0, 0); }
    100% { transform: scale(1.02) translate(-1.2%, -1.4%); }
}

/* ============================================================
   OVERLAYS — maroon vignette + golden gradient
   ============================================================ */
.home-slide .home-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    color: var(--ivory);
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(20,2,6,.55) 100%),
        linear-gradient(180deg, rgba(20,2,6,.35) 0%, transparent 35%, transparent 48%, rgba(20,2,6,.85) 100%),
        linear-gradient(90deg, rgba(42,5,11,.6) 0%, transparent 60%),
        radial-gradient(circle at 15% 90%, rgba(212,175,55,.12) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 1.1s ease .2s;
}

#slide-1:checked ~ .slides [data-slide="1"] .home-overlay,
#slide-2:checked ~ .slides [data-slide="2"] .home-overlay,
#slide-3:checked ~ .slides [data-slide="3"] .home-overlay,
#slide-4:checked ~ .slides [data-slide="4"] .home-overlay,
#slide-5:checked ~ .slides [data-slide="5"] .home-overlay {
    opacity: 1;
}

/* ============================================================
   CAPTION — floating maroon glass card with golden accents
   ============================================================ */
.cs-title {
    position: absolute;
    bottom: 48px;
    left: 48px;
    z-index: 10;
    max-width: 560px;
    width: max-content;
    padding: 24px 40px 24px 34px;
    background:
        linear-gradient(135deg, rgba(42,5,11,.92) 0%, rgba(58,6,13,.8) 100%);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    border: 1px solid rgba(212,175,55,.35);
    border-radius: 14px;
    overflow: hidden;

    opacity: 0;
    transform: translateX(-50px) translateZ(50px);
    transition:
        opacity 1s var(--ease-slide) .45s,
        transform 1s var(--ease-slide) .45s,
        box-shadow .5s ease,
        border-color .5s ease;

    box-shadow:
        0 2px 4px rgba(0,0,0,.35),
        0 18px 40px rgba(0,0,0,.5),
        0 40px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(212,175,55,.22);
}

/* Golden accent bar (left) */
.cs-title::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
    box-shadow: 0 0 24px rgba(212,175,55,.75);
}

/* Shimmer sweep — golden */
.cs-title::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(212,175,55,.28), transparent);
    transform: skewX(-20deg);
    transition: left 1.2s var(--ease-slide) .6s;
    pointer-events: none;
}

#slide-1:checked ~ .slides [data-slide="1"] .cs-title,
#slide-2:checked ~ .slides [data-slide="2"] .cs-title,
#slide-3:checked ~ .slides [data-slide="3"] .cs-title,
#slide-4:checked ~ .slides [data-slide="4"] .cs-title,
#slide-5:checked ~ .slides [data-slide="5"] .cs-title {
    opacity: 1;
    transform: translateX(0) translateZ(50px);
}
#slide-1:checked ~ .slides [data-slide="1"] .cs-title::after,
#slide-2:checked ~ .slides [data-slide="2"] .cs-title::after,
#slide-3:checked ~ .slides [data-slide="3"] .cs-title::after,
#slide-4:checked ~ .slides [data-slide="4"] .cs-title::after,
#slide-5:checked ~ .slides [data-slide="5"] .cs-title::after {
    left: 130%;
}

.cs-title h1 {
    font-size: clamp(20px, 2.6vw, 30px);
    margin: 0;
    letter-spacing: .6px;
    font-weight: 700;
    color: var(--ivory);
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow:
        0 2px 20px rgba(0,0,0,.6),
        0 0 30px rgba(212,175,55,.25);
    transition: letter-spacing .5s var(--ease-slide), color .4s ease;
}

.cs-title:hover {
    border-color: rgba(212,175,55,.75);
    box-shadow:
        0 2px 4px rgba(0,0,0,.35),
        0 22px 55px rgba(212,175,55,.45),
        0 0 90px rgba(212,175,55,.2),
        inset 0 1px 0 rgba(212,175,55,.35);
}
.cs-title:hover h1 {
    letter-spacing: 1.4px;
    color: var(--gold-300);
}

/* ============================================================
   NAV BUTTONS — premium circular, gold ring, maroon base
   ============================================================ */
.home-slide .slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    color: var(--ivory);
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    background: rgba(42,5,11,.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212,175,55,.45);

    text-decoration: none;
    z-index: 20;
    opacity: 0;
    pointer-events: auto;

    box-shadow:
        0 2px 6px rgba(0,0,0,.4),
        0 14px 30px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(212,175,55,.25);

    transition:
        opacity .4s ease,
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .55s var(--ease-bounce),
        box-shadow .4s ease;
}

/* Golden pulse ring */
.home-slide .slide-nav::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(212,175,55,.7);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .4s ease, transform .5s ease;
}
.home-slide .slide:hover .slide-nav { opacity: 1; }
.home-slide .slide-nav:hover {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    border-color: var(--gold-500);
    color: var(--maroon-800);
    transform: translateY(-50%) scale(1.14);
    box-shadow:
        0 6px 14px rgba(212,175,55,.6),
        0 18px 40px rgba(212,175,55,.6),
        inset 0 1px 0 rgba(255,255,255,.4);
}
.home-slide .slide-nav:hover::after {
    opacity: 1;
    transform: scale(1.15);
    animation: hsRing 1.4s ease-out infinite;
}
@keyframes hsRing {
    0%   { transform: scale(1);   opacity: .85; }
    100% { transform: scale(1.55); opacity: 0; }
}

.home-slide .slide-nav.prev { left: 26px; }
.home-slide .slide-nav.next { right: 26px; }

/* ============================================================
   DOTS — frosted maroon pill with golden active state
   ============================================================ */
.home-slide .slide-dots {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 30;
    padding: 12px 22px;
    background: rgba(42,5,11,.78);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border-radius: 40px;
    border: 1px solid rgba(212,175,55,.4);
    box-shadow:
        0 4px 12px rgba(0,0,0,.4),
        0 14px 32px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(212,175,55,.22);
}

.home-slide .slide-dots label {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,253,245,.4);
    cursor: pointer;
    transition:
        background .4s ease,
        transform .5s var(--ease-bounce),
        width .5s var(--ease-bounce),
        box-shadow .4s ease;
}
.home-slide .slide-dots label:hover {
    background: var(--gold-300);
    transform: scale(1.25);
}

/* Active dot — glowing golden pill */
#slide-1:checked ~ .slide-dots label:nth-child(1),
#slide-2:checked ~ .slide-dots label:nth-child(2),
#slide-3:checked ~ .slide-dots label:nth-child(3),
#slide-4:checked ~ .slide-dots label:nth-child(4),
#slide-5:checked ~ .slide-dots label:nth-child(5) {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    width: 36px;
    border-radius: 10px;
    transform: scale(1);
    box-shadow:
        0 0 14px rgba(212,175,55,.95),
        0 0 28px rgba(212,175,55,.7),
        inset 0 1px 0 rgba(255,255,255,.5);
    animation: hsDotPulse 2.4s ease-in-out infinite;
}
@keyframes hsDotPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(212,175,55,.95), 0 0 28px rgba(212,175,55,.7); }
    50%      { box-shadow: 0 0 22px rgba(212,175,55,1),  0 0 44px rgba(212,175,55,.9); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .home-slide .slider {
        height: 78vh;
        min-height: 520px;
        perspective: 1600px;
    }
    .home-slide .slide {
        top: 30px;
        left: 40px;
        right: 40px;
        bottom: 106px;
        border-radius: 20px;
    }
    .cs-title {
        bottom: 34px;
        left: 34px;
        max-width: 74%;
        padding: 18px 26px 18px 22px;
    }
    .home-slide .slide-nav {
        width: 48px;
        height: 48px;
        font-size: 17px;
    }
    .home-slide .slide-nav.prev { left: 18px; }
    .home-slide .slide-nav.next { right: 18px; }

    .home-slide .slide-dots {
        bottom: 30px;
        padding: 9px 18px;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .home-slide .slider {
        height: 70vh;
        min-height: 460px;
        perspective: 1200px;
    }
    .home-slide .slide {
        top: 20px;
        left: 16px;
        right: 16px;
        bottom: 88px;
        border-radius: 16px;
    }
    .cs-title {
        bottom: 22px;
        left: 20px;
        padding: 14px 18px 14px 16px;
        border-radius: 12px;
        max-width: 82%;
    }
    .cs-title h1 {
        font-size: 15px;
        letter-spacing: .4px;
    }
    .cs-title::before { width: 3px; }
    .cs-title::after { display: none; }

    .home-slide .slide-nav {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }
    .home-slide .slide-nav.prev { left: 10px; }
    .home-slide .slide-nav.next { right: 10px; }

    .home-slide .slide-dots {
        bottom: 24px;
        padding: 7px 15px;
        gap: 8px;
    }
    .home-slide .slide-dots label {
        width: 8px;
        height: 8px;
    }
    #slide-1:checked ~ .slide-dots label:nth-child(1),
    #slide-2:checked ~ .slide-dots label:nth-child(2),
    #slide-3:checked ~ .slide-dots label:nth-child(3),
    #slide-4:checked ~ .slide-dots label:nth-child(4),
    #slide-5:checked ~ .slide-dots label:nth-child(5) {
        width: 26px;
    }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .home-slide .slide,
    .home-slide .slide img,
    .cs-title,
    .home-slide .slide-nav,
    .home-slide .slide-dots label {
        transition-duration: .2s !important;
        animation: none !important;
    }
    .home-slide .slide,
    #slide-1:checked ~ .slides [data-slide="1"],
    #slide-2:checked ~ .slides [data-slide="2"],
    #slide-3:checked ~ .slides [data-slide="3"],
    #slide-4:checked ~ .slides [data-slide="4"],
    #slide-5:checked ~ .slides [data-slide="5"] {
        transform: none;
    }
}

/* ======================== Slider-End =========================== */