/* 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__label:focus-visible {
    outline: 1px solid #b4e6ff;
    outline-offset: 5px;
    border-radius: 4px;
    background: rgba(6, 9, 15, 0.85);
}

.landing3d__motion {
    position: absolute;
    top: max(22px, env(safe-area-inset-top));
    right: max(24px, env(safe-area-inset-right));
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid rgba(180, 230, 255, 0.22);
    border-radius: 24px;
    background: rgba(6, 9, 15, 0.72);
    color: #b7cbd9;
    font: 500 11px 'Space Grotesk', sans-serif;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.landing3d__motion:hover,
.landing3d__motion:focus-visible {
    color: #fff;
    border-color: #b4e6ff;
    outline: 2px solid transparent;
    outline-offset: 3px;
}
.landing3d__hint {
    position: absolute;
    bottom: max(17px, env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    margin: 0;
    text-align: center;
    color: #9aafbe;
    font: 400 11px 'Space Grotesk', sans-serif;
    letter-spacing: 0.12em;
    pointer-events: none;
}
@media (max-width: 600px) {
    .landing3d__label {
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid rgba(180, 230, 255, 0.16);
        border-radius: 6px;
        background: rgba(6, 9, 15, 0.82);
    }
    .landing3d__tagline { padding: 0 24px; font-size: 11px; line-height: 1.7; }
    .landing3d__motion { top: 16px; right: 16px; }
}

.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__motion,
.landing3d.is-leaving .landing3d__hint,
.landing3d.is-leaving .landing3d__tagline {
    opacity: 0;
    transition: opacity 0.32s ease;
    pointer-events: none;
}

/* ── particle landing experiment (/identity-particles) ───────────────
   Deliberately separate from .landing3d so the approved landing page remains
   pixel-identical while this concept is evaluated. */
.particle-identity {
    --particle-bg: #06090f;
    --particle-copy: rgba(232, 244, 255, 0.94);
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(26, 48, 75, 0.2), transparent 34%),
        var(--particle-bg);
    color: var(--particle-copy);
    isolation: isolate;
}

.particle-identity::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 36%, rgba(1, 3, 7, 0.34) 72%, rgba(1, 3, 7, 0.72) 100%);
}

.particle-identity__field,
.particle-identity__field canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.particle-identity__field { z-index: 0; }
.particle-identity__field canvas { display: block; }

.particle-identity__mark {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 52%;
    margin: 0;
    transform: translate(-50%, -50%);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(29px, 4.1vw, 58px);
    font-weight: 700;
    letter-spacing: 0.13em;
    color: rgba(242, 250, 255, 0.97);
    text-shadow: 0 0 24px rgba(120, 205, 255, 0.42), 0 0 70px rgba(90, 160, 255, 0.2);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}

.particle-identity.is-formed .particle-identity__mark { opacity: 1; }

.particle-identity__nav {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.particle-identity__link {
    position: absolute;
    display: inline-flex;
    padding: 0.7rem 0.85rem;
    transform: translate(-50%, -50%);
    color: rgba(200, 230, 248, 0.84);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(10px, 1vw, 14px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 0 14px rgba(4, 9, 16, 0.95), 0 0 28px rgba(4, 9, 16, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.65s ease, color 0.28s ease, text-shadow 0.28s ease, transform 0.28s ease;
}

.particle-identity.is-networked .particle-identity__link {
    opacity: 1;
    pointer-events: auto;
}

.particle-identity__link:hover,
.particle-identity__link:focus-visible {
    color: #fff;
    transform: translate(-50%, -50%) scale(1.06);
    text-shadow: 0 0 12px rgba(152, 222, 255, 0.95), 0 0 34px rgba(84, 172, 255, 0.62);
    outline: none;
}

.particle-identity__link:focus-visible {
    box-shadow: 0 0 0 1px rgba(180, 230, 255, 0.65);
}

.particle-identity__link--home     { left: 50%; top: 8%; }
.particle-identity__link--about    { left: 18%; top: 34%; }
.particle-identity__link--services { left: 21%; top: 70%; }
.particle-identity__link--team     { left: 79%; top: 70%; }
.particle-identity__link--contact  { left: 82%; top: 34%; }

.particle-identity__tagline {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: clamp(30px, 6.5vh, 74px);
    margin: 0;
    text-align: center;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(11px, 1.45vw, 18px);
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: rgba(255, 185, 80, 0.92);
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
}

.particle-identity__tagline strong {
    color: rgba(112, 201, 255, 0.9);
    font-weight: inherit;
}

.particle-identity.is-networked .particle-identity__tagline { opacity: 0.84; }
.particle-identity.is-leaving > :not(.particle-identity__field) { opacity: 0 !important; transition-duration: 0.25s; }

.theme-light .particle-identity {
    --particle-bg: #f5f7fa;
    --particle-copy: #15273a;
    background: radial-gradient(circle at 50% 48%, rgba(78, 129, 164, 0.1), transparent 38%), var(--particle-bg);
}

.theme-light .particle-identity::after {
    background: radial-gradient(ellipse at center, transparent 40%, rgba(245, 247, 250, 0.1) 72%, rgba(227, 233, 239, 0.55) 100%);
}

.theme-light .particle-identity__mark,
.theme-light .particle-identity__link { color: #1a3046; text-shadow: none; }
.theme-light .particle-identity__tagline { color: #9b5d16; }
.theme-light .particle-identity__tagline strong { color: #176d91; }

@media (max-width: 720px) {
    .particle-identity__mark { top: 51%; font-size: clamp(25px, 8vw, 40px); }
    .particle-identity__link--about,
    .particle-identity__link--services { left: 13%; }
    .particle-identity__link--team,
    .particle-identity__link--contact { left: 87%; }
    .particle-identity__link--about,
    .particle-identity__link--contact { top: 29%; }
    .particle-identity__link--services,
    .particle-identity__link--team { top: 72%; }
    .particle-identity__tagline { padding: 0 2rem; line-height: 1.65; }
}

@media (prefers-reduced-motion: reduce) {
    .particle-identity__mark,
    .particle-identity__link,
    .particle-identity__tagline { transition: 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;
}