/* BetterTrade 2026 splash page
   The 1920 x 1080 reference frame is the source of truth for positioning. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--color-neutral-950);
}

body {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    color: var(--color-text-inverse);
    font-family: var(--font-family-base), Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    touch-action: none;
}

img {
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.splash {
    --splash-frame-max-width: 1600px;
    --splash-content-left: 5.3%;
    --splash-content-top: 50%;
    --splash-content-width: 42%;
    --splash-title-width: 72%;
    --splash-brand-title-gap: 16px;
    --splash-title-event-gap: clamp(18px, calc(15vh - 90px), 72px);
    --splash-event-size: clamp(16px, 1.55vw, 30px);
    --splash-event-line-height: 1.28;
    --splash-scene-left: 42.5%;
    --splash-scene-width: min(58%, 90vh, 1080px);

    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-neutral-950);
    display: flex;
    flex-direction: column;
}

.splash__background {
    --splash-background-position: center center;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    z-index: 0;
    overflow: hidden;
    transform: translateX(-50%);
    background: url('/celebrate/images/background.png') var(--splash-background-position) / cover no-repeat;
}

.splash__background::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
            rgba(5, 13, 22, 0.08),
            rgba(5, 13, 22, 0) 52%,
            rgba(5, 13, 22, 0.10));
}

.splash__background-video {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: var(--splash-background-position);
    opacity: 0;
    transition: opacity 1.2s linear;
    will-change: opacity;
}

.splash__background-video.is-active {
    opacity: 1;
}

.splash__frame::before {
    content: '';
    position: absolute;
    z-index: 12;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    display: none;
    pointer-events: none;
    transform: translateX(-50%);
    background: rgb(0 0 0 / 0.45);
}

.splash__frame::after {
    content: '';
    position: absolute;
    z-index: 15;
    right: 0;
    bottom: 0;
    left: 0;
    height: 44vh;
    display: none;
    pointer-events: none;
    background: linear-gradient(180deg,
            rgb(0 0 0 / 0) 0%,
            rgb(0 0 0 / 0.18) 34%,
            rgb(0 0 0 / 0.68) 72%,
            rgb(0 0 0 / 0.92) 100%);
}

.splash__frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    z-index: 0;
    left: 50%;
    width: min(100vw, var(--splash-frame-max-width));
    height: auto;
    overflow: visible;
    transform: translateX(-50%);
}

.splash__content {
    position: absolute;
    z-index: 20;
    top: var(--splash-content-top);
    left: var(--splash-content-left);
    width: var(--splash-content-width);
    max-height: calc(100% - var(--space-0));
    padding-block: var(--space-8);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.splash__content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.splash__logo-art {
    flex: 0 0 auto;
    width: var(--splash-title-width);
    height: auto;
}

.splash__logo-sub {
    margin: var(--space-8) 0 0;
    color: var(--color-neutral-0);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.splash__logo-sub strong,
.splash__logo-sub span {
    display: block;
}

.splash__logo-sub strong {
    font-weight: var(--font-weight-regular);
}

.splash__event {
    flex: 0 0 auto;
    width: 96%;
    margin-top: var(--splash-title-event-gap);
    color: var(--color-neutral-0);
    font-size: var(--splash-event-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--splash-event-line-height);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.splash__event p {
    margin: 0;
    white-space: nowrap;
}

.splash__sponsors {
    --bt-sponsor-lg-width: 258px;
    --bt-sponsor-lg-ratio: 258 / 120;
    --bt-sponsor-md-width: 192px;
    --bt-sponsor-md-ratio: 192 / 90;
    --bt-sponsor-frame-bg: #eaeaea;

    flex: 0 1 auto;
    width: min(var(--bt-sponsor-lg-width), 100%);
    margin-top: var(--space-8);
}

.splash__sponsors[hidden],
.sponsor-layout-picker[hidden] {
    display: none !important;
}

.splash__sponsors[data-sponsor-layout="lg-1-md-2"] {
    width: min(calc(var(--bt-sponsor-md-width) * 2 + var(--space-3)), 100%);
}

.splash__sponsors[data-sponsor-layout="lg-2"] {
    width: min(calc(var(--bt-sponsor-lg-width) * 2 + var(--space-3)), 100%);
}

.sponsor__logos {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: center;
    gap: var(--space-3);
    list-style: none;
}

.sponsor__logos--lg {
    grid-template-columns: minmax(0, var(--bt-sponsor-lg-width));
}

.sponsor__logos--md {
    grid-template-columns: minmax(0, var(--bt-sponsor-md-width));
}

.splash__sponsors[data-sponsor-layout="lg-1-md-2"] .sponsor__logos--md,
.splash__sponsors[data-sponsor-layout="lg-2"] .sponsor__logos--lg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sponsor__logos + .sponsor__logos {
    margin-top: var(--space-3);
}

.sponsor__logo {
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: var(--space-2);
    border-radius: var(--card-radius);
    background: var(--bt-sponsor-frame-bg);
}

.sponsor__logo--lg {
    aspect-ratio: var(--bt-sponsor-lg-ratio);
}

.sponsor__logo--md {
    aspect-ratio: var(--bt-sponsor-md-ratio);
}

.sponsor__logo img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.sponsor-layout-picker {
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--bt-header-action-height) + var(--space-12) + env(safe-area-inset-bottom));
    z-index: 300;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgb(255 255 255 / 0.34);
    border-radius: 999px;
    color: var(--color-neutral-0);
    background: rgb(2 11 30 / 0.88);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: inherit;
    font-size: var(--font-size-14);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.sponsor-layout-picker:hover {
    border-color: rgb(255 255 255 / 0.7);
    background: rgb(12 25 54 / 0.94);
}

.sponsor-layout-picker:focus-within {
    border-color: rgb(255 255 255 / 0.8);
    outline: 2px solid var(--color-neutral-0);
    outline-offset: 3px;
}

.sponsor-layout-picker__label {
    color: rgb(255 255 255 / 0.72);
    font-size: var(--font-size-12);
}

.sponsor-layout-picker__select {
    min-height: 32px;
    margin: 0;
    padding: 4px 30px 4px var(--space-2);
    border: 0;
    border-radius: 999px;
    color: var(--color-neutral-0);
    background-color: rgb(255 255 255 / 0.12);
    font: inherit;
    font-size: var(--font-size-14);
    cursor: pointer;
    color-scheme: dark;
}

.sponsor-layout-picker__select:focus {
    outline: none;
}

.splash__actions {
    position: relative;
    flex: 0 0 auto;
    z-index: 200;
    width: 100%;
    margin: 0;
    min-height: var(--bt-header-action-height);
    padding: var(--space-4);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    /* background-color: var(--color-surface-page); */
    background: radial-gradient(20% 100% at 35% 0%, rgba(115, 130, 170, 0.28), transparent), linear-gradient(rgb(25, 39, 74) 0%, rgb(2, 11, 30) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
}

.splash__register {
    width: max-content;
    min-height: var(--bt-header-action-height);
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.splash__website {
    height: var(--bt-header-action-height);
    min-height: var(--bt-header-action-height);
    font-size: var(--font-size-16);
    line-height: 1;
    white-space: nowrap;
}

.splash__time {
    font-size: calc(var(--font-size-24) - 2px);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-2) !important;
}

.splash__date {
    margin-top: var(--space-1) !important;
    font-size: calc(var(--font-size-24) + 2px);
}

.splash__venue {
    margin-top: var(--space-4) !important;
    color: var(--color-neutral-0);
    font-size: calc(var(--font-size-24) - 2px);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
}

br.venue-br {
    display: none;
}

.splash__scene {
    position: absolute;
    z-index: 10;
    top: auto;
    bottom: 0;
    left: var(--splash-scene-left);
    width: min(var(--splash-scene-width), 104cqh);
    height: auto;
    aspect-ratio: 0.8;
}

.splash__ship,
.splash__stairs,
.splash__people-shadow,
.splash__asset,
.splash__person {
    position: absolute;
}

.splash__ship {
    z-index: 30;
    top: 26%;
    left: 15.25%;
    width: 70.65%;
    height: auto;
}

.splash__stairs {
    z-index: 40;
    top: 78.22%;
    left: 1.98%;
    bottom: auto;
    width: 95.83%;
    height: auto;
}

.splash__people-shadow {
    z-index: 50;
    top: 77.7%;
    left: 5.09%;
    bottom: auto;
    width: 60.77%;
    height: auto;
}

.splash__asset {
    --splash-asset-idle-y: 12px;
    --splash-asset-idle-rotate: 4deg;
    --splash-asset-idle-duration: 4s;

    height: auto;
    filter: saturate(1.3);
    animation: splash-asset-idle var(--splash-asset-idle-duration) ease-in-out infinite alternate;
    will-change: translate, rotate;
}

.splash__asset--bitcoin {
    --splash-asset-idle-y: 10px;
    --splash-asset-idle-rotate: 3deg;
    --splash-asset-idle-duration: 4.2s;

    z-index: 5;
    top: 28.47%;
    left: 26.57%;
    width: 7.75%;
    transform: translate(-50%, -50%) rotate(-7deg);
}

.splash__asset--triangle {
    --splash-asset-idle-y: 14px;
    --splash-asset-idle-rotate: -5deg;
    --splash-asset-idle-duration: 4.8s;

    z-index: 5;
    top: 32.41%;
    left: 47.19%;
    width: 6.27%;
    transform: translate(-50%, -50%) rotate(20deg);
}

.splash__asset--gold {
    --splash-asset-idle-y: 11px;
    --splash-asset-idle-rotate: 4deg;
    --splash-asset-idle-duration: 3.6s;

    z-index: 5;
    top: 32.42%;
    left: 71.48%;
    width: 6.12%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.splash__asset--stock {
    --splash-asset-idle-y: 15px;
    --splash-asset-idle-rotate: -4deg;
    --splash-asset-idle-duration: 4.4s;

    z-index: 70;
    top: 41.94%;
    left: 28.49%;
    width: 8.1%;
    transform: translate(-50%, -50%) rotate(-40deg);
}

.splash__asset--heart {
    --splash-asset-idle-y: 9px;
    --splash-asset-idle-rotate: 3deg;
    --splash-asset-idle-duration: 3.8s;

    z-index: 70;
    top: 40.44%;
    left: 68.49%;
    width: 9.21%;
    transform: translate(-50%, -50%);
}

.splash__asset--card {
    --splash-asset-idle-y: 13px;
    --splash-asset-idle-rotate: -5deg;
    --splash-asset-idle-duration: 5s;

    z-index: 5;
    top: 56.06%;
    left: 74.3%;
    width: 9.03%;
    transform: translate(-50%, -50%) rotate(50deg);
}

@keyframes splash-asset-idle {
    from {
        translate: 0 0;
        rotate: 0deg;
    }

    to {
        translate: 0 var(--splash-asset-idle-y);
        rotate: var(--splash-asset-idle-rotate);
    }
}

.splash__people {
    position: absolute;
    inset: 0;
    z-index: 60;
}

.splash__person {
    height: auto;
    transform-origin: 50% 100%;
}

.splash__person--1 {
    top: 74.77%;
    left: 32.9%;
    bottom: auto;
    width: 19.69%;
}

.splash__person--2 {
    top: 76.79%;
    left: 41.48%;
    bottom: auto;
    width: 3.55%;
}

.splash__person--3 {
    top: 76.47%;
    left: 50.71%;
    bottom: auto;
    width: 3.4%;
}

.splash__person--4 {
    top: 76.47%;
    left: 34.23%;
    bottom: auto;
    width: 5.06%;
}

.splash__person--5 {
    top: 78.1%;
    left: 44.81%;
    bottom: auto;
    width: 6.98%;
}

.splash__person--6 {
    top: 78.12%;
    left: 55.68%;
    bottom: auto;
    width: 7.31%;
}

.splash__person--7 {
    top: 75.41%;
    left: 15.25%;
    bottom: auto;
    width: 17.78%;
}

.splash__person--8 {
    top: 77.6%;
    left: 65.49%;
    bottom: auto;
    width: 17.01%;
}

@media (max-width: 1199px) {
    .splash {
        --splash-frame-max-width: 1600px;
        --splash-content-left: 5.3%;
        --splash-content-top: 50%;
        --splash-content-width: 42%;
        --splash-title-width: 84%;
        --splash-brand-title-gap: 16px;
        --splash-title-event-gap: clamp(18px, calc(15vh - 80px), 72px);
        --splash-event-size: clamp(16px, 1.55vw, 30px);
        --splash-event-line-height: 1.28;
        --splash-scene-left: 38%;
        --splash-scene-width: min(72%, 100vh, 1080px);

        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        overflow: hidden;
        isolation: isolate;
        background: var(--color-neutral-950);
    }

    .splash__background {
        --splash-background-position: 30% center;
    }

    .splash__logo-sub {
        margin: var(--space-6) var(--space-0) var(--space-0);
        font-size: var(--font-size-18);
    }

    br.venue-br {
        display: block;
    }
}

@media (max-width: 991px) {
    html {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: none;
    }

    body {
        position: static;
        inset: auto;
        height: auto;
        min-height: 100%;
        overflow-x: clip;
        overflow-y: visible;
        overscroll-behavior: none;
        touch-action: pan-y;
    }

    .splash {
        --splash-content-left: 0;
        --splash-content-top: 0;
        --splash-content-width: 100%;
        --splash-title-width: min(48vh, 80vw);
        --splash-title-event-gap: 0;
        --splash-event-size: 24px;
        --splash-scene-left: 50%;
        --splash-scene-width: min(92vh, 162vw);

        position: relative;
        inset: auto;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: visible;
    }

    .splash__background {
        --splash-background-position: 12% center;
    }

    .splash__background-video {
        object-fit: cover;
    }

    .splash__frame {
        flex: 0 0 auto;
        container-type: normal;
        left: 0;
        width: 100vw;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        aspect-ratio: auto;
        transform: none;
    }

    .splash__frame::after {
        display: block;
        position: fixed;
        right: auto;
        bottom: calc(var(--bt-header-action-height) + var(--space-8) + env(safe-area-inset-bottom));
        left: 50%;
        width: 100vw;
        height: clamp(280px, 52vh, 420px);
        opacity: 1;
        transform: translateX(-50%);
        transition: opacity 320ms ease;
        will-change: opacity;
        background: radial-gradient(ellipse 55% 100% at 50% 100%,
                rgb(0 0 0 / 0.92) 0%,
                rgb(0 0 0 / 0.68) 42%,
                rgb(0 0 0 / 0.22) 74%,
                rgb(0 0 0 / 0) 100%);
    }

    .splash__frame.is-scrolled::after {
        opacity: 0;
    }

    .splash__actions {
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    }

    .splash__content {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: none;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        padding: var(--space-12) var(--space-4)
            calc(var(--bt-header-action-height) + var(--space-8) * 3 + env(safe-area-inset-bottom));
        transform: none;
        overflow: visible;
    }

    .splash__logo-art {
        width: var(--splash-title-width);
    }

    .splash__logo-sub {
        margin: var(--space-6) var(--space-0) var(--space-6);
    }

    .splash__event {
        --splash-event-size: 20px;

        width: min(calc(100vw - var(--space-8)), 720px);
        padding: 120px var(--space-4) var(--space-8);
        /* padding: var(--space-8) var(--space-4) 120px; */
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.22;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
    }

    .splash__date {
        order: 1;
        font-size: var(--font-size-24);
    }

    .splash__time {
        order: 2;
        font-size: calc(var(--font-size-24) - 4px);
    }

    .splash__venue {
        order: 3;
        font-size: calc(var(--font-size-24) - 4px);
    }

    .splash__sponsors {
        margin: var(--space-0);
    }

    .splash__scene {
        top: unset;
        bottom: -168px;
        left: 50%;
        width: var(--splash-scene-width);
        height: auto;
        transform: translateX(-50%);
    }

    .splash__scene.is-gap-aligned {
        top: var(--splash-scene-responsive-top);
        bottom: auto;
    }
}

@media (max-width: 991px) and (min-aspect-ratio: 6 / 5) {
    .splash__event {
        --splash-event-size: clamp(18px, 2.5vw, 24px);
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    html {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
    }

    .splash {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .splash__frame {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        overflow: hidden;
    }

    .splash__content {
        height: 100%;
        max-height: 100%;
        min-height: 0 !important;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
    }

    .splash__event {
        /* margin-top: 0; */
        padding-top: var(--space-6);
        padding-bottom: var(--space-0);
    }

    .splash__scene {
        bottom: -72px;
    }
}

/* Portrait tablets have enough vertical room to keep the event and sponsor block
   above the fixed action bar without the extra scroll runway used by shorter screens. */
@media (min-width: 768px) and (max-width: 991px) and (min-height: 900px) {
    .splash {
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .splash__frame {
        height: 100%;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .splash__content {
        height: 100%;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        padding-top: var(--space-10);
        padding-bottom: calc(var(--bt-header-action-height) + var(--space-8) + var(--space-6) + env(safe-area-inset-bottom));
    }

    .splash__event {
        padding-top: var(--space-8);
        padding-bottom: var(--space-4);
        transform: translateY(clamp(-64px, -4vh, -40px));
    }

    .splash__date {
        font-size: calc(var(--font-size-24) + 2px);
    }

    .splash__time,
    .splash__venue {
        font-size: calc(var(--font-size-24) - 2px);
    }
}

@media (max-width: 767px) {
    .splash__sponsors {
        --bt-sponsor-lg-width: clamp(170px, calc(85.81px + 22.45vw), 258px);
        --bt-sponsor-md-width: clamp(126.5px, calc(63.834px + 16.71vw), 192px);
    }

    .splash__date {
        font-size: calc(var(--font-size-20) + 2px);
    }

    .splash__time,
    .splash__venue {
        font-size: calc(var(--font-size-16) + 2px);
    }
}

@media (max-width: 575px) {
    html {
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior: none;
        scrollbar-width: none;
    }

    body {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .splash {
        --splash-title-width: min(36vh, 96%);
        --splash-mobile-scene-offset: clamp(-97px, calc(138.75px - 41vw), -15px);

        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100svh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .splash__frame {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0 !important;
        overflow: hidden;
    }

    .splash__frame::before {
        display: block;
    }

    .splash__frame::after,
    .splash__frame.is-scrolled::after {
        display: none;
        bottom: calc(var(--bt-header-action-height) * 2 + var(--space-3) + var(--space-8) + env(safe-area-inset-bottom));
        opacity: 1;
        background: linear-gradient(180deg,
                rgb(0 0 0 / 0) 0%,
                rgb(0 0 0 / 0.08) 34%,
                rgb(0 0 0 / 0.48) 72%,
                rgb(0 0 0 / 0.72) 100%);
    }

    .splash__content {
        left: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-height: 0 !important;
        padding: var(--space-8) var(--space-3)
            calc(var(--bt-header-action-height) * 2 + var(--space-3) + var(--space-8) * 2 + env(safe-area-inset-bottom));
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: manipulation;
    }

    .splash__event {
        margin-top: auto;
        padding: var(--space-6) var(--space-4);
        width: 100%;
    }

    .splash__event p {
        white-space: normal;
        text-wrap: balance;
    }

    .splash__date {
        font-size: var(--font-size-20);
    }

    .splash__time,
    .splash__venue {
        font-size: var(--font-size-16);
    }

    .splash__actions {
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: max-content;
        grid-auto-flow: row;
        justify-content: center;
        justify-items: stretch;
        gap: var(--space-3);
    }

    .sponsor-layout-picker {
        right: var(--space-3);
        bottom: calc(var(--bt-header-action-height) * 2 + var(--space-3) + var(--space-8) + env(safe-area-inset-bottom));
        padding: var(--space-1) var(--space-2);
    }

    .sponsor-layout-picker__label {
        display: none;
    }

    .sponsor-layout-picker__select {
        min-height: 30px;
        font-size: var(--font-size-12);
    }

    .splash__website {
        width: auto;
        height: var(--bt-header-action-height);
        min-height: var(--bt-header-action-height);
        padding-inline: var(--space-6);
        font-size: var(--font-size-16);
    }

    .splash__scene {
        bottom: calc(-72px - clamp(0px, calc(24vw - 90px), 48px));
        left: 50%;
        width: var(--splash-scene-width);
        height: auto;
        transform: translate(-50%, var(--splash-mobile-scene-offset));
    }

    .splash__logo-sub {
        margin: var(--space-4) var(--space-0) var(--space-4);
        font-size: var(--font-size-14);
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}