/* wp-content/themes/gtmotor/assets/css/components/hero-banner.css */

.home-hero,
.brand-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Task 3: Widen the homepage hero so featured slides (Ducati etc.) read full-bleed.
   Brand-page hero keeps Bootstrap's default container width. */
.home-hero .container {
    max-width: min(100%, 1680px);
    padding-inline: clamp(16px, 4vw, 64px);
}

.has-hero .home-hero,
.has-explorer .brand-hero {
    margin-top: calc((var(--mast-top-h, 0px) + var(--nav-h, 56px)) * -1);
}

/* Replaces .bg-box */
.gtm-hero-bg {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--mast-top-h, 0px) + var(--nav-h, 56px));
    min-height: 750px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #FAFAFA; /* Fallback */
}

/* Background Pattern + Gradient Mask (Figma Spec) */
.gtm-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.10;
    background: 
        linear-gradient(180deg, rgba(255, 255, 255, 0.00) 82.81%, #FFF 86.59%),
        var(--hero-bg, url('../../../img/back.png')) center / cover no-repeat;
}

.gtm-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; /* Sit on top of the pattern */
    /* Cheat: Start fade earlier (65%) and hit solid white (90%) to kill the edge */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 65%, #FFF 90%);
    pointer-events: none;
}


/* Brand Specific Background Overrides */
.gtm-hero-bg-honda { --hero-bg: url('../../../img/hondaBack.png'); }
.gtm-hero-bg-kawasaki { --hero-bg: url('../../../img/kawasakiBack.jpg'); }
.gtm-hero-bg-ducati { --hero-bg: url('../../../img/ducatiBack.png'); }
.gtm-hero-bg-yamaha { --hero-bg: url('../../../img/yamahaBack.jpg'); }

/* --- Text Layer --- */
.banner-content-zindex {
    position: relative;
    z-index: 10;
    margin-bottom: auto;
}

.bannerInfo {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.hero-outline-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
}

.hero-outline-svg {
    width: min(80vw, 1200px);
    height: auto;
    display: block;
    overflow: visible;
}

/* --- Visuals Layer (Stripes + Bike) --- */
.hero-visuals {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 5;
    margin-top: -80px;
    padding-bottom: 40px; 
}

/* The two coloured bands. They PAINT the shared --stripe-color (declared and
   transitioned on .gtm-hero-carousel), so all slides read the same current colour
   and it cross-fades on slide change. The bike (z-index:3) sits in front of these
   bands (z-index:2) in the same .hero-visuals context, exactly as before. */
.gt-stripes {
    position: absolute;
    left: 0;
    width: 100%;
    height: 104px;
    bottom: 128px;
    z-index: 2;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.gt-stripes::before,
.gt-stripes::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 44px;
    width: 100%;
    /* Paint the shared colour; --stripe-src is only the per-slide source value. */
    background-color: var(--stripe-color, #342E37);
}

.gt-stripes::before { top: 0; }
.gt-stripes::after { bottom: 0; }

/* The colour crossfade lives on the carousel: JS transitions --stripe-color here on
   slide change and every slide's bands (var(--stripe-color)) ease with it. */
.gtm-hero-carousel {
    transition: --stripe-color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Register --stripe-color as an animatable <color> so the transition above
   interpolates the value smoothly where supported. Without @property the value
   still swaps, but the visible crossfade of the bands is driven by the transition
   inherited onto the pseudo-elements below as a belt-and-braces fallback. */
@property --stripe-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #342E37;
}

/* Fallback for engines without @property colour interpolation: transition the
   painted background-color on the bands themselves so the swap still eases. */
.gt-stripes::before,
.gt-stripes::after {
    transition: background-color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Brand-theme colour defaults recorded as the per-slide SOURCE (--stripe-src) so JS
   can read a slide's intended colour even when no explicit inline colour was set. */
.gtm-hero-bg-ducati .gt-stripes { --stripe-src: var(--brand-ducati, #CB1517); }
.gtm-hero-bg-honda .gt-stripes { --stripe-src: var(--brand-honda, #CC0000); }
.gtm-hero-bg-kawasaki .gt-stripes { --stripe-src: var(--brand-kawasaki, #5BB715); }
.gtm-hero-bg-yamaha .gt-stripes { --stripe-src: var(--brand-yamaha, #001489); }

.hero-bike-img {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 768px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Buttons --- */
.buttonSection.align-button-center {
    width: 209px;
    min-width: 209px;
    margin: 0 auto;
}

/* Button Colors */
.gtm-hero-btn {
    background: #FFC424 !important;
    color: #342E37 !important;
    border: none;
    transition: box-shadow 0.2s ease;
}
.gtm-hero-btn:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.gtm-hero-bg-ducati .gtm-hero-btn { background: var(--brand-ducati, #CB1517) !important; color: #fff !important; }
.gtm-hero-bg-honda .gtm-hero-btn { background: var(--brand-honda, #CC0000) !important; color: #fff !important; }
.gtm-hero-bg-kawasaki .gtm-hero-btn { background: var(--brand-kawasaki, #5BB715) !important; color: #fff !important; }
.gtm-hero-bg-yamaha .gtm-hero-btn { background: var(--brand-yamaha, #001489) !important; color: #fff !important; }


/* --- Responsive --- */
@media (max-width: 991px) {
    .gtm-hero-bg { min-height: 600px; }
    
    .gt-stripes {
        bottom: 80px;
        height: 80px;
    }
    .gt-stripes::before, .gt-stripes::after { height: 34px; }
    
    .hero-bike-img { max-width: 600px; }
}

@media (max-width: 575px) {
    .gtm-hero-bg { min-height: 550px; }
    .hero-visuals { padding-bottom: 20px; }

    .gt-stripes {
        bottom: 60px;
        height: 60px;
    }
    .gt-stripes::before, .gt-stripes::after { height: 26px; }

    .hero-bike-img {
        max-width: 100%;
        padding: 0 16px;
    }

    .bannerInfo { margin-top: 24px; }
}

/* --- Mobile hero title legibility (Task: hero text too small on phones) ---
   The big title is the scalable outline SVG. It was capped at 80vw, which on a
   ~390px phone rendered the wordmark far too small. Give it more of the viewport
   on small screens so it reads as the hero headline, and size the kicker (h5)
   deliberately instead of leaning on the Bootstrap default. */
@media (max-width: 991px) {
    .hero-outline-svg { width: min(88vw, 1200px); }
    .bannerInfo h5 { font-size: 1.125rem; }
}

@media (max-width: 575px) {
    /* Fill nearly the full width on phones; the SVG scales, so it never overflows. */
    .hero-outline-svg { width: min(92vw, 1200px); }
    .hero-outline-wrap { margin-bottom: 16px; }
    .bannerInfo { gap: 12px; }
    .bannerInfo h5 { font-size: 1.0625rem; letter-spacing: 0.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .carousel, .carousel * { transition-duration: .01ms !important; }
}

/* --- Hero Navigation Controls --- */

/* 1. The Wrapper Layer */
/* Sits on top of everything, ignores clicks itself so you can click the slide buttons */
.gtm-hero-nav-layer {
    position: absolute;
    inset: 0;
    z-index: 20; /* Above text (z-10) and visuals (z-5) */
    pointer-events: none; 
}

/* 2. The Button Styles */
.gtm-hero-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto; /* Re-enable clicks for the buttons */
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gtm-hero-control.prev { left: 0; }
.gtm-hero-control.next { right: 0; }

.gtm-hero-control:hover {
    transform: translateY(-50%) scale(1.1);
}

/* 3. The Icons (SVG) */
.hero-chevron {
    display: block;
    width: 48px; /* Size adjust */
    height: 48px;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25)); /* Extra depth */
}

/* 4. Invisible Hit Area Box */
/* Expands the clickable area without changing the visual layout */
.gtm-hero-control .hit-area {
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    background: transparent;
    z-index: -1;
}

/* --- Visibility Logic --- */

/* Desktop/Tablet (Landscape): Hide by default, show on Hover */
@media (min-width: 768px) {
    .gtm-hero-control {
        opacity: 0;
    }

    /* When hovering the main carousel wrapper */
    .carousel:hover .gtm-hero-control {
        opacity: 1;
    }

    /* Optional: Push them slightly outside the container on very large screens if desired?
       For now, kept flush with container edges per request. */
}

/* Mobile: Always Visible */
@media (max-width: 767.98px) {
    .gtm-hero-control {
        opacity: 1;
    }
    
    .hero-chevron {
        width: 32px; /* Smaller on mobile */
        height: 32px;
    }
    
    /* Pull them in slightly from the absolute edge of screen if container padding is tight */
    .gtm-hero-control.prev { left: 16px; }
    .gtm-hero-control.next { right: 16px; }
}

/* --- Hero Animations --- */

/* Entrance keyframes for the initial active slide + text. */
@keyframes gtmSlideInRight {
    0%   { opacity: 0; transform: translateX(60px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Cinematic bike zoom-ins: start smaller + offset to one side, settle to
   scale(1) centred. Incoming NEXT enters from the right; incoming PREV from left. */
@keyframes gtmBikeZoomInFromRight {
    0%   { opacity: 0; transform: translateX(14%) scale(0.72); }
    100% { opacity: 1; transform: translateX(0)   scale(1); }
}
@keyframes gtmBikeZoomInFromLeft {
    0%   { opacity: 0; transform: translateX(-14%) scale(0.72); }
    100% { opacity: 1; transform: translateX(0)    scale(1); }
}

/* Cinematic bike zoom-outs: outgoing bike leaves the OTHER side. Going NEXT it
   leaves left; going PREV it leaves right. */
@keyframes gtmBikeZoomOutToLeft {
    0%   { opacity: 1; transform: translateX(0)    scale(1); }
    100% { opacity: 0; transform: translateX(-16%) scale(1.14); }
}
@keyframes gtmBikeZoomOutToRight {
    0%   { opacity: 1; transform: translateX(0)   scale(1); }
    100% { opacity: 0; transform: translateX(16%) scale(1.14); }
}

.hero-bike-img { will-change: transform, opacity; }

/* Initial hidden state so nothing flashes before its animation runs. */
.carousel-item .bannerInfo,
.carousel-item .hero-bike-img {
    opacity: 0;
}

/* Active slide entrance (text + default from-right bike zoom). */
.carousel-item.active .bannerInfo {
    animation: gtmSlideInRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.2s;
}
.carousel-item.active .hero-bike-img {
    animation: gtmBikeZoomInFromRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s;
}

/* Direction-aware bike motion, driven by the classes Bootstrap toggles mid-slide:
     NEXT -> incoming = .carousel-item-next.carousel-item-start; outgoing = .active.carousel-item-start
     PREV -> incoming = .carousel-item-prev.carousel-item-end;   outgoing = .active.carousel-item-end */

/* Incoming bike zooms in from the correct side. */
.carousel-item-next.carousel-item-start .hero-bike-img {
    animation: gtmBikeZoomInFromRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0s;
}
.carousel-item-prev.carousel-item-end .hero-bike-img {
    animation: gtmBikeZoomInFromLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0s;
}

/* Outgoing bike zooms out to the OTHER side. */
.carousel-item.active.carousel-item-start .hero-bike-img {
    animation: gtmBikeZoomOutToLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0s;
}
.carousel-item.active.carousel-item-end .hero-bike-img {
    animation: gtmBikeZoomOutToRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0s;
}

/* Text/CTA leaves cleanly with the slide (simple directional fade). */
@keyframes gtmExitToLeft {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-100px); }
}
@keyframes gtmExitToRight {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100px); }
}
.carousel-item.active.carousel-item-start .bannerInfo {
    animation: gtmExitToLeft 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    animation-delay: 0s;
}
.carousel-item.active.carousel-item-end .bannerInfo {
    animation: gtmExitToRight 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    animation-delay: 0s;
}

/* Smooth background cross-fade between slide photos (unchanged). */
.carousel-fade .carousel-item {
    transition-duration: 0.8s;
    transition-property: opacity;
}

/* --- Reduced motion: drop the zoom + colour crossfade; slides just fade. --- */
@media (prefers-reduced-motion: reduce) {
    .carousel-item .bannerInfo,
    .carousel-item .hero-bike-img {
        opacity: 1;
    }
    .carousel-item.active .bannerInfo,
    .carousel-item.active .hero-bike-img,
    .carousel-item-next.carousel-item-start .hero-bike-img,
    .carousel-item-prev.carousel-item-end .hero-bike-img,
    .carousel-item.active.carousel-item-start .hero-bike-img,
    .carousel-item.active.carousel-item-end .hero-bike-img,
    .carousel-item.active.carousel-item-start .bannerInfo,
    .carousel-item.active.carousel-item-end .bannerInfo {
        animation: none !important;
        transform: none !important;
    }
    /* No colour animation: bands snap to the new colour. */
    .gtm-hero-carousel,
    .gt-stripes::before,
    .gt-stripes::after {
        transition: none !important;
    }
}