/* ============================================================
   BENROMA INSTITUTIONAL WELCOME EXPERIENCE
   ============================================================ */

   :root {
    --benroma-green: #00764d;
    --benroma-dark: #082820;
    --benroma-gold: #d8a400;
    --benroma-grey: #60736d;
}


/* ============================================================
   RESET
   ============================================================ */

.benroma-welcome,
.benroma-welcome * {
    box-sizing: border-box;
}


/* ============================================================
   MAIN OVERLAY
   ============================================================ */

.benroma-welcome {
    position: fixed;

    inset: 0;

    z-index: 999999;

    background:
        linear-gradient(
            135deg,
            #003d2d 0%,
            #07513d 100%
        );

    padding: 24px 30px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


.benroma-welcome.active {
    opacity: 1;

    visibility: visible;
}


/* ============================================================
   ALL MAIN SCENES

   Every scene uses the same viewport.
   Nothing is allowed to extend outside it.
   ============================================================ */

.welcome-intro,
.welcome-story,
.welcome-final {

    position: absolute;

    top: 24px;
    right: 30px;
    bottom: 24px;
    left: 30px;

    border-radius: 34px;

    overflow: hidden;

}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.welcome-close {

    position: absolute;

    top: 42px;
    right: 48px;

    width: 58px;
    height: 58px;

    z-index: 1000;

    border: none;

    border-radius: 50%;

    background: #145b47;

    color: #ffffff;

    font-size: 34px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.8s ease,
        transform 0.3s ease,
        background 0.3s ease;
}


.welcome-close.show {
    opacity: 1;

    pointer-events: auto;
}


.welcome-close:hover {
    transform: rotate(90deg);

    background: var(--benroma-green);
}


/* ============================================================
   SCENE 0 — OPENING IDENTITY
   ============================================================ */

.welcome-intro {

    z-index: 50;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    opacity: 1;

    visibility: visible;

    transform: scale(1);

    transition:
        opacity 1.8s ease,
        transform 1.8s ease,
        visibility 1.8s ease;
}


.welcome-intro.hide {

    opacity: 0;

    visibility: hidden;

    transform: scale(1.025);

}


/* ============================================================
   INTRO CONTENT
   ============================================================ */

.intro-inner {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.intro-logo {

    width: clamp(
        105px,
        11vw,
        155px
    );

    height: clamp(
        105px,
        11vw,
        155px
    );

    object-fit: contain;

    margin-bottom: 18px;
}


.intro-name {

    color: var(--benroma-green);

    font-size: clamp(
        58px,
        7vw,
        105px
    );

    line-height: 0.95;

    font-weight: 900;

    letter-spacing: 10px;
}


.intro-tagline {

    margin-top: 20px;

    color: #596e68;

    font-size: clamp(
        18px,
        2vw,
        27px
    );

    font-style: italic;

    font-weight: 500;

    letter-spacing: 1px;
}


/* ============================================================
   STORY VIEWPORT
   ============================================================ */

.welcome-story {

    z-index: 20;

    background: #ffffff;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}


.welcome-story.visible {

    opacity: 1;

    visibility: visible;

}


/* ============================================================
   STORY TRACK

   TWO EXACT VIEWPORTS:
   50% GOVERNOR
   50% GM
   ============================================================ */

.welcome-track {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 200%;

    display: flex;

    flex-direction: column;

    transform: translateY(0);

    transition:
        transform 2.2s cubic-bezier(
            0.65,
            0,
            0.35,
            1
        );

}


/* ============================================================
   INDIVIDUAL STORY SCENES
   ============================================================ */

.welcome-scene {

    position: relative;

    flex: 0 0 50%;

    width: 100%;
    height: 50%;

    overflow: hidden;

    opacity: 0;

    transition:
        opacity 1.6s ease;
}


.welcome-scene.is-active {

    opacity: 1;
}


/* ============================================================
   SCENE INNER

   IMPORTANT:
   We use a contained height rather than letting the
   contents determine the scene height.
   ============================================================ */

.scene-inner {

    width: 100%;
    height: 100%;

    min-height: 0;

    display: grid;

    align-items: center;

    gap: clamp(
        30px,
        4vw,
        70px
    );

    padding:

        clamp(42px, 5vh, 65px)

        clamp(55px, 7vw, 115px)

        clamp(35px, 4vh, 55px);

}


/* ============================================================
   GOVERNOR

   PHOTO LEFT
   MESSAGE RIGHT
   ============================================================ */

.governor-scene .scene-inner {

    grid-template-columns:
        minmax(300px, 40%)
        minmax(0, 60%);

}


/* ============================================================
   GM

   MESSAGE LEFT
   PHOTO RIGHT
   ============================================================ */

.gm-scene .scene-inner {

    grid-template-columns:
        minmax(0, 60%)
        minmax(300px, 40%);

}


/* ============================================================
   PHOTO AREA
   ============================================================ */

.scene-photo {

    position: relative;

    height: 100%;

    min-height: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ============================================================
   GOLD CORNER
   ============================================================ */

.scene-photo::after {

    content: "";

    position: absolute;

    z-index: 1;

    width: 85%;
    height: 82%;

    right: 0;
    bottom: 0;

    border-right:
        11px solid var(--benroma-gold);

    border-bottom:
        11px solid var(--benroma-gold);

    border-radius:
        0 0 28px 0;

    pointer-events: none;

}


/* ============================================================
   IMAGE

   The image is constrained INSIDE the viewport.
   ============================================================ */

.scene-photo img {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    height: 100%;

    max-height: 100%;

    object-fit: contain;

    object-position: center center;

    filter:
        drop-shadow(
            0 18px 28px
            rgba(0, 0, 0, 0.16)
        );

}


/* ============================================================
   GOVERNOR IMAGE

   Mirrored to face RIGHT.
   ============================================================ */

.governor-photo img {

    transform: scaleX(-1);

}


/* ============================================================
   GOVERNOR IMAGE SIZE
   ============================================================ */

.governor-photo {

    padding:
        10px 0 0 0;

}


/* ============================================================
   GM IMAGE
   ============================================================ */

.gm-photo {

    padding:
        10px 0 0 0;

}


/* ============================================================
   MESSAGE
   ============================================================ */

.scene-message {

    min-width: 0;

    max-height: 100%;

    overflow: hidden;

    align-self: center;

}


/* ============================================================
   MESSAGE LABEL
   ============================================================ */

.message-label {

    margin-bottom: 12px;

    color: var(--benroma-green);

    font-size: clamp(
        11px,
        1vw,
        15px
    );

    line-height: 1.35;

    font-weight: 900;

    letter-spacing: 3px;

}


/* ============================================================
   NAME
   ============================================================ */

.scene-message h2 {

    margin: 0;

    color: var(--benroma-dark);

    font-size: clamp(
        27px,
        2.8vw,
        45px
    );

    line-height: 1.05;

    font-weight: 900;

}


/* ============================================================
   POSITION
   ============================================================ */

.message-position {

    margin-top: 8px;

    color: var(--benroma-gold);

    font-size: clamp(
        14px,
        1.2vw,
        18px
    );

    font-weight: 800;

}


/* ============================================================
   GOLD LINE
   ============================================================ */

.message-gold-line {

    width: 62px;

    height: 4px;

    margin:
        clamp(16px, 2vh, 24px)
        0;

    background:
        var(--benroma-gold);

}


/* ============================================================
   MESSAGE BODY
   ============================================================ */

.scene-message p {

    margin:
        0 0
        clamp(11px, 1.5vh, 18px);

    color: #526a63;

    font-size: clamp(
        13px,
        1.25vw,
        17px
    );

    line-height: 1.5;

}


/* ============================================================
   SIGNATURE
   ============================================================ */

.message-signature {

    margin-top:
        clamp(12px, 1.5vh, 20px);

    padding-left: 15px;

    border-left:
        3px solid var(--benroma-gold);

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.message-signature strong {

    color: var(--benroma-green);

    font-size: clamp(
        14px,
        1.2vw,
        17px
    );

}


.message-signature span {

    color: #788984;

    font-size: 12px;

}


/* ============================================================
   FINAL STATIC SCREEN
   ============================================================ */

.welcome-final {

    z-index: 30;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(25px);

    transition:
        opacity 1.6s ease,
        transform 1.6s ease,
        visibility 1.6s ease;

}


.welcome-final.visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


/* ============================================================
   FINAL INNER
   ============================================================ */

.final-inner {

    width: 100%;
    height: 100%;

    min-height: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        35px 7%;

}


/* ============================================================
   FINAL BRAND
   ============================================================ */

.final-brand {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex-shrink: 0;

    margin-bottom:
        clamp(18px, 3vh, 32px);

}


.final-logo {

    width:
        clamp(60px, 7vw, 88px);

    height:
        clamp(60px, 7vw, 88px);

    object-fit: contain;

    margin-bottom: 7px;

}


.final-name {

    color: var(--benroma-green);

    font-size:
        clamp(35px, 4vw, 58px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: 7px;

}


.final-agency {

    margin-top: 8px;

    color: #60736d;

    font-size:
        clamp(10px, 1vw, 14px);

    font-weight: 800;

    letter-spacing: 2px;

}


.final-gold-line {

    width: 105px;

    height: 4px;

    margin-top: 18px;

    background:
        var(--benroma-gold);

}


/* ============================================================
   FINAL MESSAGE
   ============================================================ */

.final-message {

    max-width: 1100px;

}


.final-label {

    margin-bottom: 13px;

    color: var(--benroma-green);

    font-size:
        clamp(11px, 1vw, 14px);

    font-weight: 900;

    letter-spacing: 4px;

}


.final-message h1 {

    margin: 0;

    color: var(--benroma-dark);

    font-size:
        clamp(39px, 5vw, 74px);

    line-height: 0.98;

    letter-spacing: -2px;

    font-weight: 900;

}


.final-message h1 span {

    display: block;

    color: var(--benroma-green);

}


.final-message p {

    max-width: 850px;

    margin:
        clamp(16px, 2vh, 24px)
        auto
        clamp(18px, 2.5vh, 28px);

    color: #607872;

    font-size:
        clamp(14px, 1.45vw, 21px);

    line-height: 1.45;

}


/* ============================================================
   ONLY ENTER BUTTON
   ============================================================ */

.enter-benroma {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        14px 29px;

    border: none;

    border-radius: 7px;

    background:
        var(--benroma-gold);

    color: #ffffff;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        rgba(216, 164, 0, 0.24);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


.enter-benroma span {

    font-size: 22px;

}


.enter-benroma:hover {

    transform:
        translateY(-3px);

    background:
        #c59200;

    box-shadow:
        0 14px 30px
        rgba(216, 164, 0, 0.32);

}


/* ============================================================
   TABLET / SMALL LAPTOP
   ============================================================ */

@media (max-height: 780px) and (min-width: 901px) {

    .scene-inner {

        padding-top: 30px;
        padding-bottom: 25px;

    }


    .scene-message h2 {

        font-size: 30px;

    }


    .scene-message p {

        font-size: 14px;

        line-height: 1.4;

        margin-bottom: 10px;

    }


    .message-gold-line {

        margin:
            13px 0;

    }


    .final-brand {

        margin-bottom: 15px;

    }


    .final-message h1 {

        font-size: 48px;

    }


    .final-message p {

        margin-top: 14px;
        margin-bottom: 18px;

    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .benroma-welcome {

        padding: 10px;

    }


    .welcome-intro,
    .welcome-story,
    .welcome-final {

        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;

        border-radius: 22px;

    }


    .welcome-close {

        top: 25px;
        right: 25px;

        width: 48px;
        height: 48px;

        font-size: 28px;

    }


    .scene-inner,
    .governor-scene .scene-inner,
    .gm-scene .scene-inner {

        grid-template-columns: 1fr;

        grid-template-rows: 38% 62%;

        gap: 8px;

        padding:
            55px 7% 25px;

    }


    .scene-photo {

        height: 100%;

        min-height: 0;

    }


    .gm-scene .scene-photo {

        order: -1;

    }


    .scene-message {

        text-align: center;

        max-height: 100%;

        overflow: hidden;

    }


    .message-gold-line {

        margin:
            13px auto;

    }


    .scene-message p {

        font-size: 13px;

        line-height: 1.4;

    }


    .message-signature {

        text-align: left;

        max-width: 500px;

        margin-left: auto;
        margin-right: auto;

    }


    .intro-logo {

        width: 95px;
        height: 95px;

    }


    .intro-name {

        font-size: 52px;

        letter-spacing: 6px;

    }


    .intro-tagline {

        font-size: 17px;

    }


    .final-inner {

        padding:
            25px 6%;

    }


    .final-logo {

        width: 58px;
        height: 58px;

    }


    .final-name {

        font-size: 34px;

        letter-spacing: 4px;

    }


    .final-agency {

        font-size: 8px;

        letter-spacing: 1px;

    }


    .final-message h1 {

        font-size: 38px;

    }


    .final-message p {

        font-size: 14px;

        line-height: 1.4;

    }


    .enter-benroma {

        padding:
            13px 23px;

    }

}