/* =========================================
   ASMC HOMEPAGE — PHASE 5C
   SPEAKERS + FINAL CTA
========================================= */


/* =========================================
   1. SPEAKERS SECTION
========================================= */

.home-speakers {
    position: relative;

    z-index: 5;

    /*
        Reduced from the previous very large
        6rem–10rem spacing.
    */

    padding-top:
        clamp(
            4.25rem,
            6vw,
            6rem
        );

    padding-bottom:
        clamp(
            4.5rem,
            7vw,
            6.5rem
        );

    overflow: hidden;

    background:
        var(--color-white);
}



/* =========================================
   2. SPEAKERS INTRO
========================================= */

.speakers-heading-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );

    align-items: end;

    margin-bottom:
        clamp(
            2.5rem,
            4vw,
            3.75rem
        );
}



/*
    Make "Conference Speakers" considerably
    more visible than the normal section kicker.
*/

.home-speakers
.home-section-kicker {
    font-size:
        clamp(
            1.15rem,
            1.5vw,
            1.4rem
        );

    letter-spacing:
        0.075em;

    margin-bottom:
        1.1rem;
}


.speakers-summary {
    max-width: 470px;

    margin: 0;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1.1rem,
            1.45vw,
            1.3rem
        );

    line-height: 1.7;

    color:
        var(--color-text-secondary);
}



/* =========================================
   3. SPEAKER CAROUSEL
========================================= */

.speaker-carousel {
    position: relative;
}



/* =========================================
   4. SPEAKER CONTROLS
========================================= */

.speaker-controls {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    margin-bottom:
        1.25rem;

    padding-top:
        1.25rem;

    border-top:
        2px solid
        var(--color-violet);
}


.speaker-counter {
    margin: 0;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.15rem,
            1.6vw,
            1.4rem
        );

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        -0.02em;

    color:
        var(--color-violet);
}


.speaker-control-buttons {
    display: flex;

    gap: 0.75rem;
}


.speaker-control {
    width: 50px;
    height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.22
        );

    border-radius: 50%;

    background:
        var(--color-white);

    color:
        var(--color-violet);

    font-size: 1.35rem;

    cursor: pointer;

    transition:
        color
        var(--motion-fast)
        ease,

        background-color
        var(--motion-fast)
        ease,

        border-color
        var(--motion-fast)
        ease,

        transform
        var(--motion-base)
        var(--ease-standard);
}


.speaker-control:hover {
    transform:
        translateY(-2px);

    background:
        var(--color-violet);

    border-color:
        var(--color-violet);

    color:
        var(--color-white);
}



/* =========================================
   5. SPEAKER VIEWPORT
========================================= */

.speaker-viewport {
    position: relative;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    padding:
        0.7rem
        0
        1.5rem;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    scrollbar-width:
        none;

    perspective:
        1200px;
}


.speaker-viewport::-webkit-scrollbar {
    display: none;
}



/* =========================================
   6. SPEAKER TRACK
========================================= */

.speaker-track {
    display: flex;

    gap:
        clamp(
            1rem,
            2vw,
            1.6rem
        );

    width: max-content;
}



/* =========================================
   7. SPEAKER CARD
========================================= */

.speaker-card {
    width:
        clamp(
            280px,
            27vw,
            365px
        );

    /*
        Reduced from 570px.
    */

    min-height: 485px;

    flex: 0 0 auto;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    scroll-snap-align: start;

    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.13
        );

    border-radius: 28px;

    background:
        var(--color-warm-white);

    transform:
        perspective(1000px)
        rotateY(-1.5deg)
        scale(0.985);

    transform-origin:
        center;

    transition:
        transform
        450ms
        var(--ease-standard),

        border-color
        var(--motion-base)
        ease,

        box-shadow
        var(--motion-base)
        ease;
}


.speaker-card:hover {
    transform:
        perspective(1000px)
        rotateY(0deg)
        translateY(-6px)
        scale(1);

    border-color:
        rgba(
            102,
            46,
            147,
            0.28
        );

    box-shadow:
        0 20px 55px
        rgba(
            33,
            22,
            39,
            0.10
        );
}



/* =========================================
   8. KEY SPEAKER
========================================= */

.speaker-card-key {
    border-color:
        rgba(
            247,
            148,
            29,
            0.45
        );
}



/* =========================================
   9. SPEAKER PHOTO PLACEHOLDER
========================================= */

.speaker-portrait {
    position: relative;

    /*
        Reduced from 310px so the full
        speaker section fits on screen
        more comfortably.
    */

    min-height: 245px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(
                247,
                148,
                29,
                0.30
            ),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            var(--color-violet),
            #351747
        );
}


.speaker-portrait::before {
    content: "";

    position: absolute;

    width: 200px;

    aspect-ratio: 1;

    top: -85px;

    left: -55px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );
}


.speaker-portrait::after {
    content: "";

    position: absolute;

    width: 140px;

    aspect-ratio: 1;

    right: -35px;

    bottom: -50px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );
}


.speaker-portrait span {
    position: relative;

    z-index: 2;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            4rem,
            6vw,
            6rem
        );

    font-weight:
        var(--fw-bold);

    line-height: 1;

    letter-spacing:
        -0.07em;

    color:
        rgba(
            255,
            255,
            255,
            0.90
        );
}



/* =========================================
   10. SPEAKER INFORMATION
========================================= */

/*
    Everything underneath the image is now
    centered rather than left aligned.
*/

.speaker-card-content {
    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding:
        clamp(
            1.4rem,
            2vw,
            1.8rem
        );

    text-align: center;
}


.speaker-type {
    display: inline-block;

    margin-bottom: 1.05rem;

    padding:
        0.45rem
        0.75rem;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-violet-soft);

    font-family:
        var(--font-display);

    font-size: 0.74rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--color-violet);
}


.speaker-type-key {
    background:
        var(--color-orange-soft);

    color:
        #B76000;
}


.speaker-card h3 {
    max-width: 290px;

    margin:
        0
        auto
        0.7rem;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1.5rem,
            1.9vw,
            1.9rem
        );

    font-weight:
        var(--fw-semibold);

    line-height: 1.08;

    letter-spacing:
        -0.035em;

    text-align: center;

    color:
        var(--color-ink);
}


.speaker-card-content p {
    max-width: 300px;

    margin:
        0
        auto;

    font-family:
        var(--font-body);

    font-size:
        0.98rem;

    line-height: 1.5;

    text-align: center;

    color:
        var(--color-text-secondary);
}



/* =========================================
   11. SWIPE HINT
========================================= */

.speaker-swipe-hint {
    width: fit-content;

    margin:
        0.5rem
        auto
        0;

    padding:
        0.8rem
        1.25rem;

    border:
        1px solid
        rgba(
            102,
            46,
            147,
            0.18
        );

    border-radius:
        var(--radius-pill);

    background:
        var(--color-violet-soft);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.15rem
        );

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        -0.015em;

    color:
        var(--color-violet);

    text-align: center;
}



/* =========================================
   12. FINAL CTA
========================================= */

/*
    CTA = Call to Action.

    This section now uses an unmistakable
    vertical ASMC gradient so it visually
    separates itself from the dark footer.
*/

.home-final-cta {
    position: relative;

    z-index: 5;

    overflow: hidden;

    padding-top:
        clamp(
            4.5rem,
            6.5vw,
            6rem
        );

    padding-bottom:
        clamp(
            5rem,
            7.5vw,
            7rem
        );

    background:

        linear-gradient(
            180deg,
            rgba(25, 12, 31, 0.04) 0%,
            rgba(25, 12, 31, 0.18) 100%
        ),

        linear-gradient(
            180deg,
            #3A1C4A 0%,
            var(--color-violet) 38%,
            var(--color-magenta) 70%,
            var(--color-orange) 115%
        );

    color:
        var(--color-white);
}



/* =========================================
   13. CTA CONTENT
========================================= */

.final-cta-inner {
    position: relative;

    z-index: 2;

    max-width: 1120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}



/* =========================================
   14. CTA TITLE
========================================= */

.final-cta-title {
    max-width: 1050px;

    margin:
        0
        auto;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            3rem,
            6vw,
            6.6rem
        );

    font-weight:
        var(--fw-bold);

    line-height: 0.96;

    letter-spacing:
        -0.055em;

    color:
        var(--color-white);
}



/* =========================================
   15. CTA EVENT DETAILS
========================================= */

.final-cta-details {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap:
        1.2rem
        2rem;

    margin-top:
        clamp(
            2rem,
            3.5vw,
            2.75rem
        );
}



/* =========================================
   16. CTA DETAIL ITEM
========================================= */

.final-cta-detail-item {
    display: inline-flex;

    align-items: center;

    gap: 0.8rem;

    font-family:
        var(--font-body);

    font-size:
        clamp(
            1rem,
            1.35vw,
            1.18rem
        );

    font-weight:
        var(--fw-medium);

    line-height: 1.4;

    color:
        rgba(
            255,
            255,
            255,
            0.90
        );
}



/* =========================================
   17. CTA DETAIL ICONS
========================================= */

.final-cta-icon {
    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-radius: 50%;

    background:
        rgba(
            26,
            12,
            31,
            0.16
        );

    color:
        var(--color-white);
}


.final-cta-icon svg {
    width: 21px;

    height: 21px;

    display: block;
}



/* =========================================
   18. CTA BUTTONS
========================================= */

.final-cta-actions {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 1rem;

    margin-top:
        clamp(
            2.25rem,
            4vw,
            3.25rem
        );
}


.final-cta-primary,
.final-cta-secondary {
    min-width: 230px;

    min-height: 54px;
}


.final-cta-primary {
    background:
        var(--color-orange);

    border-color:
        var(--color-orange);

    color:
        var(--color-ink);
}


.final-cta-primary:hover {
    background:
        var(--color-white);

    border-color:
        var(--color-white);

    color:
        var(--color-ink);
}


.final-cta-secondary {
    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    color:
        var(--color-white);
}


.final-cta-secondary:hover {
    background:
        var(--color-white);

    border-color:
        var(--color-white);

    color:
        var(--color-ink);
}



/* =========================================
   19. VIEWPORT REVEAL
========================================= */

[data-home-reveal].is-reveal-ready {
    opacity: 0;

    transform:
        translateY(34px);
}


[data-home-reveal].is-reveal-ready.is-visible {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        850ms
        var(--ease-standard),

        transform
        900ms
        var(--ease-emphasized);
}



/* =========================================
   20. TABLET
========================================= */

@media (max-width: 900px) {

    .speakers-heading-row {
        grid-template-columns:
            1fr;

        gap: 1.75rem;
    }


    .speakers-summary {
        max-width: 680px;
    }


    .speaker-card {
        width:
            clamp(
                285px,
                46vw,
                350px
            );

        min-height: 470px;
    }


    .speaker-portrait {
        min-height: 235px;
    }


    .final-cta-title {
        font-size:
            clamp(
                3rem,
                9vw,
                5.5rem
            );
    }


    .final-cta-details {
        max-width: 720px;
    }

}



/* =========================================
   21. MOBILE
========================================= */

@media (max-width: 768px) {

    .home-speakers {
        padding-top: 4rem;

        padding-bottom: 4.5rem;
    }


    .speaker-controls {
        margin-bottom: 0.8rem;
    }


    .speaker-control {
        width: 46px;

        height: 46px;
    }


    .speaker-card {
        width:
            min(
                82vw,
                330px
            );

        min-height: 455px;
    }


    .speaker-portrait {
        min-height: 225px;
    }


    .home-final-cta {
        padding-top: 4.25rem;

        padding-bottom: 5rem;
    }


    .final-cta-details {
        flex-direction: column;

        align-items: center;

        gap: 1rem;
    }


    .final-cta-detail-item {
        width: fit-content;

        justify-content: flex-start;
    }


    .final-cta-actions {
        width: 100%;

        flex-direction: column;
    }


    .final-cta-primary,
    .final-cta-secondary {
        width: 100%;
    }

}



/* =========================================
   22. SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .speaker-card {
        width:
            min(
                86vw,
                315px
            );

        min-height: 440px;

        border-radius: 22px;
    }


    .speaker-portrait {
        min-height: 210px;
    }


    .speaker-card-content {
        padding: 1.3rem;
    }


    .speaker-swipe-hint {
        width: 100%;

        font-size: 1rem;
    }


    .final-cta-title {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            );
    }


    .final-cta-detail-item {
        font-size: 1rem;
    }


    .final-cta-icon {
        width: 40px;

        height: 40px;

        flex-basis: 40px;
    }

}



/* =========================================
   23. REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .speaker-viewport {
        scroll-behavior: auto;
    }


    .speaker-card,
    .speaker-control,
    [data-home-reveal] {
        transition: none;
    }


    .speaker-card {
        transform: none;
    }


    [data-home-reveal].is-reveal-ready {
        opacity: 1;

        transform: none;
    }

}