@font-face {
    font-family: Roboto;
    src: url('/assets/fonts/Roboto-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: #000;
    color: #fff;
    overflow: hidden;
}

main {
    --logo-height: min(50svh, 54.0323vw);
    position: relative;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

#logo {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    opacity: 0;
}

.logo-fallback {
    position: absolute;
    left: 50%;
    top: 40svh;
    width: min(81.43275svh, 88vw);
    transform: translate(-50%, -50%);
}

.coming-soon {
    position: absolute;
    z-index: 1;
    top: calc(40svh + var(--logo-height) / 2 + clamp(20px, 4svh, 40px));
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.8s ease, transform 1.8s ease;
}

.coming-soon.revealed {
    opacity: 1;
    transform: none;
}

h1 {
    margin: 0;
    padding-left: .4em;
    color: #bdb9b1;
    font: 500 clamp(11px, 1.6svh, 15px) / 1.4 Roboto, sans-serif;
    letter-spacing: .4em;
}

.project-mark {
    display: block;
    width: min(280px, 65vw, 31svh);
    height: auto;
    margin: -6px auto 0;
}

.copyright {
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(16px, env(safe-area-inset-bottom));
    padding: 0 16px;
    color: #77746f;
    font: 500 10px / 1.5 Roboto, sans-serif;
    letter-spacing: .04em;
    text-align: center;
    pointer-events: none;
}

.loading .logo-fallback {
    opacity: 0;
}

.animated .logo-fallback { display: none; }
.animated #logo { opacity: 1; }

@media (max-height: 600px) {
    .coming-soon { top: calc(40svh + var(--logo-height) / 2 + 12px); }
    .project-mark { width: min(280px, 65vw, 24svh); }
}

@media (prefers-reduced-motion: reduce) {
    .coming-soon { transition: none; }
}