.hero-orbits,
.orbit-star,
.starfall-layer,
.hero-twinkle-layer,
.hero-desktop-divider,
.hero-desktop-epigraph,
.site-home-tail,
.site-home-logo-star {
    display: none;
}

.jp-line { display: block; }

@media (min-width: 1024px) {
    .home-cover .site-top-nav {
        height: 70px;
        border-bottom-color: rgba(103, 84, 111, .11);
        background: rgba(250, 247, 249, .5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .home-cover .site-top-nav.is-scrolled {
        background: rgba(250, 247, 249, .8);
        box-shadow: none;
    }

    .home-cover .site-top-nav-inner {
        width: min(1440px, calc(100% - 72px));
        display: grid;
        grid-template-columns: minmax(120px, 1fr) auto minmax(150px, 1fr);
        gap: 30px;
    }

    .home-cover .site-top-logo {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        letter-spacing: 2px;
    }

    .home-cover .site-home-logo-star {
        display: inline;
        color: rgba(159, 122, 155, .58);
        font-size: 7px;
    }

    .home-cover .site-desktop-nav {
        justify-self: center;
        gap: 0;
    }

    .home-cover .site-desktop-nav a {
        min-width: 88px;
        justify-content: center;
        padding: 0 clamp(15px, 1.6vw, 25px);
        font-size: 8px;
        letter-spacing: 2.6px;
    }

    .home-cover .site-desktop-nav a + a {
        border-left: 1px solid rgba(105, 87, 113, .1);
    }

    .home-cover .site-home-tail {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(85, 74, 93, .43);
        font-size: 6px;
        line-height: 1.7;
        letter-spacing: 1.8px;
        white-space: nowrap;
    }

    .home-cover .site-home-tail-line {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: rgba(155, 119, 151, .52);
        font-size: 7px;
    }

    .home-cover .site-home-tail-line::after {
        content: "";
        width: clamp(24px, 3vw, 48px);
        border-top: 1px solid rgba(110, 91, 119, .16);
    }

    .home-cover .site-top-nav + .hero {
        height: calc(100svh - 70px);
        min-height: 680px;
        padding-top: 20px;
    }

    .home-cover .hero-bg .orbit {
        display: none;
    }

    .home-cover .hero-bg > .dust {
        display: none;
    }

    .home-cover .starfall-layer {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(ellipse 31% 27% at 50% 43%, rgba(0,0,0,.18), rgba(0,0,0,.62) 52%, #000 82%);
        mask-image: radial-gradient(ellipse 31% 27% at 50% 43%, rgba(0,0,0,.18), rgba(0,0,0,.62) 52%, #000 82%);
    }

    .home-cover .starfall-layer::before,
    .home-cover .starfall-layer::after {
        content: "";
        position: absolute;
        inset: -95% 0 0;
        background-repeat: repeat;
        will-change: transform, opacity;
    }

    .home-cover .starfall-layer::before {
        opacity: .42;
        background-image:
            radial-gradient(circle, rgba(126,105,148,.62) 0 .65px, transparent .95px),
            radial-gradient(circle, rgba(112,138,171,.48) 0 .8px, transparent 1.1px),
            radial-gradient(circle, rgba(181,143,111,.42) 0 .65px, transparent 1px),
            radial-gradient(circle, rgba(153,120,155,.45) 0 1px, transparent 1.3px);
        background-position: 17px 31px, 83px 121px, 151px 59px, 233px 177px;
        background-size: 137px 181px, 211px 257px, 293px 337px, 367px 421px;
        animation: heroFarStarFlow 38s linear -17s infinite;
    }

    .home-cover .starfall-layer::after {
        opacity: .3;
        background-image:
            radial-gradient(circle, rgba(255,255,255,.9) 0 .75px, rgba(139,112,155,.32) 1.1px, transparent 1.8px),
            radial-gradient(circle, rgba(255,255,255,.86) 0 .65px, rgba(111,137,173,.28) 1px, transparent 1.65px);
        background-position: 41px 73px, 186px 19px;
        background-size: 247px 313px, 359px 443px;
        animation: heroFarStarFlow 54s linear -39s infinite reverse;
    }

    .home-cover .starfall-layer i {
        position: absolute;
        top: -7%;
        left: var(--x);
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        opacity: 0;
        background: rgba(255, 254, 255, .92);
        box-shadow: 0 0 6px rgba(130, 110, 153, .48);
        animation: heroStarFall var(--fall-speed) linear var(--fall-delay) infinite;
        --fade-in: .26;
        --peak: .7;
        --fade-out: .32;
        will-change: transform, opacity;
    }

    .home-cover .starfall-layer i.is-far {
        --fade-in: .1;
        --peak: .3;
        --fade-out: .13;
        filter: blur(.15px);
    }

    .home-cover .starfall-layer i.is-bright {
        --fade-in: .35;
        --peak: .92;
        --fade-out: .44;
        box-shadow: 0 0 5px rgba(255,255,255,.9), 0 0 13px rgba(133,105,151,.48);
    }

    .home-cover .starfall-layer i.is-streak {
        --fade-in: .3;
        --peak: .86;
        --fade-out: .4;
    }

    .home-cover .starfall-layer i.has-tail::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: .7px;
        height: var(--tail);
        transform: translate(-50%, -2px);
        transform-origin: bottom;
        background: linear-gradient(to top, rgba(133, 114, 153, .25), transparent);
    }

    .home-cover .hero-twinkle-layer {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        pointer-events: none;
    }

    .home-cover .hero-twinkle-layer i {
        position: absolute;
        top: var(--y);
        left: var(--x);
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: rgba(117, 103, 143, .58);
        box-shadow: 0 0 6px rgba(255,255,255,.86);
        animation: heroTwinkle var(--twinkle-speed) ease-in-out var(--twinkle-delay) infinite;
    }

    .home-cover .hero-twinkle-layer i.is-static {
        opacity: .34;
        animation: none;
    }

    .home-cover .hero-twinkle-layer i.is-major {
        border-radius: 1px;
        background: rgba(255,255,255,.93);
        box-shadow: 0 0 6px rgba(255,255,255,.82), 0 0 15px rgba(141,109,151,.42);
        transform: rotate(45deg);
        animation-name: heroMajorStarBreathe;
    }

    .home-cover .hero-center {
        width: min(880px, 82vw);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .home-cover .hero-orbit-system {
        position: relative;
        order: 1;
        width: clamp(620px, 56vw, 760px);
        height: 300px;
        display: grid;
        place-items: center;
        isolation: isolate;
    }

    .home-cover .hero-orbit-parallax {
        position: absolute;
        inset: 0;
        z-index: 2;
        transform: translate3d(var(--orbit-parallax-x, 0), var(--orbit-parallax-y, 0), 0);
        transition: transform .42s cubic-bezier(.22,.8,.25,1);
        pointer-events: none;
    }

    .home-cover .hero-orbit-system::before {
        content: "";
        position: absolute;
        z-index: 1;
        width: 470px;
        height: 235px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(215, 195, 225, .2), rgba(226, 211, 234, .08) 35%, transparent 68%);
        animation: heroGlowBreathe 7.8s ease-in-out infinite alternate;
        pointer-events: none;
    }

    .home-cover .hero-orbits {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
        fill: none;
        pointer-events: none;
    }

    .home-cover .hero-orbits ellipse,
    .home-cover .hero-orbits path {
        vector-effect: non-scaling-stroke;
        stroke-width: .8px;
    }

    .home-cover .hero-orbits-back {
        z-index: 0;
        animation: heroOrbitSystemReveal 1.8s cubic-bezier(.22,.8,.25,1) .25s both;
    }

    .home-cover .orbit-runner circle {
        fill: rgba(255,255,255,.96);
        stroke: rgba(133,105,151,.72);
        stroke-width: .55px;
    }

    .home-cover .orbit-runner line {
        stroke: rgba(145,116,156,.26);
        stroke-width: .75px;
        stroke-linecap: round;
    }

    .home-cover .orbit-runner-small { opacity: .68; }
    .home-cover .orbit-runner-faint { opacity: .42; }
    .home-cover .orbit-runner-distant circle { fill: rgba(218,226,239,.9); stroke: rgba(112,137,170,.48); }

    .home-cover .hero-orbit-motion {
        transform-box: view-box;
        transform-origin: 360px 155px;
    }

    .home-cover .hero-orbit-main { animation: heroOrbitMainDrift 34s ease-in-out infinite alternate; }
    .home-cover .hero-orbit-inclined { animation: heroOrbitInclinedDrift 43s ease-in-out -12s infinite alternate; }
    .home-cover .hero-orbit-distant { animation: heroOrbitDistantDrift 56s ease-in-out -24s infinite alternate; }

    .home-cover .hero-orbit-system .hero-title {
        position: relative;
        z-index: 3;
        max-width: none;
        padding-left: .12em;
        color: #493e53;
        font-size: clamp(82px, 8vw, 116px);
        letter-spacing: .12em;
        text-shadow: 0 1px 0 rgba(255,255,255,.96), 0 0 25px rgba(255,255,255,.78), 0 14px 38px rgba(77,57,87,.14);
    }

    .home-cover .hero-orbit-system .hero-title.intro {
        opacity: 1;
        filter: none;
        animation: titleIntro 1.5s ease .8s backwards;
    }

    .home-cover .hero-orbit-system .star {
        position: absolute;
        top: 35px;
        left: 50%;
        z-index: 5;
        margin: 0;
        color: rgba(179, 149, 104, .74);
        font-size: 12px;
        transform: translateX(-50%);
    }

    .home-cover .hero-orbit-system .star.intro {
        animation: heroLoginStarReveal 1.15s cubic-bezier(.22,.8,.25,1) .3s both, heroLoginStarPulse 5.4s ease-in-out 1.6s infinite;
    }

    .home-cover .orbit-star {
        position: absolute;
        z-index: 4;
        display: block;
        color: rgba(135, 111, 146, .58);
        line-height: 1;
        text-shadow: 0 0 10px rgba(255,255,255,.9);
        animation: orbitStarBreathe 6s ease-in-out infinite;
        pointer-events: none;
    }

    .home-cover .orbit-star-1 { top: 31%; left: 11%; font-size: 10px; animation-duration: 6.4s; }
    .home-cover .orbit-star-2 { top: 17%; right: 24%; font-size: 7px; --travel-x:-16px; --travel-y:8px; animation: heroOrbitStarDrift 20s ease-in-out -7s infinite alternate; }
    .home-cover .orbit-star-3 { right: 7%; bottom: 34%; font-size: 5px; animation-duration: 4.9s; animation-delay: -3.4s; }
    .home-cover .orbit-star-5 { right: 29%; bottom: 13%; font-size: 8px; --travel-x:19px; --travel-y:-7px; animation: heroOrbitStarDrift 24s ease-in-out -14s infinite alternate-reverse; }

    .home-cover .hero-center .jp-text.intro {
        order: 2;
        margin: 19px 0 0;
        color: rgba(74, 62, 83, .76);
        font-size: 13px;
        line-height: 2.2;
        letter-spacing: 3.6px;
    }

    .home-cover .hero-center .subtitle {
        display: none;
    }

    .home-cover .hero-desktop-divider {
        order: 3;
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 24px;
        color: rgba(158, 122, 151, .56);
        opacity: 0;
        animation: heroQuietReveal 1s ease 2.28s forwards;
    }

    .home-cover .hero-desktop-divider span {
        width: 58px;
        border-top: 1px solid rgba(107, 88, 118, .18);
    }

    .home-cover .hero-desktop-divider b {
        font-size: 6px;
        font-weight: 400;
    }

    .home-cover .hero-desktop-epigraph {
        order: 4;
        display: block;
        margin: 14px 0 0;
        color: rgba(77, 67, 86, .5);
        font-size: 8px;
        line-height: 1.9;
        letter-spacing: 3.6px;
        opacity: 0;
        animation: heroQuietReveal 1s ease 2.45s forwards;
    }

    @keyframes heroOrbitSystemReveal {
        from { opacity: 0; transform: scale(.975); }
        to { opacity: 1; transform: scale(1); }
    }

    @keyframes heroOrbitMainDrift {
        from { opacity: .72; transform: translate3d(-3px, 1px, 0) rotate(-1.1deg) scale(.997); }
        to { opacity: 1; transform: translate3d(4px, -2px, 0) rotate(1.2deg) scale(1.006); }
    }

    @keyframes heroOrbitInclinedDrift {
        from { opacity: .62; transform: translate3d(2px, -3px, 0) rotate(1.7deg) scale(1.004); }
        to { opacity: .92; transform: translate3d(-3px, 3px, 0) rotate(-1.4deg) scale(.994); }
    }

    @keyframes heroOrbitDistantDrift {
        from { opacity: .3; transform: translate3d(-2px, -1px, 0) rotate(-.7deg) scale(1); }
        to { opacity: .58; transform: translate3d(3px, 2px, 0) rotate(.8deg) scale(1.009); }
    }

    @keyframes heroTitleReveal {
        from { opacity: 0; filter: blur(8px); transform: translateY(12px) scale(.985); letter-spacing: .17em; }
        to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); letter-spacing: .12em; }
    }

    @keyframes heroJapaneseReveal {
        from { opacity: 0; filter: blur(3px); transform: translateY(8px); letter-spacing: 5px; }
        to { opacity: 1; filter: blur(0); transform: translateY(0); letter-spacing: 3.6px; }
    }

    @keyframes heroLoginStarReveal {
        from { opacity: 0; filter: blur(4px); transform: translateX(-50%) translateY(6px) scale(.8); }
        to { opacity: .72; filter: blur(0); transform: translateX(-50%) translateY(0) scale(1); }
    }

    @keyframes heroLoginStarPulse {
        0%, 100% { opacity: .48; transform: translateX(-50%) scale(.92); }
        50% { opacity: .9; transform: translateX(-50%) scale(1.15); }
    }

    @keyframes heroStarFall {
        0% { opacity: 0; transform: translate3d(0, -8vh, 0) scale(.8); }
        13% { opacity: var(--fade-in); }
        46% { opacity: var(--peak); }
        82% { opacity: var(--fade-out); }
        100% { opacity: 0; transform: translate3d(var(--drift), 112vh, 0) scale(1); }
    }

    @keyframes heroFarStarFlow {
        from { transform: translate3d(0, -7%, 0); }
        to { transform: translate3d(-16px, 58%, 0); }
    }

    @keyframes heroTwinkle {
        0%, 100% { opacity: .25; transform: translate3d(-1px, 1px, 0) scale(.8); }
        48% { opacity: .8; transform: translate3d(2px, -3px, 0) scale(1.15); }
        74% { opacity: .35; transform: translate3d(1px, -1px, 0) scale(.9); }
    }

    @keyframes heroMajorStarBreathe {
        0%, 100% { opacity: .34; transform: rotate(45deg) scale(.82); }
        50% { opacity: .88; transform: rotate(45deg) scale(1.16); }
    }

    @keyframes heroGlowBreathe {
        from { opacity: .35; transform: scale(.96); }
        to { opacity: .55; transform: scale(1.04); }
    }

    @keyframes orbitStarBreathe {
        0%, 100% { opacity: .35; transform: scale(.88); }
        50% { opacity: .82; transform: scale(1.08); }
    }

    @keyframes heroOrbitStarDrift {
        from { opacity: .38; transform: translate3d(0, 0, 0) scale(.9); }
        to { opacity: .76; transform: translate3d(var(--travel-x), var(--travel-y), 0) scale(1.08); }
    }

    @keyframes heroQuietReveal {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .home-cover .hero-orbit-motion,
    .home-cover .hero-orbits-back,
    .home-cover .hero-orbit-system::before,
    .home-cover .hero-orbit-system .hero-title.intro,
    .home-cover .hero-orbit-system .star.intro,
    .home-cover .orbit-runner,
    .home-cover .hero-center .jp-line,
    .home-cover .hero-desktop-divider,
    .home-cover .hero-desktop-epigraph,
    .home-cover .starfall-layer i,
    .home-cover .hero-twinkle-layer i,
    .home-cover .orbit-star {
        animation: none !important;
    }

    .home-cover .hero-orbit-system .hero-title.intro,
    .home-cover .hero-orbit-system .star.intro,
    .home-cover .hero-center .jp-line,
    .home-cover .hero-desktop-divider,
    .home-cover .hero-desktop-epigraph {
        opacity: 1;
        filter: none;
        transform: none;
    }

    .home-cover .hero-orbit-system .star.intro {
        opacity: .65;
        filter: none;
        transform: translateX(-50%);
    }

    .home-cover .hero-orbit-system::before { opacity: .42; }
    .home-cover .hero-twinkle-layer i:not(.is-static) { opacity: .35; transform: none; }
    .home-cover .orbit-runner { display: none; }

    .home-cover .starfall-layer { display: none; }
}