@font-face {
    font-family: Outfit;
    src: url("../fonts/outfit-latin-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    font-family: Outfit, sans-serif;
    font-synthesis: none;
    background: #08090a;
    color: #f5f5f2;
}

* { box-sizing: border-box; }
body, h1, p { margin: 0; }

.hero {
    position: relative;
    isolation: isolate;
    height: 100vh;
    height: 100svh;
    min-height: 28rem;
    overflow: hidden;
}

.hero__media,
.hero__fallback,
.hero__video,
.hero::after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__media { z-index: -2; }

.hero__fallback,
.hero__video {
    object-fit: cover;
    object-position: center;
}

.hero__video { display: none; }

.hero::after {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 46%, transparent 22%, rgb(0 0 0 / 28%) 100%),
        linear-gradient(rgb(0 0 0 / 16%), rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 25%));
}

.metadata {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: clamp(0.75rem, 0.72vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.23em;
}

.hero__header {
    inset-block-start: max(4.5svh, env(safe-area-inset-top));
    inset-inline: 13%;
    color: #959699;
}

.hero__edition,
.hero__status,
.hero__location,
.hero__clock { white-space: nowrap; }

.separator { margin-inline: 0.6em; color: #535558; }

.hero__status {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 2.6vw, 3.5rem);
}

.menu-mark {
    display: grid;
    justify-items: end;
    gap: 6px;
    width: 28px;
}

.menu-mark::before,
.menu-mark::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #a0a1a3;
}

.menu-mark::after { width: 60%; }

.hero__identity {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    transform: translateY(-50%);
    text-align: center;
}

.hero__wordmark {
    font-size: clamp(6rem, 10.55vw, 22rem);
    font-weight: 700;
    line-height: 0.86;
    letter-spacing: -0.065em;
    padding-inline-end: 0.065em;
}

.hero__on {
    position: relative;
    display: inline-block;
    isolation: isolate;
    color: #f4f6fa;
    text-shadow: 0 0 2px rgb(225 236 255 / 65%),
        0 0 15px rgb(155 189 239 / 22%),
        0 0 42px rgb(124 162 217 / 10%);
}

/* Decorative slices only: the original ON never moves or disappears. */
.hero__on::before,
.hero__on::after {
    content: "ON";
    content: "ON" / "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    text-align: left;
    color: #dbe7f8;
    -webkit-text-stroke: 0.6px #c8dbf5;
    text-shadow: 0 0 4px rgb(173 204 247 / 60%);
    opacity: 0;
}

.hero__on::before { clip-path: inset(30% -4px 62%); }
.hero__on::after { clip-path: inset(62% -4px 29%); }

/* Ten-second cycle: 240 / 280 / 200 ms; only one narrow slice at a time. */
@media (prefers-reduced-motion: no-preference) {
    .hero__on { animation: on-signal-glow 10s ease-in-out infinite; }
    .hero__on::before { animation: on-signal-upper 10s steps(1, end) infinite; }
    .hero__on::after { animation: on-signal-lower 10s steps(1, end) infinite; }
}

@keyframes on-signal-upper {
    0%, 31.4%, 89%, 100% { opacity: 0; transform: translateX(0); }
    29% { opacity: 0.22; transform: translateX(-3.5px); }
    30.2% { opacity: 0.18; transform: translateX(2px); }
    87% { opacity: 0.18; transform: translateX(2.5px); }
    88% { opacity: 0.14; transform: translateX(-2px); }
}

@keyframes on-signal-lower {
    0%, 64.8%, 100% { opacity: 0; transform: translateX(0); }
    62% { opacity: 0.22; transform: translateX(3.5px); }
    63.4% { opacity: 0.18; transform: translateX(-2px); }
}

@keyframes on-signal-glow {
    0%, 62%, 63.5%, 100% {
        text-shadow: 0 0 2px rgb(225 236 255 / 65%),
            0 0 15px rgb(155 189 239 / 22%),
            0 0 42px rgb(124 162 217 / 10%);
    }
    62.25%, 63.25% {
        text-shadow: 0 0 2px rgb(225 236 255 / 90%),
            0 0 16px rgb(155 189 239 / 40%),
            0 0 42px rgb(124 162 217 / 18%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__on,
    .hero__on::before,
    .hero__on::after { animation: none; }

    .hero__on::before,
    .hero__on::after { content: none; }
}

.hero__caption {
    position: absolute;
    inset-block-start: calc(100% + clamp(1.75rem, 3vw, 4rem));
    inset-inline: 0;
}

.hero__tagline {
    color: #a6a8ab;
    font-size: clamp(0.75rem, 0.79vw, 1.25rem);
    line-height: 1.5;
    letter-spacing: 0.36em;
    padding-inline-start: 0.36em;
}

.hero__year {
    margin-block-start: 0.55rem;
    color: #797b80;
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.3em;
    padding-inline-start: 0.3em;
}

.hero__footer {
    inset-inline: 4.6%;
    inset-block-end: max(8svh, env(safe-area-inset-bottom));
    color: #828589;
    font-size: clamp(0.75rem, 0.65vw, 1rem);
}

.hero__clock { font-variant-numeric: tabular-nums; }

/* Keep this condition in sync with cueon.js. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .hero__video { display: block; }
}

@media (max-width: 767px) {
    .hero {
        --edge: 24px;
        min-height: 22rem;
    }

    .hero__header,
    .hero__footer {
        inset-inline-start: calc(var(--edge) + env(safe-area-inset-left));
        inset-inline-end: calc(var(--edge) + env(safe-area-inset-right));
        gap: 0.75rem;
        letter-spacing: 0.12em;
        font-size: 0.75rem;
    }

    .hero__header { inset-block-start: calc(var(--edge) + env(safe-area-inset-top)); }
    .hero__status { gap: 0.9rem; }
    .separator { margin-inline: 0.15em; }
    .menu-mark { width: 22px; gap: 5px; }

    .hero__identity {
        inset-inline-start: calc(var(--edge) + env(safe-area-inset-left));
        inset-inline-end: calc(var(--edge) + env(safe-area-inset-right));
    }

    .hero__wordmark { font-size: clamp(3.5rem, 18vw, 8.5rem); }
    .hero__caption { inset-block-start: calc(100% + 1.75rem); }

    .hero__tagline {
        font-size: clamp(0.6875rem, 2.7vw, 0.875rem);
        letter-spacing: 0.22em;
        padding-inline-start: 0.22em;
    }

    .hero__year { margin-block-start: 0.75rem; }

    .hero__footer {
        inset-block-end: calc(var(--edge) + env(safe-area-inset-bottom));
        align-items: baseline;
        flex-direction: row;
    }

    .hero__location-detail { display: none; }
}

@media (max-width: 359px) {
    .hero { --edge: 20px; }
    .hero__header { letter-spacing: 0.06em; }
    .hero__status { gap: 0.55rem; }
}

@media (max-height: 480px) and (min-width: 568px) {
    .hero { min-height: 20rem; }
    .hero__wordmark { font-size: min(14vw, 25svh); }
    .hero__caption { inset-block-start: calc(100% + 1rem); }
    .hero__footer { flex-direction: row; inset-block-end: max(20px, env(safe-area-inset-bottom)); }
}