/* ============================================================
   ASMC
   PHASE 9D
   REGISTRATION MOTION SUPPORT
============================================================ */


/* ============================================================
   PERFORMANCE
============================================================ */

.reg8a-card,
.reg8b-package-card,
.reg8b-form-panel,
.reg8b-field,
.reg8c-package-card,
.reg8c-payment-card,
.reg8c-form-card,
.reg8c-field {
    will-change:
        transform,
        opacity;
}



/* ============================================================
   ARROWS
============================================================ */

.reg8a-button span,
.reg8b-submit span,
.reg8c-submit span {
    display:
        inline-block;

    transition:
        transform
        280ms
        ease;
}


@media (hover: hover) and (pointer: fine) {

    .reg8a-button:hover span,
    .reg8b-submit:hover span,
    .reg8c-submit:hover span {
        transform:
            translate(
                4px,
                -4px
            );
    }

}



/* ============================================================
   GATEWAY CARDS
============================================================ */

.reg8a-card-grid {
    perspective:
        1200px;
}


.reg8a-card {
    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;
}


.reg8a-card-number {
    display:
        inline-block;

    transform-origin:
        center center;
}



/* ============================================================
   PARTICIPANT HERO

   Mirrors the STRUCTURE of the Exhibitor hero:

   LEFT
   Back link
   Kicker
   Large title

   RIGHT
   Intro paragraph
   Dates
   Venue
============================================================ */

.participant-registration-page
.reg8b-intro {
    padding-top:
        clamp(
            2.5rem,
            5vw,
            4rem
        );

    padding-bottom:
        clamp(
            2.5rem,
            5vw,
            4rem
        );
}



/* ------------------------------------------------------------
   LARGE ROUNDED CONTAINER
------------------------------------------------------------ */

.participant-registration-page
.reg8b-intro-card {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(300px, 0.95fr);

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

    align-items:
        center;

    min-height:
        385px;

    padding:
        clamp(
            2.75rem,
            4.8vw,
            4rem
        );

    overflow:
        hidden;

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

    border-radius:
        clamp(
            2rem,
            3vw,
            2.6rem
        );

    background:
        linear-gradient(
            135deg,
            #F0EAF4 0%,
            #F4E9F4 100%
        );

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



/* ------------------------------------------------------------
   SUBTLE CIRCULAR DETAIL

   Mirrors the quiet circular detail in the Exhibitor hero,
   while staying within the Participant colour treatment.
------------------------------------------------------------ */

.participant-registration-page
.reg8b-intro-card::after {
    content:
        "";

    position:
        absolute;

    top:
        -175px;

    right:
        -120px;

    width:
        340px;

    height:
        340px;

    border:
        1px solid
        rgba(
            247,
            148,
            29,
            0.22
        );

    border-radius:
        50%;

    pointer-events:
        none;
}



/* ------------------------------------------------------------
   LEFT SIDE
------------------------------------------------------------ */

.participant-registration-page
.reg8b-intro-copy {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}



/* Give the back link room exactly like the Exhibitor hero */

.participant-registration-page
.reg8b-back {
    margin-bottom:
        clamp(
            1.75rem,
            3vw,
            2.6rem
        );
}



/* Kicker to title spacing */

.participant-registration-page
.reg8b-kicker {
    margin-bottom:
        1rem;
}



/* Large title treatment */

.participant-registration-page
.reg8b-intro-copy h1 {
    max-width:
        620px;

    margin:
        0;

    font-size:
        clamp(
            3.6rem,
            6.2vw,
            6.3rem
        );

    line-height:
        0.92;

    letter-spacing:
        -0.055em;
}



/* Keep second line visually separated */

.participant-registration-page
.reg8b-intro-copy h1 span {
    display:
        block;
}



/* ------------------------------------------------------------
   RIGHT SIDE
------------------------------------------------------------ */

.participant-registration-page
.reg8b-intro-side {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;
}



/* Intro paragraph now sits above Dates/Venue,
   matching the Exhibitor composition */

.participant-registration-page
.reg8b-intro-text {
    width:
        100%;

    max-width:
        430px;

    margin:
        0;

    padding-bottom:
        1.75rem;

    border-bottom:
        1px solid
        rgba(
            33,
            22,
            39,
            0.14
        );

    color:
        #3A2D40;

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

    line-height:
        1.65;
}



/* ------------------------------------------------------------
   EVENT INFORMATION

   No second box.
   It lives directly inside the large hero container.
------------------------------------------------------------ */

.participant-registration-page
.reg8b-event-meta {
    width:
        100%;

    margin:
        0;

    padding:
        0;

    background:
        transparent;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;
}



/* ------------------------------------------------------------
   EVENT ROWS
------------------------------------------------------------ */

.participant-registration-page
.reg8b-event-row {
    display:
        grid;

    gap:
        0.28rem;

    padding:
        1.25rem
        0;

    border-bottom:
        1px solid
        rgba(
            33,
            22,
            39,
            0.14
        );
}



/* ------------------------------------------------------------
   DATES / VENUE LABELS
------------------------------------------------------------ */

.participant-registration-page
.reg8b-event-row > span {
    color:
        #F7941D;

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}



/* ------------------------------------------------------------
   EVENT VALUES
------------------------------------------------------------ */

.participant-registration-page
.reg8b-event-row > strong {
    color:
        #211627;

    font-family:
        "Poppins",
        sans-serif;

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

    font-weight:
        600;

    line-height:
        1.35;
}



/* Nairobi, Kenya */

.participant-registration-page
.reg8b-event-row > small {
    color:
        #6D6171;

    font-family:
        "Inter",
        sans-serif;

    font-size:
        0.9rem;

    line-height:
        1.45;
}



/* ============================================================
   PARTICIPANT PACKAGE CARDS
============================================================ */

.reg8b-package-card {
    transform-origin:
        center center;
}


.reg8b-package-card-content {
    transform-origin:
        center center;
}


.reg8b-package-card.is-package-pulse
.reg8b-package-card-content {
    position:
        relative;
}



/* ============================================================
   PARTICIPANT FORM
============================================================ */

.reg8b-form-panel {
    transform-origin:
        top center;
}


.reg8b-field {
    transform-origin:
        center center;
}



/* ============================================================
   EXHIBITOR
============================================================ */

.reg8c-package-card,
.reg8c-payment-card,
.reg8c-form-card {
    transform-origin:
        top center;
}


.reg8c-package-features > div,
.reg8c-payment-list > div,
.reg8c-opportunity {
    transform-origin:
        center center;
}



/* ============================================================
   EXHIBITOR OPPORTUNITY TEXT CLARITY
============================================================ */

.reg8c-opportunity {
    backface-visibility:
        visible;

    will-change:
        auto;

    opacity:
        1;

    filter:
        none;
}


.reg8c-opportunity p {
    opacity:
        1;

    color:
        #211627;

    font-weight:
        500;

    filter:
        none;

    text-shadow:
        none;
}



/* ============================================================
   PARTICIPANT HERO — TABLET
============================================================ */

@media (max-width: 900px) {

    .participant-registration-page
    .reg8b-intro-card {
        grid-template-columns:
            1fr;

        gap:
            2.75rem;

        min-height:
            auto;

        padding:
            2.75rem;
    }


    .participant-registration-page
    .reg8b-intro-copy h1 {
        max-width:
            700px;

        font-size:
            clamp(
                3.3rem,
                10vw,
                5rem
            );
    }


    .participant-registration-page
    .reg8b-intro-text {
        max-width:
            100%;
    }

}



/* ============================================================
   PARTICIPANT HERO — MOBILE
============================================================ */

@media (max-width: 600px) {

    .participant-registration-page
    .reg8b-intro {
        padding-top:
            1.5rem;

        padding-bottom:
            2rem;
    }


    .participant-registration-page
    .reg8b-intro-card {
        gap:
            2.2rem;

        padding:
            2rem
            1.5rem;

        border-radius:
            1.7rem;
    }


    .participant-registration-page
    .reg8b-intro-copy h1 {
        font-size:
            clamp(
                3rem,
                15vw,
                4.4rem
            );
    }


    .participant-registration-page
    .reg8b-back {
        margin-bottom:
            1.6rem;
    }


    .participant-registration-page
    .reg8b-intro-text {
        padding-bottom:
            1.4rem;
    }


    .participant-registration-page
    .reg8b-event-row {
        padding:
            1.05rem
            0;
    }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .reg8a-button span,
    .reg8b-submit span,
    .reg8c-submit span {
        transition:
            none;
    }

}

/* ============================================================
   PARTICIPANT HERO TEXT VISIBILITY
============================================================ */

.participant-registration-page
.reg8b-back {
    color:
        #3A2D40;
}


.participant-registration-page
.reg8b-back:hover {
    color:
        #662E93;
}


.participant-registration-page
.reg8b-intro-copy h1 {
    color:
        #211627;
}


.participant-registration-page
.reg8b-intro-copy h1 span {
    color:
        #92278F;
}