/* ============================================================
   THE CELESTIAL INSTRUMENT, home landing
   Applies only while html.landing-3d is set (WebGL available).
   Without it the original hero and SVG compass render unchanged.
   ============================================================ */
html.landing-3d #page-home .hero {
 position: relative;
 isolation: isolate;
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 align-items: center;
 gap: 0;
 width: 100%;
 max-width: none;
 min-height: var(--landing-h, calc(100svh - var(--header-height, 0px)));
 margin: 0;
 padding-block: 3rem 5.5rem;
 padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
 overflow: hidden;
 border-bottom: 1px solid var(--gold-a10);
 background: #0d0a06;
 touch-action: pan-y;
}
html.landing-3d #page-home .home-hero-compass { display: none; }
html.landing-live body[data-page="home"] #motes { display: none; }

.landing-canvas {
 position: absolute;
 inset: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 display: block;
 cursor: grab;
 opacity: 0;
 transition: opacity 900ms var(--ease, ease);
 -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
 mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
html.landing-live .landing-canvas { opacity: 1; }
#page-home .hero.is-dragging,
#page-home .hero.is-dragging .landing-canvas { cursor: grabbing; }

/* The copy keeps its column and gains a little lift off the glow. */
html.landing-3d #page-home .home-hero-copy {
 position: relative;
 z-index: 2;
 max-width: min(34rem, 46%);
 pointer-events: none;
}
html.landing-3d #page-home .home-hero-copy a,
html.landing-3d #page-home .home-hero-copy button { pointer-events: auto; }
html.landing-3d #page-home .hero h1,
html.landing-3d #page-home .hero .subtitle,
html.landing-3d #page-home .hero .home-overline { text-shadow: 0 2px 24px rgb(13 10 6 / .9), 0 0 2px rgb(13 10 6 / .6); }
html.landing-3d #page-home .hero h1 { font-size: clamp(3.6rem, 7.4vw, 7rem); line-height: .98; letter-spacing: .01em; }
html.landing-3d #page-home .hero .home-overline { display: flex; align-items: center; gap: .9rem; }
html.landing-3d #page-home .hero .home-overline::before {
 content: "";
 width: 2.25rem;
 height: 1px;
 background: var(--gold);
 opacity: .7;
}

/* First arrival: the instrument assembles while the words rise. */
@keyframes landingRise {
 from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
 to { opacity: 1; transform: none; filter: none; }
}
html.landing-first #page-home .hero .home-overline,
html.landing-first #page-home .hero h1,
html.landing-first #page-home .hero .subtitle,
html.landing-first #page-home .hero .hero-actions {
 opacity: 0;
 animation: landingRise 450ms cubic-bezier(.22, 1, .36, 1) forwards;
}
html.landing-first #page-home .hero .home-overline { animation-delay: 0ms; }
html.landing-first #page-home .hero h1 { animation-delay: 50ms; }
html.landing-first #page-home .hero .subtitle { animation-delay: 100ms; }
html.landing-first #page-home .hero .hero-actions { animation-delay: 150ms; }

/* ---------- stations ---------- */
.landing-stations {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 opacity: 0;
}
.landing-stations.is-off .station { visibility: hidden; }
.station {
 position: absolute;
 left: 0;
 top: 0;
 width: 0;
 height: 0;
 color: var(--parchment);
 text-decoration: none;
 will-change: transform, opacity;
}
.station-mark {
 position: absolute;
 left: -7px;
 top: -7px;
 width: 14px;
 height: 14px;
 border: 1px solid var(--gold-a60);
 background: rgb(13 10 6 / .55);
 transform: rotate(45deg) scale(.7);
 box-shadow: 0 0 14px var(--gold-a35);
 transition: transform var(--t-ui) ease, background var(--t-ui) ease;
 pointer-events: auto;
}
.station-text {
 position: absolute;
 top: 0;
 left: 14px;
 display: grid;
 gap: .1rem;
 padding: .5rem .65rem;
 transform: translateY(-50%);
 white-space: nowrap;
 font-family: var(--serif-head);
 font-size: .8rem;
 letter-spacing: .16em;
 line-height: 1.15;
 text-transform: uppercase;
 text-shadow: 0 1px 12px rgb(13 10 6 / .95), 0 0 2px rgb(13 10 6 / .9);
 pointer-events: auto;
 transition: color var(--t-ui) ease;
}
.station.is-left .station-text { left: auto; right: 14px; text-align: right; }
.station-num { color: var(--gold); font-size: .62rem; letter-spacing: .24em; }
.station:hover .station-text,
.station:focus-visible .station-text { color: var(--gold-bright); }
.station:hover .station-mark,
.station:focus-visible .station-mark { background: var(--gold); transform: rotate(45deg) scale(1); }
.station:focus-visible { outline: none; }
.station:focus-visible .station-text { outline: 1px solid var(--gold); outline-offset: 2px; }
.station.is-back .station-mark,
.station.is-back .station-text { pointer-events: none; }

/* ---------- hint and scroll cue ---------- */
.landing-hint {
 position: absolute;
 z-index: 2;
 right: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
 bottom: 1.6rem;
 margin: 0;
 color: var(--ink-soft);
 font-size: var(--t-label);
 letter-spacing: .14em;
 text-transform: uppercase;
 opacity: 0;
 animation: landingRise 900ms ease 2.4s forwards;
 transition: opacity 600ms ease;
 pointer-events: none;
}
.landing-hint.is-done { opacity: 0 !important; animation: none; }
.landing-cue {
 position: absolute;
 z-index: 2;
 left: 50%;
 bottom: 1.1rem;
 display: grid;
 justify-items: center;
 gap: .45rem;
 min-width: 44px;
 padding: .25rem;
 transform: translateX(-50%);
 color: var(--ink-soft);
 font-size: .7rem;
 letter-spacing: .3em;
 text-transform: uppercase;
 text-decoration: none;
}
.landing-cue:hover { color: var(--gold-bright); }
.landing-cue-line {
 position: relative;
 width: 1px;
 height: 2.4rem;
 overflow: hidden;
 background: var(--gold-a18);
}
.landing-cue-line::after {
 content: "";
 position: absolute;
 left: 0;
 top: -40%;
 width: 1px;
 height: 40%;
 background: var(--gold);
 animation: landingCue 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes landingCue { to { top: 100%; } }

/* ---------- stacked: phones and portrait tablets ---------- */
html.landing-3d #page-home .hero.landing-stacked {
 align-items: end;
 padding-top: var(--instrument-space, 52vh);
 padding-bottom: 4.25rem;
}
html.landing-3d #page-home .hero.landing-stacked .home-hero-copy { max-width: 36rem; }
html.landing-3d #page-home .hero.landing-stacked h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
html.landing-3d #page-home .hero.landing-stacked .subtitle { margin-block: .9rem 1.1rem; max-width: 28ch; }
html.landing-3d #page-home .hero.landing-stacked .hero-actions { margin-top: 1.1rem; }
.landing-stacked .station-text { font-size: .7rem; letter-spacing: .12em; padding: .7rem .5rem; }
.landing-stacked .station-num { display: none; }
.landing-stacked .station-mark { left: -6px; top: -6px; width: 12px; height: 12px; }
.landing-stacked .landing-hint {
 left: 0;
 right: 0;
 bottom: auto;
 top: calc(var(--instrument-space, 52vh) - 2rem);
 text-align: center;
 white-space: nowrap;
 font-size: .68rem;
}
.landing-stacked .landing-cue { bottom: .6rem; }
.landing-stacked .landing-cue span:first-child { display: none; }

@media (max-width: 768px) {
 html.landing-3d #page-home .hero { padding-inline: var(--gutter); }
 html.landing-3d #page-home .home-hero-copy { max-width: none; }
 html.landing-3d #page-home .hero.landing-stacked .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
 html.landing-3d #page-home .hero.landing-stacked .hero-actions .button { text-align: center; padding-inline: .5rem; }
}
/* ---------- phones: the instrument, purpose and a clear way in ---------- */
html.landing-3d #page-home .hero.landing-solo {
 align-items: end;
 min-height: max(680px, var(--landing-h, calc(100svh - var(--header-height, 0px))));
 padding-top: 18rem;
 padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}
html.landing-3d #page-home .hero.landing-solo .home-hero-copy { max-width: 22rem; width: 100%; margin-inline: auto; }
html.landing-3d #page-home .hero.landing-solo .home-overline {
 display: block;
 margin: 0 0 .85rem;
 font-size: .65rem;
 letter-spacing: .12em;
 text-align: center;
}
html.landing-3d #page-home .hero.landing-solo .home-overline::before { display: none; }
html.landing-3d #page-home .hero.landing-solo .subtitle {
 display: block;
 margin: .8rem auto 1.2rem;
 font-size: 1.15rem;
 line-height: 1.45;
 text-align: center;
}
html.landing-3d #page-home .hero.landing-solo .hero-actions {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: .6rem;
 margin-top: 0;
}
html.landing-3d #page-home .hero.landing-solo .hero-actions .button {
 min-height: 48px;
 font-size: 1rem;
 letter-spacing: 0;
 padding: .6rem .35rem;
}
/* The name sits on one centred line beneath the instrument. */
html.landing-3d #page-home .hero.landing-solo .charter-heading { text-align: center; }
html.landing-3d #page-home .hero.landing-solo h1 {
 display: flex;
 justify-content: center;
 align-items: baseline;
 gap: .22em;
 max-width: none;
 margin: 0;
 font-size: clamp(2.3rem, 11vw, 3.4rem);
 line-height: 1.05;
 white-space: nowrap;
}
html.landing-3d #page-home .hero.landing-solo h1 br { display: none; }
.landing-solo .landing-cue { bottom: calc(1rem + env(safe-area-inset-bottom)); }
.landing-solo .landing-hint {
 left: 0;
 right: 0;
 top: var(--hint-top, auto);
 bottom: auto;
 text-align: center;
 font-size: .68rem;
}

@media (max-height: 560px) and (orientation: landscape) {
 html.landing-3d #page-home .hero { min-height: 0; padding-block: 2rem 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
 html.landing-first #page-home .hero .home-overline,
 html.landing-first #page-home .hero h1,
 html.landing-first #page-home .hero .subtitle,
 html.landing-first #page-home .hero .hero-actions { opacity: 1; animation: none; }
 .landing-hint { animation: none; opacity: .8; }
 .landing-cue-line::after { animation: none; top: 30%; }
 .landing-canvas { transition: none; }
}