/* The crossing is one viewport; the Universe pages keep their own layouts. */
.crossing-page { height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.crossing-page .masthead-inner { flex-wrap: nowrap; min-height: 68px; padding-block: 12px; }
.crossing-page .nav { width: auto; margin-left: auto; overflow: visible; }
.crossing-page .wordmark { font-size: 13px; letter-spacing: .16em; }
.crossing-page .language-link { font-family: var(--cjk); }
/* The explanation is short and never scrolls: it opens a panel instead. */
.universe-intro { position: absolute; top: clamp(14px, 3vh, 32px); inset-inline: var(--gutter); z-index: 12; padding: 0 8px 6px 0; background: linear-gradient(110deg, #0c171d38, transparent); }
.universe-intro .intro-eyebrow { display: none; }
.universe-intro h1 { margin: 0 0 12px; font: 400 23px/1.25 var(--sans); letter-spacing: -.025em; color: #e5e4d8; }
.universe-intro h1 br { display: none; }
.universe-intro p { margin: 0; font-size: 13px; line-height: 1.65; color: #aabbb6; }
.universe-intro strong { font-weight: 450; color: #d2dcd1; }
.universe-intro .intro-hook { max-width: 60ch; color: #cfd8d4; }
.intro-expand { margin-top: 12px; }
.intro-expand-button { display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .8rem; border: 1px solid #b8cdb066; border-radius: 999px; background: #0e1a2466; color: #dfe6e2; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; cursor: pointer; transition: border-color 200ms, background-color 200ms, color 200ms; }
.intro-expand-button:hover, .intro-expand-button:focus-visible { border-color: #cddcd2aa; background: #14243099; color: #f2f4f1; }
.intro-expand-button:focus-visible { outline: 1px solid #b8cdb0cc; outline-offset: 3px; }

/* The public explanation, opened over the crossing without moving it. */
.intro-panel { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--gutter); background: #04060cc9; }
.intro-panel[hidden] { display: none; }
.intro-panel-inner { width: min(100%, 720px); max-height: min(82svh, 640px); overflow: auto; padding: clamp(20px, 3vw, 32px); border: 1px solid #cedae04f; border-radius: 6px; background: linear-gradient(160deg, #0d1622, #070b14); box-shadow: 0 24px 60px #00000073; font-family: var(--sans); }
.intro-panel-inner .eyebrow { margin: 0 0 10px; color: #a9c5b8; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; }
.intro-panel-inner h2 { margin: 0 0 16px; font-family: var(--sans); font-size: clamp(20px, 2.4vw, 28px); font-weight: 430; line-height: 1.25; letter-spacing: -.02em; color: #e7e6dd; }
.intro-panel-inner p { margin: 0 0 14px; font-size: 14px; line-height: 1.85; color: #aebdb9; }
.intro-panel-inner strong { font-weight: 450; color: #d6e0d8; }
.intro-panel-close { margin: 18px 0 0; }
.intro-panel-close button { padding: .42rem .9rem; border: 1px solid #b8cdb066; border-radius: 999px; background: #0e1a2466; color: #dfe6e2; font-family: var(--mono); font-size: .7rem; cursor: pointer; }
.intro-panel-close button:hover, .intro-panel-close button:focus-visible { border-color: #cddcd2aa; color: #f2f4f1; }

.universe-intro .intro-navigation { margin: 12px 0 0; padding-top: 6px; font-size: 11px; line-height: 1.65; color: #94a9a6; }
.intro-navigation span { color: #c9c6a5; }
.crossing-main { position: relative; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-block: clamp(14px, 3vh, 32px) 12px; }
/* Reserve the original title's geometry; the floating explanation supplies the heading. */
.crossing-title { visibility: hidden; margin: 0; font-family: var(--sans); font-size: clamp(22px, 2.4vw, 36px); font-weight: 450; line-height: 1.35; letter-spacing: -.025em; }
.crossing-title span { color: var(--bone-dim); }
.crossing-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; min-height: 0; }
.universe-deck { --tile: min(28vw, 43vh, 370px); --tilt: rotateY(-22deg); position: relative; min-width: 0; min-height: 0; perspective: 1100px; perspective-origin: 55% 50%; isolation: isolate; }
.deck-slot { --depth: 1; position: absolute; top: calc(50% - var(--tile) / 2); width: var(--tile); height: var(--tile); z-index: 6; transform: scale3d(var(--depth), var(--depth), var(--depth)); transform-origin: left center; transform-style: preserve-3d; pointer-events: none; }
.deck-slot[data-universe="research"] { left: 0; z-index: 7; --card-color: #dac8a5; }
.deck-slot[data-universe="code"] { left: 33%; --depth: .84; --card-color: #b7d9cc; }
.deck-card { position: relative; display: block; width: 100%; height: 100%; color: var(--bone); transform-style: preserve-3d; pointer-events: none; }
/* Retain the resting face's hit area while its visible surface unfolds. */
.deck-card::before { content: ""; position: absolute; inset: 0; transform: var(--tilt); pointer-events: auto; }
.slice-surface { position: absolute; inset: 0; display: block; overflow: hidden; transform: var(--tilt); transform-origin: center; border: 1px solid color-mix(in oklab, var(--card-color) 65%, transparent); background: #101f2b; box-shadow: 0 0 16px #b6d5e614, inset 0 0 0 1px #ffffff12; transition: transform 650ms cubic-bezier(.2,.7,.2,1), opacity 500ms, box-shadow 650ms; backface-visibility: hidden; pointer-events: auto; }
.slice-surface img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .88; filter: saturate(.75); transition: opacity 650ms; }
.slice-surface::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, #ffffff10, transparent 40%, #a3c7d708); box-shadow: inset 0 0 28px #cadde80a; pointer-events: none; }
.deck-card h2 { position: absolute; left: 0; bottom: -37px; width: 100%; margin: 0; font-family: var(--sans); font-size: clamp(13px, 1.15vw, 17px); font-weight: 400; line-height: 1.3; letter-spacing: .015em; text-align: center; color: #dce2e0; transition: color 400ms; pointer-events: auto; }
.deck-slot[data-universe="code"] h2 { top: -65px; bottom: auto; left: 50%; width: 50%; }
.deck-entry { position: absolute; right: 6px; bottom: -39px; font-size: 0; color: var(--card-color); opacity: 0; transition: opacity 350ms; }
.deck-entry b { font-size: 17px; font-weight: 400; }
.universe-deck[data-selected="research"] .deck-slot[data-universe="research"],
.universe-deck[data-selected="code"] .deck-slot[data-universe="code"] { z-index: 10; }
.universe-deck[data-selected="research"] [data-universe="research"] .slice-surface,
.universe-deck[data-selected="code"] [data-universe="code"] .slice-surface,
.deck-card:focus-visible .slice-surface { transform: rotateY(0deg); box-shadow: 0 0 25px #c7dbeb1a, inset 0 0 0 1px #ffffff18; }
.universe-deck[data-selected="research"] [data-universe="research"] .deck-entry,
.universe-deck[data-selected="code"] [data-universe="code"] .deck-entry { opacity: 1; }
.universe-deck[data-selected="research"] [data-universe="code"] .slice-surface,
.universe-deck[data-selected="code"] [data-universe="research"] .slice-surface { opacity: .46; }
.deck-ghost { --depth: .65; position: absolute; top: calc(50% - var(--tile) / 2); width: var(--tile); height: var(--tile); pointer-events: none; transform: scale3d(var(--depth), var(--depth), var(--depth)) var(--tilt); transform-origin: left center; border: 1px solid #d3dfeb55; background: linear-gradient(#0b152824, #08111c55), url('../img/universe-research.svg') center / cover; }
/* The deck holds the two Universe cards first and the eight receding slices after them,
   so slice indices are 3–10 and the cards keep the first keyboard positions. */
.deck-ghost:nth-child(even) { background-image: linear-gradient(#0b152824, #08111c55), url('../img/universe-code.svg'); }
.deck-ghost:nth-child(3) { left: 52%; --depth: .65; opacity: .58; z-index: 5; }
.deck-ghost:nth-child(4) { left: 64%; --depth: .50; opacity: .47; z-index: 4; }
.deck-ghost:nth-child(5) { left: 73%; --depth: .38; opacity: .38; z-index: 3; }
.deck-ghost:nth-child(6) { left: 80%; --depth: .28; opacity: .3; z-index: 2; }
.deck-ghost:nth-child(7) { left: 85%; --depth: .20; opacity: .23; z-index: 1; }
.deck-ghost:nth-child(8) { left: 89%; --depth: .14; opacity: .17; }
.deck-ghost:nth-child(9) { left: 92%; --depth: .095; opacity: .12; }
.deck-ghost:nth-child(10) { left: 94%; --depth: .06; opacity: .08; }
/* The three nearest slices open the "more Universes" page; the five behind them stay decorative. */
.deck-ghost-link { pointer-events: auto; cursor: pointer; transition: opacity 350ms var(--ease-out), filter 350ms var(--ease-out), box-shadow 350ms var(--ease-out); }
.deck-ghost.deck-ghost-link:hover, .deck-ghost.deck-ghost-link:focus-visible { opacity: .92; filter: brightness(1.18); box-shadow: 0 0 22px #b6d5e63a, inset 0 0 0 1px #ffffff24; }
.deck-ghost.deck-ghost-link:focus-visible { outline: 1px solid #b8cdb0cc; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .deck-ghost-link { transition: none; } }
.agent-scene { --scene-color: #d7dacb; position: relative; display: flex; align-items: center; min-width: 0; min-height: 0; }
.agent-scene[data-selected="research"] { --scene-color: #e2cfaa; }
.agent-scene[data-selected="code"] { --scene-color: #a9d8c9; }
.agent-scene > svg { display: block; width: 100%; max-height: 100%; overflow: visible; }
a.agent-scene { text-decoration: none; border-radius: 4px; }
.scene-entry { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #a9bcba; font-size: 12px; letter-spacing: .07em; transition: color 250ms; }
.scene-entry span { display: inline-block; margin-left: 12px; transition: transform 250ms; }
.agent-scene:hover .scene-entry, .agent-scene:focus-visible .scene-entry { color: #e5e8de; }
.agent-scene:hover .scene-entry span, .agent-scene:focus-visible .scene-entry span { transform: translate(3px, -3px); }
.agent-scene:focus-visible { outline: 1px solid #bfd6cf; outline-offset: -6px; }
.world-image { opacity: .78; filter: saturate(.65); }
.world-rim { fill: #adcddd08; stroke: #cfdfde66; stroke-width: .8; }
.world-underlay { fill: #84bac207; stroke: #b9d5db1c; stroke-width: .7; }
.scene-link { fill: none; stroke: var(--scene-color); stroke-width: .8; opacity: .16; animation: exchange-trace 12s ease-in-out infinite; }
.scene-light { fill: var(--scene-color); }
.scene-aura { fill: var(--scene-color); opacity: .12; filter: blur(3px); }
.scene-packet { fill: var(--scene-color); filter: drop-shadow(0 0 4px var(--scene-color)); }
.scene-label { fill: #c4d2d0; opacity: .6; font-family: var(--sans); font-size: 9px; letter-spacing: 2px; text-anchor: middle; }
.scene-center-label { paint-order: stroke; stroke: #13272bcc; stroke-width: 4px; fill: #e4ece5; font-family: var(--sans); font-size: 12px; letter-spacing: .5px; text-anchor: middle; }
.world-growth { animation: world-grow 12s ease-in-out infinite; }
.world-growth path { fill: #aecfc01a; stroke: var(--scene-color); stroke-width: .85; }
.world-growth circle { fill: var(--scene-color); }
.scene-output { animation: world-result 12s ease-in-out infinite; }
.scene-output path { fill: #b9d6cd24; stroke: var(--scene-color); stroke-width: .8; }
.world-code, .output-code { display: none; }
.agent-scene[data-selected="code"] .world-code, .agent-scene[data-selected="code"] .output-code { display: block; }
.agent-scene[data-selected="code"] .world-research, .agent-scene[data-selected="code"] .output-paper { display: none; }
.agent-scene[data-motion="paused"] * { animation-play-state: paused !important; }
@keyframes exchange-trace { 0%, 65%, 100% { opacity: .1; } 15%, 38% { opacity: .4; } }
@keyframes world-grow { 0%, 30%, 100% { opacity: 0; transform: translateY(12px); } 48%, 82% { opacity: 1; transform: translateY(0); } }
@keyframes world-result { 0%, 65%, 100% { opacity: 0; transform: translateY(9px); } 78%, 90% { opacity: 1; transform: translateY(-7px); } }
html[lang="zh"] .crossing-title { font-family: var(--cjk); font-size: clamp(21px, 2.2vw, 34px); font-weight: 450; }
html[lang="zh"] .scene-center-label { font-family: var(--cjk); }
html[lang="zh"] .deck-card h2 { font-family: var(--sans); font-weight: 400; letter-spacing: .015em; }
@media (max-width: 760px) {
  .crossing-page .masthead-inner { min-height: 61px; }
  .crossing-page .wordmark { font-size: 11px; letter-spacing: .09em; }
  .crossing-page .nav a { padding: 5px 7px; }
  .crossing-page .nav { gap: 3px; }
  .universe-intro { top: 10px; }
  .universe-intro h1 { font-size: 19px; margin-bottom: 8px; }
  .universe-intro p { margin-bottom: 10px; }
  .universe-intro .intro-navigation { font-size: 11px; padding-top: 4px; margin-top: 0; }
  .scene-entry { bottom: 2%; font-size: 11px; }
  .crossing-main { padding-block: 10px 4px; }
  .crossing-title, html[lang="zh"] .crossing-title { font-size: clamp(19px, 5vw, 25px); line-height: 1.3; }
  .crossing-split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; }
  .universe-deck { --tile: min(49vw, 25svh); }
  .deck-card h2 { bottom: -28px; font-size: clamp(11px, 3.1vw, 14px); }
  .deck-slot[data-universe="code"] h2 { top: -44px; bottom: auto; }
  .deck-entry { bottom: -30px; }
  .deck-entry b { font-size: 14px; }
  .agent-scene > svg { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-slot, .slice-surface, .slice-surface img, .deck-card h2, .deck-entry { transition: none !important; }
  .scene-link, .world-growth, .scene-output { animation: none !important; }
  .world-growth, .scene-output { opacity: 1; transform: none; }
  .scene-packet { display: none; }
}