/* 42ndRoot 3D landing page — the WebGL canvas plus its DOM overlay.
   Labels and the wordmark are DOM rather than textures so they stay crisp at any
   device pixel ratio and can be styled here instead of in JS. */
.landing3d {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #06090f;
    overflow: hidden;
}

.landing3d__canvas { display: block; width: 100%; height: 100%; }

/* label layer sits above the canvas; only the labels themselves take clicks */
.landing3d__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


.landing3d__mark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(26px, 4vw, 54px);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(240, 250, 255, 0.96);
    text-shadow: 0 0 26px rgba(120, 200, 255, 0.5), 0 0 70px rgba(90, 160, 255, 0.28);
    opacity: 0;
    transition: opacity 1s ease;
    white-space: nowrap;
}
.landing3d__mark.is-in { opacity: 1; }

.landing3d__label {
    position: absolute;
    left: 0;
    top: 0;
    padding: 6px 10px;
    border: 0;
    background: none;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(11px, 1.05vw, 15px);
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(200, 236, 255, 0.82);
    text-shadow: 0 0 10px rgba(5, 9, 15, 0.95), 0 0 22px rgba(5, 9, 15, 0.8);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    /* 0.35s, not 0.25s: the label's glow and its BRANCH's glow are one gesture, and
       the branch crossfade runs ~0.4s (GLOW_OUT in landing-3d.js). At 0.25s the text
       arrived first and the two read as separate events. */
    transition: opacity 0.7s ease, color 0.35s ease, text-shadow 0.35s ease;
}
.landing3d__label.is-in { opacity: 1; }
.landing3d__label.is-hot {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(140, 215, 255, 0.9), 0 0 30px rgba(90, 170, 255, 0.55);
}

.landing3d__tagline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(34px, 6vh, 78px);
    margin: 0;
    text-align: center;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(12px, 1.5vw, 19px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 1.1s ease;
    pointer-events: none;
}
.landing3d__tagline.is-in { opacity: 0.78; }
.landing3d__tagline .is-root  { color: rgba(255, 185, 80, 0.95); }
.landing3d__tagline .is-sep   { color: rgba(200, 200, 200, 0.6); }
.landing3d__tagline .is-cloud { color: rgba(110, 200, 255, 0.9); }

/* covers the screen at the end of the fly-in, before the page swap */
.landing3d__fade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
        .landing3d__mark,
    .landing3d__label,
    .landing3d__tagline { transition: none; }
}

/* The pre-3D hero (orb, sphere layers and the ring with text around it) is still
   in identity.html because option-d-roots.js — the 2D fallback — needs those
   elements to exist. Both scripts hid it with JS *after* load, so it painted on
   every refresh and you saw the old circled logo flash before the scene appeared.
   Hiding it from the first paint kills the flash without breaking the fallback.
   If you ever swap back to the 2D version, drop this rule with the stylesheet. */
.identity-hero__stage { opacity: 0 !important; }
.identity-hero__background,
.identity-hero__stars { display: none; }

/* labels and tagline clear out the instant a branch is chosen */
.landing3d.is-leaving .landing3d__labels,
.landing3d.is-leaving .landing3d__tagline {
    opacity: 0;
    transition: opacity 0.32s ease;
    pointer-events: none;
}


/* ── team page: 3D constellation root ────────────────────────────────
   Sits inside the .team-constellation stage (not the viewport), behind the
   member nodes. team-3d.js hides the old 2D #team-canvas and positions the
   existing .team-node elements by projecting 3D branch tips, so all of their
   hover/card/locked behaviour keeps working unchanged. */
.team3d__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}