/* Landing motion only; the original toolkit controls keep their own styles. */
:root { --font-modern: 'Space Grotesk', Arial, Helvetica, sans-serif; }
html { background: #05010c; }
body.at-home { margin: 0; background: #05010c; color: #e8dcff; overflow-x: hidden; }
/* Keep the tracker's negative-z background above the page's opaque body. */
#toolkitView { position: relative; isolation: isolate; }
.landing-view, .landing-view * { box-sizing: border-box; }
[hidden] { display: none !important; }
.landing-view {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    min-height: 100svh;
    padding: 40px 24px;
    overflow: hidden;
    box-sizing: border-box;
    background: #05010c;
}
.landing-background {
    position: absolute;
    inset: -5%;
    z-index: -2;
    pointer-events: none;
    background-image:
        url('../assets/background/Background.png'),
        radial-gradient(circle at 20% 10%, #1b0733 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, #2a0a4a 0%, transparent 50%),
        linear-gradient(160deg, #05010c 0%, #0b0116 40%, #170025 100%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: .22;
    transform: translate3d(var(--landing-x, 0px), var(--landing-y, 0px), 0);
    transition: transform .65s ease-out, opacity .8s ease;
}
.landing-vignette {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, transparent 30%, #05010c1a 70%, #05010c4d 100%);
}
.landing-content { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; text-align: center; padding-bottom: 24px; }
.landing-brand { position: relative; margin: 0 0 36px; width: 100%; font-weight: 700; }
.landing-divider {
    position: absolute;
    left: 50%;
    bottom: -22px;
    width: min(360px, 76%);
    height: 9px;
    margin: 0;
    translate: -50% 0;
    pointer-events: none;
}
.landing-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, transparent, #bc94da99 30%, #f0dcffbf),
        linear-gradient(90deg, #f0dcffbf, #bc94da99 70%, transparent),
        linear-gradient(90deg, transparent, #bc94da66),
        linear-gradient(90deg, #bc94da66, transparent);
    background-size: calc(50% - 15px) 1px, calc(50% - 15px) 1px, calc(36% - 15px) 1px, calc(36% - 15px) 1px;
    background-position: left center, right center, 14% bottom, 86% bottom;
    background-repeat: no-repeat;
}
.landing-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border: 1px solid #e2c7f6bf;
    border-radius: 0 !important;
    background: #bc94da26;
    transform: translate(-50%, -50%) rotate(45deg);
}
.intro-pending .landing-divider,
.landing-view:is([data-intro-state='waiting'], [data-intro-state='playing'], [data-intro-state='assembled']) .landing-divider { visibility: hidden; }
.landing-view[data-intro-state='revealing'] .landing-divider { animation: divider-reveal .85s cubic-bezier(.22,1.1,.4,1) both; }
@keyframes divider-reveal {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}
.landing-logo-stage { display: block; position: relative; width: min(440px, 100%); margin: 0 auto; }
.landing-logo { display: block; width: 100%; height: auto; margin: 0; }
.logo-slices { position: absolute; inset: 0; display: none; pointer-events: none; }
.intro-piece {
    position: absolute;
    width: 20%;
    top: 0;
    height: 100%;
    border-radius: 0 !important;
    background-image: url('../assets/branding/Nullscape.png');
    background-size: 500% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translate(var(--piece-x, 0px), var(--piece-y, 0px)) rotate(var(--piece-r, 0deg)) scale(var(--piece-s, 1));
    filter: blur(var(--piece-blur, 0px));
    transition: transform .42s cubic-bezier(.22,1.15,.36,1), filter .3s ease-out, opacity .15s ease;
    will-change: transform, filter;
}
.intro-pending .landing-view,
.landing-view[data-intro-state='waiting'],
.landing-view[data-intro-state='playing'],
.landing-view[data-intro-state='assembled'] { background: #000; }
.intro-pending .landing-background,
.landing-view:is([data-intro-state='waiting'],[data-intro-state='playing'],[data-intro-state='assembled']) .landing-background { opacity: 0; }
.intro-pending .landing-vignette,
.landing-view:is([data-intro-state='waiting'],[data-intro-state='playing'],[data-intro-state='assembled']) .landing-vignette { visibility: hidden; }
.intro-pending .landing-brand { visibility: hidden; }
.landing-view:is([data-intro-state='waiting'],[data-intro-state='playing'],[data-intro-state='assembled']) .landing-brand { transform: translateY(var(--intro-lift, 110px)); }
.landing-view[data-intro-state='revealing'] .landing-brand { transform: none; transition: transform 1s cubic-bezier(.22,1.1,.4,1); }
.landing-view:is([data-intro-state='waiting'],[data-intro-state='playing']) .landing-logo { opacity: 0; }
.landing-view[data-intro-state='playing'] .logo-slices { display: block; }
.intro-pending .landing-features-viewport,
.intro-pending .continue-button,
.landing-view:is([data-intro-state='waiting'],[data-intro-state='playing'],[data-intro-state='assembled']) :is(.landing-features-viewport,.continue-button) { visibility: hidden; opacity: 0; pointer-events: none; }
.landing-view[data-intro-state='revealing'] .landing-feature-tag { animation: intro-controls .5s ease both; animation-delay: calc(.2s + var(--tag-index) * .08s); }
.landing-view[data-intro-state='revealing'] .continue-button { animation: intro-controls .55s ease .65s both; }
@keyframes intro-controls { from { opacity: 0; transform: translateY(10px); } to { opacity: var(--tag-opacity, 1); transform: none; } }
.landing-features {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;

    width: 100%;
    margin: 0;
}

.landing-feature-tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 6px;

    padding: 12px 8px;

    border-radius: 999px;

    font-family: var(--font-modern);
    font-size: clamp(8px, 1.25vw, 11px);
    font-weight: 700;
    letter-spacing: clamp(.35px, .08vw, .8px);
    white-space: nowrap;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}





/* Each tag gets one color, in a single-hue gradient. */
.landing-feature-tag { color: #fff; text-shadow: none; }
.landing-feature-tag--curses {
    background: linear-gradient(135deg, #5a2a8a 0%, #9a56e0 100%);
    border: 1px solid rgba(216, 155, 255, .5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 10px rgba(184, 102, 255, .22);
}
.landing-feature-tag--upgrades {
    background: linear-gradient(135deg, #1d5a94 0%, #4aa8e8 100%);
    border: 1px solid rgba(143, 217, 255, .5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 10px rgba(74, 168, 232, .22);
}
.landing-feature-tag--deaths {
    background: linear-gradient(135deg, #781010 0%, #d02a2a 100%);
    border: 1px solid rgba(255, 157, 157, .5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 10px rgba(208, 42, 42, .22);
}
.landing-feature-tag--altars {
    background: linear-gradient(135deg, #38383e 0%, #8a8a92 100%);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 10px rgba(255, 255, 255, .12);
    opacity: .75;
}
.landing-feature-tag--lobby {
    background: linear-gradient(135deg, #6a563a 0%, #a98c5f 100%);
    border: 1px solid rgba(216, 195, 165, .55);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 10px rgba(216, 195, 165, .18);
}
.landing-features-viewport {
    width: 100%;
    min-width: 0;
    max-width: 1050px;
    margin-bottom: 28px;
    padding: 10px 0 14px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #76518f #100719;
    overscroll-behavior-x: contain;
}
.landing-features { padding: 0; list-style: none; }
.landing-view .landing-feature-tag { border-radius: 999px !important; }
.landing-feature-tag--altars { --tag-opacity: .75; }
.landing-view .continue-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 146px;
    min-height: 46px;
    padding: 12px 40px;
    border: 1px solid #f0dcff;
    border-radius: 2px !important;
    background: linear-gradient(135deg, #c99bee 0%, #e2c7f6 50%, #f8eefe 100%);
    color: #261037;
    box-shadow: inset 0 1px 0 #ffffff80, inset 0 -2px 0 #76429126, 0 6px 18px #00000040;
    text-decoration: none;
    font: 700 13px/1.4 var(--font-modern);
    letter-spacing: .7px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.landing-view .continue-button:hover { transform: translateY(-1px); border-color: #fff7ff; box-shadow: inset 0 1px 0 #ffffffcc, inset 0 -2px 0 #76429126, 0 8px 22px #00000055; }
.landing-view .continue-button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px #76429133; }
.landing-features-viewport:focus-visible { outline: 1px solid #bc94da; outline-offset: 4px; }
.landing-view a:focus-visible, .landing-view button:focus-visible { outline: 2px solid #f0dcff; outline-offset: 6px; }
.landing-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.landing-error { margin: 20px 0 0; color: #e8dcff; font: 13px/1.5 Arial, sans-serif; }
.landing-error p { margin: 0 0 8px; }
.landing-error button { padding: 6px 12px; border: 1px solid #b866ff; background: #1b0a2d; color: #e8dcff; cursor: pointer; }
body.at-home > :not(.landing-view):not(script) { display: none !important; }
@media (max-width: 540px) {
    .landing-view { padding: 32px 24px; }
    .landing-logo-stage { max-width: 340px; }
    .landing-brand { margin-bottom: 30px; }
}
@media (max-width: 640px) {
    .landing-features { min-width: 700px; }
    .landing-feature-tag { font-size: 10px; letter-spacing: .6px; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-view *, .landing-view *::before, .landing-view *::after { animation: none !important; transition: none !important; }
    .landing-background, .landing-brand { transform: none !important; }
}

/* Click-to-enter gate */
.landing-view .intro-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    font: 400 14px/1 var(--font-modern);
    letter-spacing: .4em;
    text-transform: lowercase;
    cursor: pointer;
    transition: opacity .6s ease;
}
.landing-view .intro-gate:focus-visible { outline: none; }
.intro-gate span { animation: gate-pulse 2.6s ease-in-out infinite; }
.intro-gate.is-leaving { opacity: 0; pointer-events: none; }
@keyframes gate-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Floaty idle motion once the intro is done */
.landing-view[data-intro-state='done'] .landing-logo-stage {
    animation: logo-sway 9s ease-in-out infinite, logo-bob 5.5s ease-in-out infinite;
    will-change: transform, translate, rotate;
}
@keyframes logo-sway {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: 7px 0; rotate: .9deg; }
    75% { translate: -7px 0; rotate: -.9deg; }
}
@keyframes logo-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
.landing-view[data-intro-state='done'] .landing-feature-tag {
    animation: tag-float 5s ease-in-out infinite;
    animation-delay: calc(var(--tag-index, 0) * -.7s);
}
@keyframes tag-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

/* Subtle logo intro */
.intro-piece.landed { animation: piece-flash .6s ease-out; }
@keyframes piece-flash {
    0% { filter: brightness(1.45) drop-shadow(0 0 8px rgba(216,155,255,.6)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
.logo-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50% !important;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(226,184,255,.6) 0%, rgba(184,102,255,.25) 40%, transparent 70%);
    mix-blend-mode: screen;
}
.logo-burst.final { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
.logo-burst.hit { animation: logo-burst .7s ease-out; }
@keyframes logo-burst {
    0% { opacity: .7; transform: scale(.4); }
    100% { opacity: 0; transform: scale(1.5); }
}
.landing-logo-stage.thump { animation: logo-thump .35s ease-out; }
@keyframes logo-thump {
    0% { translate: 0 0; }
    30% { translate: 0 2px; }
    60% { translate: 0 -1px; }
    100% { translate: 0 0; }
}
.landing-view:is([data-intro-state='assembled'], [data-intro-state='revealing']) .landing-logo { animation: logo-snap .9s ease-out; }
@keyframes logo-snap {
    0% { filter: brightness(1.35) drop-shadow(0 0 12px rgba(216,155,255,.6)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
/* Light sweep clipped to the logo's own shape */
.logo-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: url('../assets/branding/Nullscape.png');
    mask-image: url('../assets/branding/Nullscape.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
}
.landing-view[data-intro-state='revealing'] .logo-shine { animation: logo-shine 1.2s ease-out .1s both; }
.landing-view[data-intro-state='done'] .logo-shine { animation: logo-shine-loop 10s ease-in-out 2s infinite; }
@keyframes logo-shine {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}
@keyframes logo-shine-loop {
    0% { background-position: 150% 0; }
    16%, 100% { background-position: -50% 0; }
}

/* Credit, bottom right */
.landing-credit {
    position: absolute;
    right: 16px;
    bottom: 12px;
    z-index: 1;
    font: 500 11px/1 var(--font-modern);
    letter-spacing: .08em;
    color: rgba(232, 220, 255, .45);
    text-decoration: none;
    transition: color .2s ease, opacity .6s ease;
}
a.landing-credit:hover { color: rgba(232, 220, 255, .9); }
.landing-view:is([data-intro-state='waiting'], [data-intro-state='playing'], [data-intro-state='assembled']) .landing-credit { opacity: 0; }

.landing-view {
    --checker-dark: #76429122;
    --checker-glow: #e2c7f61f;
    --vine-stroke: %23bc94da;
    /* Vine growing in from the left, and its mirror for the right */
    --vine-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64' fill='none' stroke='%23bc94da' stroke-width='1.6' stroke-linecap='round'><path d='M36 60C14 58 8 46 18 38S30 26 20 16 12 6 14 2'/><path d='M18 38l-8-2M20 16l9-3M17 47l-7 4'/><path d='M10 36c-3-4 0-7 4-6-1 3-2 5-4 6zM29 13c0-4 4-5 6-3-1 3-3 4-6 3zM10 51c-3-3-1-7 3-6 0 3-1 5-3 6z' fill='%23bc94da' fill-opacity='.55'/><rect x='33' y='57' width='5' height='5' transform='rotate(45 35.5 59.5)' fill='%23f0dcff' stroke='none'/></svg>");
    --vine-r: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64' fill='none' stroke='%23bc94da' stroke-width='1.6' stroke-linecap='round'><g transform='matrix(-1 0 0 1 40 0)'><path d='M36 60C14 58 8 46 18 38S30 26 20 16 12 6 14 2'/><path d='M18 38l-8-2M20 16l9-3M17 47l-7 4'/><path d='M10 36c-3-4 0-7 4-6-1 3-2 5-4 6zM29 13c0-4 4-5 6-3-1 3-3 4-6 3zM10 51c-3-3-1-7 3-6 0 3-1 5-3 6z' fill='%23bc94da' fill-opacity='.55'/><rect x='33' y='57' width='5' height='5' transform='rotate(45 35.5 59.5)' fill='%23f0dcff' stroke='none'/></g></svg>");
}
 
/* ---------- Continue button ---------- */
.landing-view .continue-button {
    position: relative;
    isolation: isolate;
    overflow: visible;
    min-width: 180px;
    min-height: 52px;
    padding: 14px 52px;
    border: 1px solid #f0dcff;
    border-radius: 0 !important;
    color: #1d0a2c;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    /* shine layer on top of the original lilac gradient */
    background:
        linear-gradient(105deg, transparent 40%, #ffffff8c 50%, transparent 60%) -160% 0 / 250% 100% no-repeat,
        linear-gradient(135deg, #c99bee 0%, #e2c7f6 50%, #f8eefe 100%);
    box-shadow:
        inset 0 1px 0 #ffffff99,
        inset 0 -2px 0 #76429133,
        0 0 0 3px #05010c,
        0 0 0 4px #bc94da80,
        0 8px 26px #00000066,
        0 0 26px #b866ff40;
    transition: transform .22s ease, box-shadow .3s ease, border-color .2s ease, background-position .9s ease;
    animation: btn-void-pulse 4.2s ease-in-out infinite;
}
 
/* Checkerboard inlay with a thin inner frame */
.landing-view .continue-button::before {
    content: '';
    position: absolute;
    inset: 4px;
    z-index: -1;
    pointer-events: none;
    border: 1px solid #3a1a5a59;
    background:
        repeating-conic-gradient(var(--checker-dark) 0 25%, transparent 0 50%) 0 0 / 14px 14px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #0000 28%, #0000 72%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0, #0000 28%, #0000 72%, #000 100%);
    transition: background-position 1.2s linear;
}
 
/* Vines creeping out of both sides, plus corner studs */
.landing-view .continue-button::after {
    content: '';
    position: absolute;
    inset: -9px -40px;
    z-index: -2;
    pointer-events: none;
    background:
        var(--vine-l) left center / auto 100% no-repeat,
        var(--vine-r) right center / auto 100% no-repeat;
    opacity: .7;
    transform: scaleX(.9);
    filter: drop-shadow(0 0 4px #b866ff80);
    transition: transform .5s cubic-bezier(.22,1.1,.4,1), opacity .4s ease, filter .4s ease;
}
 
.landing-view .continue-button:hover,
.landing-view .continue-button:focus-visible {
    transform: translateY(-2px);
    border-color: #fff7ff;
    background-position: 160% 0, 0 0;
    box-shadow:
        inset 0 1px 0 #ffffffcc,
        inset 0 -2px 0 #76429133,
        0 0 0 3px #05010c,
        0 0 0 4px #e2c7f6cc,
        0 12px 30px #00000070,
        0 0 42px #b866ff80;
}
.landing-view .continue-button:hover::before,
.landing-view .continue-button:focus-visible::before { background-position: 28px 14px; }
.landing-view .continue-button:hover::after,
.landing-view .continue-button:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
    filter: drop-shadow(0 0 8px #d89bffcc);
}
.landing-view .continue-button:active { transform: translateY(1px); }
 
@keyframes btn-void-pulse {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 8px #b866ff55); }
}
 
/* ---------- Feature tags: gem-cut, checkered, studded ---------- */
.landing-view .landing-feature-tag {
    --tag-checker: repeating-conic-gradient(#ffffff17 0 25%, transparent 0 50%) 0 0 / 10px 10px;
    position: relative;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 0 !important;
    /* elongated hexagon / cut gem */
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
    box-shadow: inset 0 0 14px #00000059, inset 0 1px 0 #ffffff40;
    transition: filter .25s ease, scale .25s ease;
}
/* Diamond studs flanking each label, echoing the divider */
.landing-view .landing-feature-tag::before,
.landing-view .landing-feature-tag::after {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    background: #ffffffd9;
    transform: rotate(45deg);
    box-shadow: 0 0 6px #ffffff99;
    opacity: .75;
    transition: opacity .25s ease, box-shadow .25s ease;
}
.landing-view .landing-feature-tag:hover { filter: brightness(1.2); scale: 1.05; }
.landing-view .landing-feature-tag:hover::before,
.landing-view .landing-feature-tag:hover::after { opacity: 1; box-shadow: 0 0 10px #fff; }
 
/* Same single-hue gradients as before, with the checker laid over each */
.landing-view .landing-feature-tag--curses   { background: var(--tag-checker), linear-gradient(135deg, #5a2a8a 0%, #9a56e0 100%); }
.landing-view .landing-feature-tag--upgrades { background: var(--tag-checker), linear-gradient(135deg, #1d5a94 0%, #4aa8e8 100%); }
.landing-view .landing-feature-tag--deaths   { background: var(--tag-checker), linear-gradient(135deg, #781010 0%, #d02a2a 100%); }
.landing-view .landing-feature-tag--altars   { background: var(--tag-checker), linear-gradient(135deg, #38383e 0%, #8a8a92 100%); }
.landing-view .landing-feature-tag--lobby    { background: var(--tag-checker), linear-gradient(135deg, #6a563a 0%, #a98c5f 100%); }
 
@media (max-width: 640px) {
    .landing-view .continue-button { padding: 14px 44px; letter-spacing: 2px; }
    .landing-view .continue-button::after { inset: -9px -32px; }
    .landing-view .landing-feature-tag { padding: 12px 16px; }
}
 
@media (prefers-reduced-motion: reduce) {
    .landing-view .continue-button { animation: none !important; }
}

/* ==========================================================================
   Smooth logo intro: replaces the five chopped slices.
   Paste at the VERY BOTTOM of landing.css (after landing-buttons.css).
   The logo stays one piece. A soft-edged wipe reveals it left to right, one
   step per note, while it sharpens out of a blur.
   ========================================================================== */

@property --reveal {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}
@property --logo-blur {
    syntax: '<length>';
    inherits: true;
    initial-value: 7px;
}

.landing-logo-stage {
    transition:
        --reveal .6s cubic-bezier(.22, 1, .36, 1),
        --logo-blur .6s cubic-bezier(.22, 1, .36, 1);
}

/* Logo is visible the whole time, but masked until each note reveals more. */
.landing-view:is([data-intro-state='waiting'], [data-intro-state='playing'], [data-intro-state='assembled']) .landing-logo {
    opacity: 1;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--reveal) - 16%), transparent var(--reveal));
    mask-image: linear-gradient(90deg, #000 calc(var(--reveal) - 16%), transparent var(--reveal));
    filter: blur(var(--logo-blur));
}

/* The old slice pieces are gone; keep this container inert. */
.logo-slices { display: none !important; }

.landing-logo-stage { transition: none; }

.landing-view:is([data-intro-state='waiting'], [data-intro-state='playing']) .landing-logo {
    opacity: 0;
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
}
.landing-view:is([data-intro-state='assembled']) .landing-logo {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
}
.landing-view[data-intro-state='playing'] .logo-slices { display: block !important; }
 
/* Each slat is a full-size copy of the logo, clipped to a slanted band by intro.js */
.intro-piece {
    left: 0;
    width: 100%;
    background-size: 100% 100%;
    background-position: 0 0;
    filter: none;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease-out;
}

/* ==========================================================================
   Nullscape divider: overgrown void theme
   Paste at the VERY BOTTOM of landing.css (after the other additions).
   CSS only. Replaces the plain line + diamond under the logo with:
   a glowing rail and vines creeping out from a central gem, fading out
   at both ends.
   ========================================================================== */

.landing-view {
    /* Vine growing to the right of the gem; the left one is its mirror */
    --divider-vine-r: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 28' fill='none' stroke='%23bc94da' stroke-width='1.2' stroke-linecap='round'><path d='M0 14C14 5 28 23 44 14S74 5 90 14 122 23 150 14'/><path d='M44 14c0 6 6 8 9 4M92 14c0-6 6-8 9-4M128 18c0 5 5 6 8 3'/><path d='M11 9c-2-4 1-6 4-5 0 3-1 4-4 5zM64 8c-2-4 1-6 4-5 0 3-1 4-4 5zM30 19c-2 4 1 6 4 5 0-3-1-4-4-5zM112 21c-2 4 1 6 4 5 0-3-1-4-4-5z' fill='%23bc94da' fill-opacity='.55' stroke='none'/><path d='M80 10l-1-4M120 20l1 4M20 18l-1 4' stroke-opacity='.6'/></svg>");
    --divider-vine-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 28' fill='none' stroke='%23bc94da' stroke-width='1.2' stroke-linecap='round'><g transform='matrix(-1 0 0 1 150 0)'><path d='M0 14C14 5 28 23 44 14S74 5 90 14 122 23 150 14'/><path d='M44 14c0 6 6 8 9 4M92 14c0-6 6-8 9-4M128 18c0 5 5 6 8 3'/><path d='M11 9c-2-4 1-6 4-5 0 3-1 4-4 5zM64 8c-2-4 1-6 4-5 0 3-1 4-4 5zM30 19c-2 4 1 6 4 5 0-3-1-4-4-5zM112 21c-2 4 1 6 4 5 0-3-1-4-4-5z' fill='%23bc94da' fill-opacity='.55' stroke='none'/><path d='M80 10l-1-4M120 20l1 4M20 18l-1 4' stroke-opacity='.6'/></g></svg>");
    /* Central gem: nested diamonds, side arrowheads, two sprouting leaves */
    --divider-gem: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -5 46 34' fill='none' stroke='%23e2c7f6' stroke-width='1' stroke-linejoin='round'><path d='M23 3L34 15 23 27 12 15Z' fill='%23bc94da' fill-opacity='.22'/><path d='M23 8L29 15 23 22 17 15Z' fill='%23f0dcff' fill-opacity='.92' stroke='none'/><path d='M12 15H4M34 15h8' stroke-opacity='.85'/><path d='M4 15l-3-3M4 15l-3 3M42 15l3-3M42 15l3 3' stroke-opacity='.7'/><path d='M23 3c-4-4-9-3-9 0 3 2 6 1 9 0zM23 3c4-4 9-3 9 0-3 2-6 1-9 0z' fill='%23bc94da' fill-opacity='.6' stroke='none'/></svg>");
}

/* Taller box so the ornament has room; keeps the same visual centre as before */
.landing-view .landing-divider {
    height: 32px;
    width: min(420px, 82%);
    bottom: -46px;
}
.landing-view .landing-brand { margin-bottom: 64px; }

/* Rail + vines, fading out at the ends */
.landing-view .landing-divider::before {
    inset: 0;
    background:
        var(--divider-vine-l) right calc(50% + 22px) center / auto 100% no-repeat,
        var(--divider-vine-r) left calc(50% + 22px) center / auto 100% no-repeat,
        linear-gradient(90deg, transparent, #bc94da99 25%, #f0dcffd9 50%, #bc94da99 75%, transparent) center / 100% 1px no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    filter: drop-shadow(0 0 5px #b866ff55);
}

/* The gem replaces the old rotated square */
.landing-view .landing-divider::after {
    width: 46px;
    height: 34px;
    border: 0;
    background: var(--divider-gem) center / contain no-repeat;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 6px #d89bffaa);
}

@keyframes divider-gem-pop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-45deg); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes divider-glow {
    0%, 100% { filter: drop-shadow(0 0 5px #d89bff80); }
    50% { filter: drop-shadow(0 0 13px #e2b8ffee); }
}

/* Gem pops in just after the line grows out during the intro reveal */
.landing-view[data-intro-state='revealing'] .landing-divider::after {
    animation: divider-gem-pop .75s cubic-bezier(.3, 1.5, .5, 1) .4s both;
}
.landing-view[data-intro-state='done'] .landing-divider::after {
    animation: divider-glow 4.5s ease-in-out infinite;
}

@media (max-width: 540px) {
    .landing-view .landing-brand { margin-bottom: 56px; }
    .landing-view .landing-divider { width: 88%; }
}


/* ==========================================================================
   Smooth slices + big final impact
   Paste at the VERY BOTTOM of landing.css (after everything else).
   - slices glide in with one long ease-out and de-blur as they settle
   - flashes ramp up/down instead of snapping
   - the real logo sits under the slices and the slices fade out on top, so
     the hand-off is invisible
   - final note: charge (heartbeat glow) -> slam, flash, rings, sparks, shake
   ========================================================================== */

/* ---- slices: long, continuous ease-out; nothing stops abruptly ---- */
.intro-piece {
    left: 0;
    width: 100%;
    filter: blur(var(--piece-blur, 0px));
    transition:
        transform .85s cubic-bezier(.22, 1, .36, 1),
        opacity .4s ease-out,
        filter .85s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, filter, opacity;
}
.intro-piece.landed { animation: piece-flash .9s ease-out; }
@keyframes piece-flash {
    0%   { filter: blur(0px) brightness(1)   drop-shadow(0 0 0 transparent); }
    14%  { filter: blur(0px) brightness(1.5) drop-shadow(0 0 10px rgba(216, 155, 255, .7)); }
    100% { filter: blur(0px) brightness(1)   drop-shadow(0 0 0 transparent); }
}

/* ---- hand-off: real logo underneath, slices fade away on top ---- */
.landing-view:is([data-intro-state='playing'], [data-intro-state='assembled'], [data-intro-state='revealing']) .logo-slices { display: block !important; }
.logo-slices { opacity: 1; transition: opacity .8s ease-out; }
.landing-view:is([data-intro-state='assembled'], [data-intro-state='revealing']) .logo-slices { opacity: 0; }
.landing-view:is([data-intro-state='assembled'], [data-intro-state='revealing']) .landing-logo {
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
    animation: logo-snap 1.4s ease-out;
}
@keyframes logo-snap {
    0%   { filter: brightness(1)   drop-shadow(0 0 0 transparent); }
    12%  { filter: brightness(1.4) drop-shadow(0 0 16px rgba(216, 155, 255, .7)); }
    100% { filter: brightness(1)   drop-shadow(0 0 0 transparent); }
}

/* ---- charge: the hold before the last note ---- */
.landing-logo-stage { transition: scale 1.2s cubic-bezier(.5, 0, .9, .5); }
.landing-view[data-intro-charge='1'] .landing-logo-stage { scale: 1.035; }
.landing-view[data-intro-charge='1'] .logo-slices { animation: charge-pulse 1.5s ease-in forwards; }
@keyframes charge-pulse {
    0%   { filter: brightness(1)    drop-shadow(0 0 0 transparent); }
    16%  { filter: brightness(1.12) drop-shadow(0 0 6px rgba(216, 155, 255, .5)); }
    26%  { filter: brightness(1.03) drop-shadow(0 0 3px rgba(216, 155, 255, .3)); }
    44%  { filter: brightness(1.22) drop-shadow(0 0 12px rgba(216, 155, 255, .7)); }
    56%  { filter: brightness(1.08) drop-shadow(0 0 6px rgba(216, 155, 255, .4)); }
    100% { filter: brightness(1.45) drop-shadow(0 0 22px rgba(226, 184, 255, .9)); }
}

/* ---- slam on the final note ---- */
.landing-logo-stage.slam { animation: logo-slam .95s cubic-bezier(.2, .8, .2, 1); }
@keyframes logo-slam {
    0%   { scale: 1.035; translate: 0 0; }
    10%  { scale: .955;  translate: 0 6px; }
    28%  { scale: 1.045; translate: 0 -4px; }
    50%  { scale: .99;   translate: 0 2px; }
    72%  { scale: 1.01;  translate: 0 -1px; }
    100% { scale: 1;     translate: 0 0; }
}
.landing-content.impact-shake { animation: impact-shake .7s linear; }
@keyframes impact-shake {
    0%   { translate: 0 0; }
    8%   { translate: -7px 4px; }
    16%  { translate: 6px -5px; }
    26%  { translate: -5px 3px; }
    38%  { translate: 4px -2px; }
    52%  { translate: -2px 1px; }
    70%  { translate: 1px -1px; }
    100% { translate: 0 0; }
}

/* ---- impact effects (created by intro.js) ---- */
.logo-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.logo-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    mix-blend-mode: screen;
    background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 45%), rgba(255, 244, 255, .9) 0%, rgba(216, 155, 255, .45) 22%, rgba(120, 50, 200, .18) 48%, transparent 72%);
    animation: fx-flash 1.4s ease-out forwards;
}
@keyframes fx-flash { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 0; } }
.logo-ring {
    position: absolute;
    left: var(--fx-x);
    top: var(--fx-y);
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    border: 2px solid rgba(232, 200, 255, .8);
    border-radius: 50% !important;
    opacity: 0;
    box-shadow: 0 0 24px rgba(184, 102, 255, .55), inset 0 0 24px rgba(184, 102, 255, .35);
    animation: fx-ring 1.3s cubic-bezier(.1, .7, .25, 1) var(--delay, 0s) forwards;
}
@keyframes fx-ring {
    0%   { opacity: .9; transform: scale(.15); border-width: 5px; }
    100% { opacity: 0;  transform: scale(9);   border-width: 1px; }
}
.logo-spark {
    position: absolute;
    left: var(--fx-x);
    top: var(--fx-y);
    width: var(--size, 4px);
    height: var(--size, 4px);
    margin: calc(var(--size, 4px) / -2) 0 0 calc(var(--size, 4px) / -2);
    background: #f0dcff;
    box-shadow: 0 0 8px 1px rgba(216, 155, 255, .9);
    border-radius: 0 !important;
    opacity: 0;
    animation: fx-spark var(--dur, 1s) cubic-bezier(.1, .8, .25, 1) forwards;
}
@keyframes fx-spark {
    0%   { opacity: 1;  transform: translate(0, 0) rotate(45deg) scale(1); }
    70%  { opacity: .9; }
    100% { opacity: 0;  transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(calc(45deg + var(--rot))) scale(.2); }
}

/* ---- background flares then settles as the page reveals ---- */
.landing-view[data-intro-state='revealing'] .landing-background { animation: bg-settle 2.2s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes bg-settle {
    from { scale: 1.14; opacity: .55; }
    to   { scale: 1;    opacity: .22; }
}

/* ---- tags + button pop in with a little spring ---- */
@keyframes intro-controls {
    0%   { opacity: 0; transform: translateY(22px) scale(.9); }
    60%  { opacity: var(--tag-opacity, 1); transform: translateY(-4px) scale(1.02); }
    100% { opacity: var(--tag-opacity, 1); transform: none; }
}

/* BEGIN NS AUDIO-LOCKED EFFECTS — paste this entire block LAST in landing.css.
   Existing slice entrances, divider, tags and Enter styling are retained. */
.landing-view .ns-logo-build {
    display: block;
    width: 100%;
    transform-origin: center;
    scale: var(--ns-build-scale, 1);
}
/* The clean source contains no Toolkits lettering or halo to hide. */
.landing-view .landing-logo-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    aspect-ratio: auto;
}
.landing-view .ns-logo-face {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1100 / 300;
    line-height: 0;
    translate: 0 0;
    isolation: isolate;
}
.landing-view .landing-logo,
.landing-view .logo-shine,
.landing-view .ns-logo-art { clip-path: none; }
.landing-view .ns-logo-face .landing-logo,
.landing-view .ns-logo-art {
    -webkit-mask-image: none;
    mask-image: none;
}
.landing-view .logo-shine {
    -webkit-mask-image: url('../assets/branding/Nullscape.png');
    mask-image: url('../assets/branding/Nullscape.png');
}
.landing-view .ns-logo-face .logo-shine { animation: none; }
.landing-view .ns-logo-face .logo-shine.ns-pre-drop-glint {
    animation: logo-shine var(--ns-preDropGlint, .85s) ease-in-out var(--ns-late, 0s) both;
}
.landing-view .landing-logo-stage :is(.logo-slices, .logo-shine, .ns-chroma, .ns-glitch) {
    inset: 0;
    height: 100%;
}
.landing-view :is(.intro-piece, .ns-chroma, .ns-glitch) { background-image: none; }
.landing-view .ns-logo-art {
    position: absolute;
    inset: 0;
    background: url('../assets/branding/Nullscape.png') 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}
.landing-view .ns-toolkit-reveal {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: clamp(-20px, -4vw, -12px) auto 0;
    pointer-events: none;
    /* Clean live lettering avoids the haze baked into the old bitmap crop. */
    background: none;
    color: #f0e2ff;
    font: 500 clamp(22px, 3vw, 30px)/1.1 Georgia, 'Times New Roman', serif;
    text-align: center;
    text-shadow: 0 0 5px #d89bff66, 0 0 10px #b866ff1a;
    opacity: var(--ns-toolkit-visible, 0);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--ns-toolkit-wipe, 0%) - 2%), transparent var(--ns-toolkit-wipe, 0%));
    mask-image: linear-gradient(90deg, #000 calc(var(--ns-toolkit-wipe, 0%) - 2%), transparent var(--ns-toolkit-wipe, 0%));
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.landing-view .ns-toolkit-caption {
    letter-spacing: .1em;
    margin-right: -.1em;
}
.landing-view .ns-startup-load {
    position: absolute;
    left: 50%;
    top: var(--ns-load-top, calc(50% + 80px));
    width: min(256px, 64vw);
    transform: translate(-50%, var(--ns-load-rise, 0px));
    z-index: 6;
    pointer-events: none;
    color: #e8dcffcc;
    font: 400 10px/1.4 var(--font-modern);
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.ns-startup-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.ns-startup-rail { display: block; height: 3px; overflow: hidden; background: #c6a4e33b; }
.ns-startup-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #9e64c4, #ead4ff);
    transform-origin: left center;
    transform: scaleX(var(--ns-load-progress, 0));
    will-change: transform;
}
.landing-view .landing-divider { bottom: -34px; }
.landing-view .landing-brand { margin-bottom: 52px; }
/* Only the logo floats. The divider stays anchored in the brand container. */
.landing-view[data-intro-state='done'] .landing-logo-stage {
    animation: logo-sway 9s ease-in-out infinite, logo-bob 5.5s ease-in-out infinite;
    will-change: transform, translate, rotate;
}
.landing-view[data-intro-state='done'] .landing-brand {
    animation: none;
    translate: 0 0;
    rotate: 0deg;
    will-change: auto;
}
.landing-view .intro-piece.landed,
.landing-view .logo-burst.hit,
.landing-view .landing-logo-stage:is(.thump, .slam),
.landing-view .landing-content.impact-shake {
    animation-delay: var(--ns-late, 0s);
}
.landing-view[data-intro-state='revealing'] .landing-brand {
    transition-delay: var(--ns-reveal-late, 0s);
}
.landing-view[data-intro-state='revealing'] .landing-feature-tag {
    animation-delay: calc(.2s + var(--tag-index) * .08s + var(--ns-reveal-late, 0s));
}
.landing-view[data-intro-state='revealing'] .continue-button {
    animation-delay: calc(.65s + var(--ns-reveal-late, 0s));
}
.landing-view[data-intro-state='revealing'] .landing-divider { animation-delay: var(--ns-reveal-late, 0s); }
.landing-view[data-intro-state='revealing'] .landing-divider::after {
    animation-delay: calc(.4s + var(--ns-reveal-late, 0s));
}
.landing-view:is([data-intro-state='assembled'], [data-intro-state='revealing']) .landing-logo {
    animation-delay: var(--ns-assembled-late, 0s);
}
.landing-view:is([data-intro-state='assembled'], [data-intro-state='revealing']) .logo-slices {
    transition-delay: var(--ns-assembled-late, 0s);
}
.landing-view[data-intro-drop='1'] .landing-background { opacity: .22; }
.landing-view[data-intro-drop='1'][data-intro-state='revealing'] .landing-background:not(.ns-background) {
    animation: none;
}
.landing-view .landing-background {
    scale: var(--ns-beat-scale, 1);
    translate: 0 var(--ns-beat-y, 0px);
    filter: brightness(var(--ns-beat-light, 1));
}
.landing-view .landing-content.ns-camera {
    transform-origin: 50% 45%;
    animation: ns-camera var(--ns-punch, .48s) cubic-bezier(.16,.8,.28,1) var(--ns-late, 0s) both;
}
@keyframes ns-camera {
    0% { scale: 1.10; }
    58% { scale: .99; }
    100% { scale: 1; }
}
.landing-view .landing-background.ns-background {
    animation: ns-background var(--ns-background, 1.5s) cubic-bezier(.12,.7,.25,1) var(--ns-late, 0s) both;
}
@keyframes ns-background {
    0% { opacity: .88; scale: 1.14; translate: 0 8px; filter: brightness(1.8) contrast(1.3) saturate(1.2); }
    5% { opacity: .82; scale: 1.10; translate: 0 -3px; filter: brightness(1.5) contrast(1.2) saturate(1.15); }
    18% { opacity: .55; scale: 1.035; translate: 0 1px; filter: brightness(1.2) contrast(1.08) saturate(1.05); }
    48% { opacity: .32; scale: 1.008; translate: 0 0; filter: brightness(1.05) contrast(1) saturate(1); }
    100% { opacity: .22; scale: var(--ns-beat-scale, 1); translate: 0 var(--ns-beat-y, 0px); filter: brightness(var(--ns-beat-light, 1)) contrast(1) saturate(1); }
}
.ns-drop-flash {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    animation: ns-flash var(--ns-flash, .1s) linear both;
}
@keyframes ns-flash {
    0% { opacity: .92; background: #fff; }
    22% { opacity: .58; background: #d8b5ff; }
    60% { opacity: .12; background: #ab66f0; }
    100% { opacity: 0; background: #854bd2; }
}
.ns-drop-ring {
    position: absolute;
    left: var(--fx-x);
    top: var(--fx-y);
    width: 180px;
    height: 180px;
    margin: -90px;
    opacity: 0;
    border: 3px solid #d89bff;
    border-radius: 50% !important;
    box-shadow: inset 0 0 18px #b866ff50, 0 0 18px #b866ff50;
    animation: ns-ring var(--ns-ring, 1.1s) cubic-bezier(.1,.7,.25,1) forwards;
}
@keyframes ns-ring {
    0% { opacity: .9; transform: scale(.2); }
    100% { opacity: 0; transform: scale(11); }
}
.ns-drop-spark {
    position: absolute;
    left: var(--fx-x);
    top: var(--fx-y);
    width: 3px;
    height: 9px;
    opacity: 0;
    background: #e2c7f6;
    border-radius: 0 !important;
    animation: ns-spark var(--ns-spark, .85s) cubic-bezier(.1,.8,.25,1) both;
}
@keyframes ns-spark {
    0% { opacity: 1; transform: translate(0,0) rotate(45deg); }
    100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(135deg) scale(.1); }
}
.ns-chroma, .ns-glitch {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
.ns-chroma {
    mix-blend-mode: screen;
    animation: ns-chroma var(--ns-rgb, .2s) steps(2, end) both;
}
@keyframes ns-chroma {
    0% { opacity: .8; filter: drop-shadow(-7px 0 #ff386f) drop-shadow(7px 0 #57eaff); transform: translateX(3px); }
    45% { opacity: .5; filter: drop-shadow(5px 0 #ff386f) drop-shadow(-5px 0 #57eaff); transform: translateX(-2px); }
    100% { opacity: 0; filter: none; transform: none; }
}
.ns-glitch { animation: ns-glitch var(--ns-glitch, .15s) steps(1, end) both; }
@keyframes ns-glitch {
    0% { clip-path: inset(18% 0 66%); transform: translateX(-10px); opacity: .9; }
    25% { clip-path: inset(55% 0 31%); transform: translateX(9px); }
    50% { clip-path: inset(35% 0 58%); transform: translateX(-6px); }
    75% { clip-path: inset(75% 0 17%); transform: translateX(5px); }
    100% { clip-path: inset(0); transform: none; opacity: 0; }
}
/* Cleanup is event-driven; no repeating effects accumulate on each kick. */
@media (prefers-reduced-motion: reduce) {
    .landing-view :is(.ns-drop-flash,.ns-drop-ring,.ns-drop-spark,.ns-chroma,.ns-glitch) { display: none !important; }
    .landing-view *, .landing-view *::before, .landing-view *::after { animation: none !important; transition: none !important; }
}
html.low-detail-mode .landing-view *,
html.low-detail-mode .landing-view *::before,
html.low-detail-mode .landing-view *::after { animation: none !important; transition: none !important; }
.landing-view .ns-now-playing {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 6;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    max-width: calc(100% - 40px);
    pointer-events: none;
    text-align: left;
    font: 400 12px/1.4 var(--font-modern);
    color: #e8dcffb3;
    animation: ns-credit-in var(--ns-credit-fade, .7s) ease-out var(--ns-credit-late, 0s) both;
}
.landing-view .ns-now-playing::before {
    content: '';
    grid-column: 1;
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    border: 1px solid #c99bee55;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, #10061d 0 2px, #d6b0f0 2px 3px, #864bb6 3px 6px, transparent 6px),
        repeating-radial-gradient(circle, transparent 0 7px, #c6a4e314 7px 8px, transparent 8px 10px),
        conic-gradient(from 20deg, #3d185b, #79509b, #321247, #8159a0, #3d185b);
    animation: ns-vinyl-spin 9s linear infinite;
    animation-play-state: paused;
}
.landing-view .ns-now-playing:not([hidden])::before { animation-play-state: running; }
.ns-now-playing-title { grid-column: 2; grid-row: 1; font-weight: 500; }
.ns-now-playing-artist { grid-column: 2; grid-row: 2; font-size: 11px; color: #e8dcff73; }
@keyframes ns-vinyl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes ns-credit-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 540px) {
    .landing-view .ns-now-playing { left: 16px; bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-view .ns-now-playing { animation: none; }
}

/* A quiet finish to assembly; the music drop retains its own stronger effects. */
.landing-view .logo-burst.final.hit { animation: ns-assembly-soft .45s ease-out var(--ns-late, 0s) both; }
.landing-view .logo-burst.final { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
@keyframes ns-assembly-soft {
    from { opacity: .24; transform: scale(.8); }
    to { opacity: 0; transform: scale(1.12); }
}
.landing-view .intro-piece[data-fix-on-beat='5'].landed { animation: none; }
.landing-view:is([data-intro-state='assembled'], [data-intro-state='revealing']) .landing-logo { animation: none; }

.landing-view .landing-logo-stage.ns-assembly-impact {
    animation: ns-assembly-impact .5s ease-out var(--ns-late, 0s) both;
}
@keyframes ns-assembly-impact {
    0% { scale: 1; filter: brightness(1); }
    18% { scale: .992; filter: brightness(1.12); }
    45% { scale: 1.006; filter: brightness(1.04); }
    100% { scale: 1; filter: brightness(1); }
}
.ns-assembly-ring {
    position: absolute;
    left: var(--fx-x);
    top: var(--fx-y);
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border: 1px solid #d2aff0;
    border-radius: 50% !important;
    opacity: 0;
    animation: ns-assembly-ring .65s ease-out both;
}
@keyframes ns-assembly-ring {
    0% { opacity: .22; transform: scale(.7); }
    100% { opacity: 0; transform: scale(2.2); }
}
/* END NS AUDIO-LOCKED EFFECTS */