/* Landing visual polish: atmosphere only, no sequence timing changes. */
:root {
    --landing-ink: #071416;
    --landing-ink-soft: #1b3032;
    --landing-accent: #ff6600;
    --landing-accent-soft: rgba(255, 102, 0, 0.22);
    --landing-cyan-soft: rgba(35, 221, 248, 0.20);
    --landing-glass: rgba(8, 14, 16, 0.58);
}

body {
    background: #071416;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(118deg, #061315 0%, #122527 28%, #20373a 52%, #0d1c1f 76%, #050d0f 100%),
        linear-gradient(40deg, rgba(255, 102, 0, 0.10), transparent 36%, rgba(35, 221, 248, 0.11) 72%, transparent);
    background-size: 170% 170%, 220% 220%;
    animation: landing-atmosphere-shift 18s ease-in-out infinite alternate;
}

#opening-presentation,
#application-splash-wrapper {
    background:
        linear-gradient(118deg, #061315 0%, #122527 28%, #20373a 52%, #0d1c1f 76%, #050d0f 100%),
        linear-gradient(40deg, rgba(255, 102, 0, 0.10), transparent 36%, rgba(35, 221, 248, 0.11) 72%, transparent) !important;
    background-size: 170% 170%, 220% 220% !important;
    animation: landing-atmosphere-shift 18s ease-in-out infinite alternate;
    isolation: isolate;
}

#opening-presentation::before,
#application-splash-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.02) 28%, rgba(0, 0, 0, 0.02) 72%, rgba(0, 0, 0, 0.42)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.02) 33%, rgba(0, 0, 0, 0.36)),
        linear-gradient(150deg, rgba(255, 102, 0, 0.08), transparent 34%, rgba(35, 221, 248, 0.08) 72%, transparent);
    transition: opacity 0.45s ease;
}

#opening-presentation::after,
#application-splash-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.34;
    background:
        linear-gradient(126deg, transparent 0%, rgba(255, 255, 255, 0.035) 37%, transparent 58%),
        linear-gradient(28deg, transparent 0%, rgba(35, 221, 248, 0.055) 42%, transparent 68%);
    background-size: 180% 180%, 220% 220%;
    animation: landing-lightfield-drift 20s ease-in-out infinite alternate;
    mix-blend-mode: screen;
    transition: opacity 0.45s ease;
}

#opening-presentation.landing-handoff-clear {
    background: transparent !important;
}

#opening-presentation.landing-handoff-clear::before,
#opening-presentation.landing-handoff-clear::after {
    opacity: 0;
}

.opening-logo,
#application-splash,
#sponsors-container,
.skip-intro-ui {
    z-index: 2;
}

#application-splash {
    z-index: 5;
}

#sponsors-container {
    z-index: 2;
    transform: translateY(clamp(18px, 3.6vw, 44px));
}

.opening-logo {
    border-radius: clamp(14px, 2.2vw, 28px);
    filter:
        drop-shadow(0 24px 48px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 20px rgba(255, 102, 0, 0.12));
}

.opening-logo:not(#main-logo) {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 26px 80px rgba(0, 0, 0, 0.34);
}

#main-logo {
    border-radius: 0;
    filter:
        drop-shadow(0 30px 52px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 26px rgba(38, 236, 255, 0.16));
}

.sponsors-logo {
    border-radius: clamp(14px, 1.8vw, 24px);
    clip-path: inset(0 round clamp(14px, 1.8vw, 24px));
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.12);
    filter:
        saturate(0.94)
        drop-shadow(0 0 16px rgba(255, 102, 0, 0.10));
}

#application-splash {
    padding: clamp(8px, 1.2vw, 18px);
}

.splash-other-elements {
    margin-top: clamp(22px, 3.2vw, 40px);
}

#continue-button {
    position: relative;
    z-index: 8;
    border-radius: 999px !important;
    min-width: 134px;
    padding: 11px 24px;
    border: 1px solid rgba(255, 130, 48, 0.72);
    background:
        linear-gradient(135deg, rgba(255, 102, 0, 0.16), rgba(255, 102, 0, 0.035)),
        rgba(9, 14, 15, 0.34);
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: 1.4px;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#continue-button.fade-in {
    animation: landing-button-enter 0.52s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

#continue-button:hover:not(.clicked) {
    border-color: rgba(255, 154, 82, 0.95);
    background:
        linear-gradient(135deg, rgba(255, 102, 0, 0.24), rgba(255, 102, 0, 0.06)),
        rgba(9, 14, 15, 0.42);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(255, 102, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#continue-button.clicked,
body.landing-starting #continue-button {
    transform: translateY(8px) scale(0.96);
}

body.landing-starting #application-splash {
    transition: opacity 0.22s ease;
    transform: translate(-50%, -50%);
    filter: none;
}

body.landing-starting .menu-circular,
.menu-circular.landing-exit {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    filter: none;
    pointer-events: none !important;
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.menu-circular.visible:not(.landing-exit) {
    animation: landing-menu-enter 0.46s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.menu-circular::before {
    box-shadow: inset 0 0 18px 6px rgba(14, 178, 205, 0.26) !important;
    animation: none !important;
    opacity: 0.82;
}

.menu-circular::after {
    border: 1px solid rgba(125, 237, 255, 0.58) !important;
    box-shadow:
        0 0 12px 2px rgba(77, 230, 255, 0.24),
        0 0 30px 6px rgba(255, 102, 0, 0.10) !important;
    animation: none !important;
    opacity: 0.9;
}

body.landing-starting::before,
body.landing-starting #opening-presentation,
body.landing-starting #application-splash-wrapper,
body.landing-starting #opening-presentation::after,
body.landing-starting #application-splash-wrapper::after {
    animation: none !important;
}

body.landing-starting #main-logo {
    filter: none !important;
}

#skip-intro-popup,
#skip-intro-button {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 14, 16, 0.56);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#skip-intro-popup {
    top: auto !important;
    bottom: max(18px, env(safe-area-inset-bottom));
}

#skip-intro-button {
    top: auto !important;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
}

.page-transition-overlay {
    background:
        linear-gradient(135deg, rgba(10, 17, 18, 0.98), rgba(29, 41, 44, 0.98)) !important;
}

@keyframes landing-button-enter {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes landing-atmosphere-shift {
    0% {
        background-position: 0% 44%, 82% 20%;
    }
    45% {
        background-position: 42% 52%, 38% 70%;
    }
    100% {
        background-position: 100% 56%, 12% 86%;
    }
}

@keyframes landing-lightfield-drift {
    0% {
        background-position: 16% 18%, 88% 18%;
        opacity: 0.26;
    }
    100% {
        background-position: 86% 72%, 18% 82%;
        opacity: 0.40;
    }
}

@keyframes landing-menu-enter {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.74);
        filter: none;
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: none;
    }
}

@keyframes landing-ring-breathe {
    0%,
    100% {
        opacity: 0.66;
        transform: translate(-50%, -50%) scale(0.985);
    }
    50% {
        opacity: 0.94;
        transform: translate(-50%, -50%) scale(1.025);
    }
}

@media (max-width: 600px) {
    #continue-button {
        min-width: 124px;
        padding: 10px 20px;
        font-size: 13px;
    }

    .opening-logo:not(#main-logo) {
        border-radius: 18px;
    }

    #skip-intro-popup {
        top: auto !important;
        bottom: calc(max(16px, env(safe-area-inset-bottom)) + 54px);
        left: 14px;
        right: 14px;
        width: auto;
        text-align: center;
        transform: none;
    }

    #skip-intro-button {
        top: auto !important;
        right: auto;
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 50%;
        transform: translateX(-50%);
        min-width: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #continue-button.fade-in,
    .menu-circular.visible:not(.landing-exit),
    .menu-circular::before,
    .menu-circular::after,
    body::before,
    #opening-presentation,
    #application-splash-wrapper,
    #opening-presentation::after,
    #application-splash-wrapper::after {
        animation: none !important;
    }
}