/* ============================================================
   HERO STYLES v2 — Elevated Luxury Fashion
   Changes: Refined palette · Ken Burns · Staggered reveals
            Parallax depth · Masked transitions · Gold accents
   ============================================================ */

:root {
    /* Refined Palette */
    --red-color:        red;
    --deep-burgundy:    #7D1A1A;   /* Deep Burgundy — was #D32F2F  */
    --hero-charcoal:    #1A1A1A;   /* Rich charcoal — not pure black*/
    --hero-champagne:   #E2D5B8;   /* Champagne for subtle details  */
    --hero-text:        #F5F0E8;   /* Slightly warm white           */
    --white-color:      white;
}

/* ── Hero Board ─────────────────────────────────────────── */
#HeroBoard
{
    position: relative;
    overflow: hidden;
    height: 75vh;
    width: 98%;
    display: flex;
    align-items: center;
    /* Charcoal fallback while background image loads */
    background-color: var(--hero-charcoal);
    background-image: url('../assets/poster_images/poster_hero_background_img.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    border: solid 0 transparent;
    border-radius: 16px;
    /* Subtle vignette overlay via pseudo-element (see below) */
}

/* Vignette that darkens edges to make content pop */
#HeroBoard::before
{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(10,5,5,0.55) 100%
    );
    z-index: 0;
    pointer-events: none;
}

    /* ── Swiper Wrapper ─────────────────────────────────────── */
    .SwipperWrapperBar
    {
        height: 100%;
        width: 100%;
        position: relative;
    }

        /* ── Slide Item ─────────────────────────────────────────── */
        .HeroSlideItemBar
        {
            width: 96%;
            max-width: 1200px;
            height: 90%;
            position: absolute;
            bottom: 16px;
            left: 50%;
            transform: translateX(-50%) translateX(100%);
            border-radius: 12px;
            overflow: hidden;
            /* Layered shadow for depth */
            box-shadow:
                0 4px 12px rgba(0,0,0,0.3),
                0 20px 60px rgba(0,0,0,0.45),
                0 0 0 1px rgba(201,168,76,0.12); /* faint gold rim */
            display: flex;
            opacity: 0;
            pointer-events: none;
            transition:
            transform 1.4s cubic-bezier(0.76,0,0.24,1),
            opacity   0.7s ease;
            z-index: 1;
            background-color: var(--hero-charcoal);
        }

/* ── Hero Image — Ken Burns base ───────────────────────── */
.HeroImg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 12px;
    object-fit: cover;
    object-position: top center;
    z-index: 1;
    transform: scale(1.08);          /* slightly zoomed in at rest   */
    transform-origin: center center;
    transition: transform 0.8s ease; /* smooth on enter              */
}

/* ── Content Overlay Gradient ───────────────────────────── */
/* Replaced solid red blocks with a cinematic bottom-lit gradient */
.HeroContentContainerBar {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: flex-end;          /* pin content to bottom        */
    justify-content: center;
    padding: 0 0 56px 0;
    /* Multi-stop gradient: transparent top → rich burgundy mid → deep bottom */
    background:
        linear-gradient(
            to top,
            transparent 0%,
            rgba(60,10,10,0.60) 10%,
            rgba(100,18,18,0.80) 40%,
            rgba(157,35,35, 0.40) 50%,
            transparent          100%
        );
    border: solid 0 transparent;
}

/* ── Content Text Block ─────────────────────────────────── */
.HeroContentBar {
    max-width: 580px;
    width: 100%;
    opacity: 0;
    transform: translateY(40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Logo icon */
.HeroContentBar img {
    height: 66px; width: 66px;
    margin-left: auto; margin-right: auto;
    margin-bottom: 20px;
    border-radius: 50%;
    opacity: 0.4;
    /* stagger-1 */
    animation: none;
}

/* Eyebrow label */
.HeroContentSpand
{
    display: block;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 12px;
    color: var(--hero-champagne);
    margin-bottom: 12px;
    /* stagger-2 */
}

/* Hero Content Title Bar */
#HeroContentTitleBar    {
                            display: flex;
                            flex-direction: row;
                            gap: 8px;
                        }

/* Headline */
#HeroContentTitleBar h1
{
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-size: clamp(28px, 3.5vw, 36px);
    line-height: 1.12;
    color: var(--hero-text);
    margin:0;
    margin-bottom: 16px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    /* stagger-3 */
}

#HeroContentTitleBar h1>span    {
                                    color: var(--red-color);
                                }

/* Body copy */
.HeroContentBar p {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-size: clamp(15px, 1.6vw, 18px);
    font-style: italic;
    color: var(--hero-champagne);
    margin-bottom: 28px;
    opacity: 0.9;
    max-width: 460px;
    /* stagger-4 */
}

/* CTA Button */
.HeroContentButton {
    font-family: 'Courier New', Courier, monospace;
    width: fit-content;
    display: inline-block;
    background-color: transparent;
    color: black;
    padding: 13px 28px;
    margin: 0;
    margin-left: auto; margin-right: auto;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Gold border instead of plain white */
    border: solid 0 transparent;
    border-radius: 40px;
    transition:
        background-color 0.35s ease,
        color            0.35s ease,
        transform        0.35s ease,
        box-shadow       0.35s ease;
    /* stagger-5 */
}

.HeroContentButton:hover {
    color: var(--white-color);
    background-color: var(--black-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 16px var(--deep-burgundy);
}

/* ── Active Slide ────────────────────────────────────────── */
.SwipperSlideActiveBar {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateX(0%);
    z-index: 2;
}

/* Ken Burns on the active slide image */
.SwipperSlideActiveBar .HeroImg {
    animation: kenBurns 12s ease-out forwards;
}

/* Staggered reveal for each child of HeroContentBar */
.SwipperSlideActiveBar .HeroContentBar {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
}

.SwipperSlideActiveBar .HeroContentBar img {
    animation: fadeInUp 0.7s ease-out 0.3s both;
}

.SwipperSlideActiveBar .HeroContentBar span {
    animation: fadeInUp 0.7s ease-out 0.55s both;
}

.SwipperSlideActiveBar .HeroContentBar h1 {
    animation: fadeInUp 0.7s ease-out 0.75s both;
}

.SwipperSlideActiveBar .HeroContentBar p {
    animation: fadeInUp 0.7s ease-out 0.95s both;
}

.SwipperSlideActiveBar .HeroContentBar .HeroContentButton {
    animation: fadeInUp 0.7s ease-out 1.15s both;
}

/* Entering slide (reset position before animate) */
.SwipperSlideEnterRight {
    transform: translateX(-50%) translateX(100%);
    opacity: 0;
}

.SwipperSlideExitLeft {
    transform: translateX(-50%) translateX(-100%);
    opacity: 0;
}

/* ── Pagination ──────────────────────────────────────────── */
.SwipperPagnationBar {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    align-items: center;
}

.SwipperPagnationBullet {
    height: 8px;
    width: 8px;
    background-color: rgba(226,213,184,0.45);
    border: 2px solid rgba(201,168,76,0.3);
    border-radius: 8px;
    transition: width 0.4s ease, background-color 0.4s ease;
    cursor: pointer;
}

.SwipperPagnationBulletActive {
    width: 22px;
    background-color: var(--hero-champagne);
    border-color: var(--hero-champagne);
}

/* ── Nav Buttons ──────────────────────────────────────────
.SwipperButtonNextBar,
.SwipperButtonPreviousBar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 44px;
    background: rgba(26,26,26,0.55);
    border: 0  solid var(--hero-charcoal);
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
    display: flex;
    padding: 26px 26px 26px 26px;
    display: none;
}

.SwipperButtonNextBar     { right: 18px; }
.SwipperButtonPreviousBar { left:  18px; }

.SwipperButtonNextBar::after,
.SwipperButtonPreviousBar::after {
    content: '';
    display: block;
    width: 10px; height: 10px;
    border-top: 2px solid var(--hero-gold);
    border-right: 2px solid var(--hero-gold);
}

.SwipperButtonNextBar::after     { transform: rotate(45deg)  translateX(-2px); }
.SwipperButtonPreviousBar::after { transform: rotate(-135deg) translateX(2px);  }

.SwipperButtonNextBar:hover,
.SwipperButtonPreviousBar:hover {
    background: var(--hero-charcoal);
}
*/

/* ── Keyframe Animations ────────────────────────────────── */

/* Ken Burns — slow zoom with subtle drift */
@keyframes kenBurns {
    from {
        transform: scale(1.08) translate(0px, 0px);
    }
    to {
        transform: scale(1.0) translate(-8px, -4px);
    }
}


/* Individual element fade-up (staggered via animation-delay) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 780px) {
    #HeroBoard  {
                    height: 70vh;
                }

    .HeroSlideItemBar   {
                            width: 98%;
                            bottom: 8px;
                        }

    .HeroContentContainerBar {
        align-items: flex-end;
        padding: 0 26px 46px 26px;
        background: linear-gradient(
            to top,
            rgba(60,10,10,0.95) 0%,
            rgba(100,18,18,0.55) 30%,
            transparent          65%
        );
    }

    .HeroContentBar h1 {
        font-size: 26px;
    }

    .SwipperButtonNextBar,
    .SwipperButtonPreviousBar {
        display: none; /* hide on small screens, swipe only */
    }
}

@media screen and (max-width: 450px)
{
    /* Hero Board */
    #HeroBoard  {
                    height: 65vh;
                }

    .HeroSlideItemBar   {
                            height: 100%;
                            width: 100%;
                            bottom: 0;
                        }

    .HeroContentContainerBar {
        padding: 0 16px 56px 16px;
    }

    .HeroContentBar span {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .HeroContentBar p {
        font-size: 14px;
    }

    .HeroContentButton {
        font-size: 11px;
        padding: 11px 22px;
    }
}