/* ==========================================================================
   NACS Show 2026 - Hero A Component (3D Curved Marquee)
   Tokens: NACSShow2026Tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero A Container
   -------------------------------------------------------------------------- */
.hero-a {
    background-color: var(--nacs-color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: var(--nacs-spacing-xxl);
    padding-bottom: 146px;
    position: relative;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Event Info Section (Desktop Only)
   -------------------------------------------------------------------------- */
.hero-a__event-info {
    display: flex;
    gap: 57px;
    align-items: center;
    justify-content: center;
    margin-bottom: -90px;
    position: relative;
    z-index: 2;
}

.hero-a__logo {
    width: 357px;
    height: 178px;
}

.hero-a__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-a__event-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 418px;
}

.hero-a__event-row {
    display: flex;
    gap: var(--nacs-spacing-md);
    align-items: center;
}

.hero-a__event-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-a__event-icon i {
    font-size: 20px;
    color: var(--nacs-color-green-light);
}

.hero-a__event-text {
    font-family: var(--nacs-font-gotham);
    font-size: 20px;
    line-height: 28px;
    background: linear-gradient(to bottom, var(--nacs-color-dark-navy), var(--nacs-color-black));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-a__event-text--bold {
    font-family: var(--nacs-font-work-sans);
    font-weight: 700;
}

/* Figma: the Location row uses Work Sans for both "Las Vegas" (Bold)
   and " Convention Center" (Regular), not Gotham like the other rows. */
.hero-a__event-text--book {
    font-family: var(--nacs-font-work-sans);
    font-weight: 400;
}

.hero-a__event-label {
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
}

.hero-a__event-value {
    font-family: var(--nacs-font-work-sans);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Carousel Container
   -------------------------------------------------------------------------- */
.hero-a__carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 120px;
    margin-bottom: -90px;
    position: relative;
}

/* --------------------------------------------------------------------------
   Pagination Arrows (Desktop)
   Figma: yellow pill buttons centered vertically on the curved slider
   (#FAE100, 48x40, rounded full, 24px horizontal padding).
   -------------------------------------------------------------------------- */
.hero-a__nav {
    position: absolute;
    /* Figma places the arrows at top: 270px within the 543px slider,
       which is just above vertical-center. */
    top: 271px;
    width: 48px;
    height: 40px;
    padding: 0 var(--nacs-spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nacs-color-yellow);
    color: var(--nacs-color-navy);
    border: none;
    border-radius: 360px;
    cursor: pointer;
    z-index: 3;
    transform: translateY(-50%);
}

.hero-a__nav i {
    font-size: 20px;
    line-height: 1;
}

.hero-a__nav--prev {
    left: 5.49%;
}

.hero-a__nav--next {
    right: 5.49%;
}

.hero-a__nav:hover,
.hero-a__nav:focus-visible {
    filter: brightness(0.95);
    outline: none;
}

/* --------------------------------------------------------------------------
   Progress Bar (mobile only, per Figma)
   8 segments (1 per slide): inactive dots + 1 wider lime active pill.
   Hidden on desktop by default; mobile media query un-hides it.
   -------------------------------------------------------------------------- */
.hero-a__progress {
    display: none;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.hero-a__progress-segment {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background-color: var(--nacs-color-grey);
    transition: width 250ms ease, background-color 250ms ease;
    flex-shrink: 0;
    display: inline-block;
}

.hero-a__progress-segment.is-active {
    width: 45px;
    background-color: var(--nacs-color-lime);
}

/* --------------------------------------------------------------------------
   3D Curved Marquee
   - The container provides the perspective viewer; slides are absolutely
     positioned and re-transformed every animation frame by JS.
   - No parent transform chain, so per-slide rotateY/translateZ compose
     cleanly against the shared perspective.
   -------------------------------------------------------------------------- */
.hero-a__marquee {
    position: relative;
    width: 100%;
    height: 543px;
    margin-bottom: -120px;
    overflow: hidden;
    /* Lower number = closer camera = more dramatic depth recession.
       900px pairs with the JS RADIUS=900 cylinder so the arc reads as a
       proper concave bowl instead of a flat fan. */
    perspective: 900px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

/* Desktop slide dimensions — wide cinematic frame so the curve has body */
.hero-a__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 460px;
    height: 320px;
    overflow: hidden;
    border-radius: 4px;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    will-change: transform, opacity;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
}

.hero-a__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   Countdown Timer (Desktop)
   -------------------------------------------------------------------------- */
.hero-a__countdown {
    display: flex;
    gap: var(--nacs-spacing-xxxl);
    align-items: flex-end;
    justify-content: center;
    /* Nudge the countdown up slightly so it sits closer to the curved slider
       per Figma spacing. Paired with margin-bottom: -120px for the bowl tuck. */
    margin-top: -40px;
    margin-bottom: -120px;
    position: relative;
    z-index: 2;
}

.hero-a__countdown-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
}

.hero-a__countdown-value {
    font-family: var(--nacs-font-work-sans);
    font-weight: 400;
    font-size: 98px;
    line-height: 1;
}

/* Desktop countdown colors per Figma */
.hero-a__countdown-value--days {
    color: var(--nacs-color-navy);
    width: 165px;
}

.hero-a__countdown-value--hours {
    color: var(--nacs-color-navy);
    width: 165px;
}

.hero-a__countdown-value--minutes {
    color: var(--nacs-color-teal);
    width: 121px;
}

.hero-a__countdown-label {
    font-family: var(--nacs-font-gotham);
    font-weight: 400;
    font-size: 20px;
    color: var(--nacs-color-navy);
    text-transform: uppercase;
    height: 24px;
}

/* --------------------------------------------------------------------------
   Seconds Rolling Animation
   -------------------------------------------------------------------------- */
.hero-a__seconds-container {
    position: relative;
    width: 106px;
    height: 115px;
    overflow: hidden;
}

.hero-a__seconds-prev,
.hero-a__seconds-current,
.hero-a__seconds-next {
    display: block;
    font-family: var(--nacs-font-work-sans);
    font-weight: 400;
    font-size: 98px;
    color: var(--nacs-color-green);
    line-height: 1;
    text-align: left;
    width: 100%;
}

.hero-a__seconds-prev {
    position: absolute;
    top: -80px;
    left: 0;
    opacity: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,1) 85%);
    mask-image: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,1) 85%);
}

.hero-a__seconds-next {
    position: absolute;
    bottom: -80px;
    left: 0;
    opacity: 0;
    -webkit-mask-image: linear-gradient(to top, transparent 20%, rgba(0,0,0,1) 85%);
    mask-image: linear-gradient(to top, transparent 20%, rgba(0,0,0,1) 85%);
}

.hero-a__seconds-current {
    position: relative;
}

@keyframes heroSecondsRollPrev {
    0% { opacity: 0.6; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
}

@keyframes heroSecondsRollCurrent {
    0% { transform: translateY(20px); opacity: 0.5; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes heroSecondsRollNext {
    0% { opacity: 0; transform: translateY(30px); }
    50% { opacity: 0.5; }
    100% { opacity: 0.3; transform: translateY(0); }
}

.hero-a__seconds-animate .hero-a__seconds-prev {
    animation: heroSecondsRollPrev 1s ease-in-out forwards;
}

.hero-a__seconds-animate .hero-a__seconds-current {
    animation: heroSecondsRollCurrent 1s ease-in-out forwards;
}

.hero-a__seconds-animate .hero-a__seconds-next {
    animation: heroSecondsRollNext 1s ease-in-out forwards;
}

/* --------------------------------------------------------------------------
   Mobile Styles
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .hero-a {
        padding-top: 0;
        padding-bottom: 40px;
        gap: 4px;
    }

    /* Hide desktop-only elements */
    .hero-a__event-info {
        display: none;
    }

    /* Figma mobile uses a progress bar instead of side arrows. */
    .hero-a__nav {
        display: none;
    }

    /* Carousel adjustments: py-24 only so the slider spans full width
       and the peek images can extend past the viewport like Figma. */
    .hero-a__carousel-container {
        padding: var(--nacs-spacing-lg) 0;
        margin-bottom: 0;
        gap: var(--nacs-spacing-lg);
    }

    /* Figma: mobile image container is 420px tall. The inline style on
       .curved-image-slider defaults to 543px, so we need !important. */
    .hero-a__curved-slider {
        height: 420px !important;
    }

    /* Show the progress bar on mobile */
    .hero-a__progress {
        display: flex;
    }

    /* Hide the Three.js desktop slider on mobile and show the peek carousel */
    .hero-a__desktop-slider {
        display: none !important;
    }

    .hero-a__mobile-slider {
        display: block;
    }

    /* Countdown - mobile (Figma node 9494-101437):
       4 columns (Days/Hours/Minutes/Seconds) evenly distributed across the
       section, Work Sans numerals in lime/green-light/green, navy uppercase
       labels. */
    .hero-a__countdown {
        gap: 0;
        margin-top: 0;
        margin-bottom: 0;
        align-items: flex-start;
        justify-content: space-around;
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .hero-a__countdown-item {
        display: flex;
        gap: 8px;
        flex: 1 1 0;
        min-width: 0;
    }

    .hero-a__countdown-value {
        font-family: var(--nacs-font-work-sans);
        font-weight: 400;
        font-size: 48px;
        line-height: 1;
        text-align: center;
    }

    .hero-a__countdown-value--days {
        color: var(--nacs-color-lime);
        width: auto;
    }

    .hero-a__countdown-value--hours {
        color: var(--nacs-color-lime);
        width: auto;
    }

    .hero-a__countdown-value--minutes {
        color: var(--nacs-color-green-light);
        width: auto;
    }

    .hero-a__countdown-label {
        font-family: var(--nacs-font-gotham);
        font-weight: 400;
        font-size: 13px;
        line-height: 1.4;
        letter-spacing: 1px;
        color: var(--nacs-color-navy);
        text-transform: uppercase;
        text-align: center;
        height: auto;
    }

    .hero-a__seconds-container {
        width: 52px;
        height: 52px;
        margin: 0 auto;
        overflow: hidden;
    }

    .hero-a__seconds-prev,
    .hero-a__seconds-current,
    .hero-a__seconds-next {
        font-family: var(--nacs-font-work-sans);
        font-weight: 400;
        font-size: 48px;
        color: var(--nacs-color-green);
        text-align: center;
    }

    .hero-a__seconds-prev {
        top: -44px;
    }

    .hero-a__seconds-next {
        bottom: -44px;
    }
}

@media screen and (max-width: 480px) {
    .hero-a__countdown {
        padding: 0 12px;
    }

    .hero-a__countdown-value {
        font-size: 38px;
    }

    .hero-a__countdown-label {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .hero-a__seconds-container {
        width: 42px;
        height: 42px;
    }

    .hero-a__seconds-prev,
    .hero-a__seconds-current,
    .hero-a__seconds-next {
        font-size: 38px;
    }

    .hero-a__seconds-prev {
        top: -36px;
    }

    .hero-a__seconds-next {
        bottom: -36px;
    }
}

/* ==========================================================================
   Mobile Peek Carousel (Figma node 9494-101437)
   Hidden on desktop; shown only at <= 768px.
   Per Figma:
   - Container is 420px tall.
   - Center slide: 330 x 420 (aspect 11:14), full height.
   - Side peek slides: 288 x 328, vertically centered (top: 46).
   - Scaling 328/420 = 0.781, so siblings render at scale(0.78).
   - Side images stay fully opaque (no dimming in Figma).
   ========================================================================== */
.hero-a__mobile-slider {
    width: 100%;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

/* Hide the mobile peek carousel on desktop (kept here, AFTER the mobile
   media query above, so source order doesn't accidentally win against
   the mobile rule). */
@media screen and (min-width: 769px) {
    .hero-a__mobile-slider {
        display: none;
    }
}

.hero-a__mobile-track {
    display: flex;
    align-items: center; /* keeps scaled-down peeks vertically centered */
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* Side padding = (100vw - center slide width) / 2, so the first/last
       slide can scroll-snap to the viewport center. Center slide is 84vw. */
    padding: 0 8vw;
    box-sizing: border-box;
}

.hero-a__mobile-track::-webkit-scrollbar {
    display: none;
}

.hero-a__mobile-slide {
    /* 84vw at 393px viewport = 330px, matching Figma. Capped so it never
       outgrows the 330px Figma value on slightly larger phones. */
    flex: 0 0 min(84vw, 330px);
    aspect-ratio: 330 / 420;
    border-radius: 4px; /* Figma uses rounded-[4px] */
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: scale(0.78);
    transform-origin: center center;
    transition: transform 0.35s ease;
    background-color: #f1f1f1;
}

.hero-a__mobile-slide.is-centered {
    transform: scale(1);
}

.hero-a__mobile-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}