html, body {
    width: 100%;
    min-height: 100vh;
    background: var(--landing-color-bg);
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--landing-color-text-primary);
    transition: background-color 1800ms cubic-bezier(0.22, 1, 0.36, 1), color 1800ms cubic-bezier(0.22, 1, 0.36, 1);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: var(--landing-screen-grid);
    opacity: 0.28;
    transition: opacity 1800ms ease, background 1800ms ease, transform 1800ms ease, filter 1800ms ease;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: var(--landing-screen-vignette);
    transition: opacity 1800ms ease, background 1800ms ease;
}

.intro {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: var(--landing-intro-background);
    transition: background 1800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.intro::before {
    content: "";
    position: absolute;
    inset: -20% 0;
    pointer-events: none;
    z-index: 1;
    background: var(--landing-intro-sweep);
    opacity: 0.2;
    animation: crt-sweep 8.4s linear infinite;
    transition: opacity 1800ms ease;
}

.intro::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: var(--landing-intro-flicker);
    opacity: 0.45;
    animation: screen-flicker 6s linear infinite;
    transition: opacity 1800ms ease, background 1800ms ease;
}

.intro-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform: translateY(-100%);
    will-change: transform;
    transition: opacity 500ms ease, transform 500ms ease;
}

.typing {
    position: relative;
    display: inline-block;
    color: var(--landing-color-text-primary);
    font-size: 56px;
    font-family: var(--font-base);
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-shadow: var(--landing-hero-glow);
    will-change: transform, opacity;
    transition: color 1800ms ease, text-shadow 1800ms ease;
}

#site {
    display: inline-block;
    position: relative;
    min-height: 1em;
    white-space: pre;
}

#site::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: inherit;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 48% 0);
    text-shadow: var(--landing-hero-glitch-glow);
    transition: opacity 200ms ease;
}

#site.glitch-split::before {
    opacity: 0.9;
    animation: split-glitch-top 150ms steps(2, end) 1;
}

.cursor {
    position: absolute;
    top: 0;
    left: 100%;
    display: block;
    width: 12px;
    height: 1em;
    margin-left: 8px;
    background: var(--landing-color-text-primary);
    box-shadow: var(--landing-cursor-glow);
    animation: blink 1.5s steps(1, end) infinite;
    transition: background-color 1800ms ease, box-shadow 1800ms ease;
}

.loading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14ch;
    min-height: 46px;
    color: var(--landing-color-text-secondary);
    font-size: 24px;
    font-family: var(--font-base);
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-align: center;
    text-shadow: var(--landing-loading-glow);
    will-change: transform, opacity;
    transition: color 1800ms ease, text-shadow 1800ms ease;
}

#loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading.ready #loading {
    opacity: 0;
    pointer-events: none;
}

.start-button {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    box-sizing: border-box;
    width: max-content;
    height: 100%;
    background: transparent;
    color: inherit;
    font-family: var(--font-base);
    font-size: clamp(22px, 4vw, 30px);
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px);
    pointer-events: none;
    text-shadow: var(--landing-start-glow);
    transition:
        opacity 420ms ease,
        transform 420ms ease,
        text-shadow 220ms ease,
        letter-spacing 220ms ease;
}

.start-button::before,
.start-button::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--landing-color-pixel);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.45);
    transition: opacity 180ms ease, transform 180ms ease;
}

.start-button::before {
    top: -5px;
    left: -5px;
    box-shadow: var(--landing-pixel-shadow);
}

.start-button::after {
    right: -5px;
    bottom: -5px;
    box-shadow: var(--landing-pixel-shadow);
}

.start-button-label {
    position: relative;
    display: inline-block;
    color: inherit;
    font-family: var(--font-base);
    text-shadow: var(--landing-start-label-glow);
}

.start-button-label::before,
.start-button-label::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
}

.start-button-label::before {
    clip-path: inset(0 0 52% 0);
    text-shadow: var(--landing-start-glitch-top);
    animation: start-glitch-top 2.1s steps(2, end) infinite;
}

.start-button-label::after {
    clip-path: inset(54% 0 0 0);
    text-shadow: var(--landing-start-glitch-bottom);
    animation: start-glitch-bottom 2.45s steps(2, end) infinite;
}

body.start-hover-enabled .start-button:hover {
    outline: none;
    letter-spacing: 0.14em;
    text-shadow: var(--landing-start-hover-glow);
}

body.start-hover-enabled .start-button:hover::before,
body.start-hover-enabled .start-button:hover::after,
.start-button.tap-hover-active::before,
.start-button.tap-hover-active::after {
    opacity: 1;
    animation: pixel-star-twinkle 560ms steps(2, end) infinite;
}

body.start-hover-enabled .start-button:hover::before,
.start-button.tap-hover-active::before {
    transform: scale(1);
}

body.start-hover-enabled .start-button:hover::after,
.start-button.tap-hover-active::after {
    transform: scale(1);
}

body.start-hover-enabled .start-button:hover,
.start-button.tap-hover-active {
    outline: none;
    letter-spacing: 0.14em;
    text-shadow: var(--landing-start-hover-glow);
}

.loading.ready .start-button {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.loading.language-mode .start-button {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-8px);
    pointer-events: none;
}

.language-picker {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px);
    pointer-events: none;
    transition: opacity 280ms ease, transform 280ms ease;
}

.loading.language-mode .language-picker {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.language-option,
.language-divider {
    font-family: var(--font-base);
    font-size: clamp(20px, 3.8vw, 28px);
    line-height: 1;
    letter-spacing: 0.08em;
}

.language-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0 16px;
    min-height: 46px;
    box-sizing: border-box;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-transform: uppercase;
    text-shadow: var(--landing-language-glow);
    transition: opacity 180ms ease, letter-spacing 180ms ease, text-shadow 180ms ease;
}

.language-option::before,
.language-option::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--landing-color-pixel);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.45);
    transition: opacity 180ms ease, transform 180ms ease;
}

.language-option::before {
    top: -5px;
    right: -5px;
    box-shadow: var(--landing-pixel-shadow);
}

.language-option::after {
    left: -5px;
    bottom: -5px;
    box-shadow: var(--landing-pixel-shadow);
}

.language-divider {
    color: var(--landing-color-divider);
}

.language-option:hover,
.language-option:focus-visible {
    outline: none;
    letter-spacing: 0.14em;
    text-shadow: var(--landing-language-hover-glow);
}

.language-option:hover::before,
.language-option:hover::after,
.language-option.tap-hover-active::before,
.language-option.tap-hover-active::after,
.language-option:focus-visible::before,
.language-option:focus-visible::after {
    opacity: 1;
    transform: scale(1);
    animation: pixel-star-twinkle 560ms steps(2, end) infinite;
}

.language-option.tap-hover-active {
    outline: none;
    letter-spacing: 0.14em;
    text-shadow: var(--landing-language-hover-glow);
}

.content {
    position: fixed;
    inset: 0;
    z-index: 1;
    min-height: 100vh;
    opacity: 0;
    pointer-events: none;
    background: var(--landing-paper-gradient);
    transition: opacity 500ms ease;
}

.media-link {
    position: fixed;
    left: 50%;
    bottom: 42px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    color: var(--color-accent);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
    text-shadow: var(--landing-media-link-glow);
    transition:
        opacity 700ms ease,
        transform 700ms ease,
        color 1200ms ease,
        text-shadow 1200ms ease;
}

.media-link:hover,
.media-link:focus-visible {
    transform: translateX(-50%) translateY(-2px);
}

.media-link-jp {
    display: inline-block;
    font-family: var(--font-japanese);
    line-height: 1;
    text-transform: none;
    transform: translateY(-10px);
    animation: media-link-glitch 1.9s steps(3, end) infinite;
    will-change: transform, opacity;
}

.media-link:hover .media-link-jp,
.media-link:focus-visible .media-link-jp {
    animation-duration: 950ms;
}

body.media-link-visible .media-link {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

body.intro-ready .cursor,
body.site-active .cursor {
    opacity: 0;
    animation: none;
}

body.site-active .media-link {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

body.photo-mode .media-link {
    color: var(--color-accent);
    text-shadow: var(--landing-media-link-photo-glow);
}

body:not(.photo-mode) .media-link {
    text-shadow: var(--landing-media-link-active-glow);
}

@media (max-width: 768px) {
    .loading {
        min-width: 12ch;
        min-height: 40px;
    }

    .language-picker {
        gap: 8px;
    }

    .language-option {
        min-height: 40px;
    }

    .media-link {
        bottom: 30px;
        font-size: 16px;
        letter-spacing: 0.06em;
        padding: 6px 10px;
    }

    .media-link-jp {
        transform: translateY(-6px);
    }
}

body.photo-mode {
    background: var(--landing-paper-bg);
    color: var(--landing-paper-text);
}

body.photo-mode::before {
    background: var(--landing-photo-noise);
    background-size: 130px 130px, 165px 165px, 95px 95px, 145px 145px, 26px 26px, 32px 32px, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    opacity: 0.98;
    transform: scale(1.08);
    filter: contrast(1.08) brightness(1.02);
    animation: digital-noise 220ms steps(2, end) infinite, photo-grain-drift 1.35s steps(5, end) infinite;
}

body.photo-mode::after {
    background: var(--landing-photo-vignette);
    opacity: 0.9;
}

body.photo-mode .intro {
    background: var(--landing-paper-gradient);
}

body.photo-mode .intro::before,
body.photo-mode .intro::after {
    opacity: 0;
    animation: none;
}

body.photo-mode .typing,
body.photo-mode .loading {
    color: var(--landing-paper-text);
    text-shadow: var(--landing-photo-text-glow);
}

body.photo-mode #site::before {
    content: attr(data-text);
    text-shadow: none;
    mix-blend-mode: multiply;
}

body.photo-mode #site.photo-glitch-split::before {
    opacity: 0.88;
    animation: photo-split-glitch-top 210ms steps(3, end) 1;
}

body.photo-mode .cursor {
    background: var(--landing-paper-text);
    box-shadow: var(--landing-photo-cursor-outline);
}

body.photo-mode .content {
    background: var(--landing-paper-bg);
}

body.site-active {
    background: var(--landing-paper-bg);
    color: var(--landing-paper-text);
}

body.site-active::before,
body.site-active::after,
body.site-active .intro::before,
body.site-active .intro::after {
    opacity: 0;
    animation: none;
}

body.site-active .intro {
    background: transparent;
}

body.site-active .intro-content {
    opacity: 0;
    transform: translateY(-92%) scale(0.98);
    pointer-events: none;
}

body.site-active .content {
    opacity: 1;
    pointer-events: auto;
    background: var(--landing-paper-gradient);
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}

@keyframes crt-sweep {
    0% {
        transform: translateY(-60%);
    }
    100% {
        transform: translateY(60%);
    }
}

@keyframes screen-flicker {
    0%, 96%, 100% {
        opacity: 0.45;
    }
    97% {
        opacity: 0.25;
    }
    98% {
        opacity: 0.5;
    }
    99% {
        opacity: 0.32;
    }
}

@keyframes split-glitch-top {
    0% {
        transform: translateX(0);
    }
    12% {
        transform: translateX(-16px);
    }
    24% {
        transform: translateX(11px);
    }
    38% {
        transform: translateX(-13px);
    }
    52% {
        transform: translateX(9px);
    }
    68% {
        transform: translateX(-8px);
    }
    82% {
        transform: translateX(4px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes start-glitch-top {
    0%, 74%, 100% {
        transform: translateX(0);
        opacity: 0;
    }
    76% {
        transform: translateX(-4px);
        opacity: 0.88;
    }
    82% {
        transform: translateX(3px);
        opacity: 0.6;
    }
    88% {
        transform: translateX(-2px);
        opacity: 0.8;
    }
}

@keyframes start-glitch-bottom {
    0%, 78%, 100% {
        transform: translateX(0);
        opacity: 0;
    }
    80% {
        transform: translateX(4px);
        opacity: 0.74;
    }
    86% {
        transform: translateX(-3px);
        opacity: 0.56;
    }
    91% {
        transform: translateX(2px);
        opacity: 0.68;
    }
}

@keyframes pixel-star-twinkle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@keyframes photo-split-glitch-top {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    18% {
        transform: translateX(-9px);
        opacity: 0.9;
    }
    34% {
        transform: translateX(7px);
        opacity: 0.72;
    }
    51% {
        transform: translateX(-6px);
        opacity: 0.85;
    }
    76% {
        transform: translateX(4px);
        opacity: 0.58;
    }
    100% {
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes digital-noise {
    0% {
        transform: translate3d(-0.5%, -0.6%, 0) scale(1.08);
        filter: contrast(1.03) brightness(1.01);
    }
    25% {
        transform: translate3d(0.3%, 0.4%, 0) scale(1.1);
        filter: contrast(0.98) brightness(1.04);
    }
    50% {
        transform: translate3d(-0.2%, 0.2%, 0) scale(1.09);
        filter: contrast(1.04) brightness(0.99);
    }
    75% {
        transform: translate3d(0.45%, -0.3%, 0) scale(1.11);
        filter: contrast(1.01) brightness(1.02);
    }
    100% {
        transform: translate3d(-0.4%, 0.1%, 0) scale(1.08);
        filter: contrast(1.03) brightness(1.01);
    }
}

@keyframes photo-grain-drift {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    20% {
        background-position: -9px 5px, 8px -6px, -5px 7px, 7px 3px, 2px -1px, -3px 2px, 0 0;
    }
    40% {
        background-position: 6px -7px, -10px 4px, 4px -6px, -8px -2px, -2px 3px, 2px -2px, 0 0;
    }
    60% {
        background-position: -4px 8px, 6px 6px, -8px -3px, 5px -7px, 3px 1px, -2px -3px, 0 0;
    }
    80% {
        background-position: 10px -3px, -7px -8px, 7px 5px, -4px 8px, -1px -2px, 3px 2px, 0 0;
    }
    100% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
}

@keyframes media-link-glitch {
    0%, 74%, 100% {
        transform: translateY(-10px) translateX(0);
        opacity: 1;
    }
    76% {
        transform: translateY(-10px) translateX(-2px);
        opacity: 0.88;
    }
    80% {
        transform: translateY(-9px) translateX(1.5px);
        opacity: 1;
    }
    84% {
        transform: translateY(-11px) translateX(-1px);
        opacity: 0.9;
    }
    89% {
        transform: translateY(-10px) translateX(2px);
        opacity: 0.96;
    }
    94% {
        transform: translateY(-11px) translateX(-0.5px);
        opacity: 1;
    }
}