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

.hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    background-color: #78c7ea;
}


/* =========================================================
   HERO BANNER
========================================================= */

.hero-banner {
    position: relative;

    width: 100%;

    overflow: hidden;

    line-height: 0;
}


.hero-banner-image {
    display: block;

    width: 100%;
    height: auto;

    user-select: none;

    -webkit-user-drag: none;
}


/* Hide the few baked-in edge pixels visible in the desktop artwork. */

@media (min-width: 701px) {
    .hero-banner-image {
        transform: scale(1.006);
        transform-origin: center;
    }
}


/* =========================================================
   BANNER OFF
========================================================= */

.hero-banner-off {
    position: relative;

    z-index: 1;
}


/* =========================================================
   BANNER ON
========================================================= */

.hero-banner-on {
    position: absolute;

    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: contain;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 120ms ease;
}


/* =========================================================
   OPEN SIGN HOTSPOT
========================================================= */

.open-sign-trigger {
    position: absolute;

    left: 24.5%;
    top: 78%;

    z-index: 10;

    display: block;

    width: 15%;
    height: 11%;

    background: transparent;

    border-radius: 10px;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   TURN ON THE SIGN
========================================================= */

.hero-banner:has(.open-sign-trigger:hover)
.hero-banner-on,

.hero-banner:has(.open-sign-trigger:focus)
.hero-banner-on,

.hero-banner:has(.open-sign-trigger:focus-visible)
.hero-banner-on,

.hero-banner:has(.open-sign-trigger:active)
.hero-banner-on,

.hero-banner.is-lit
.hero-banner-on {
    opacity: 1;
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.open-sign-trigger:focus-visible {
    outline:
        4px dashed var(--cream);

    outline-offset: 4px;
}


/* Mobile-only hero call to action */

.mobile-menu-cta {
    display: none;
}