/* Chapter 03 — Passage / Threshold.
   Friction closes space; Passage opens it again. The default state is the
   complete static story so no-JS and reduced-motion remain fully legible. */

.passage-chapter {
  --passage-left-shift:-10vw;
  --passage-right-shift:10vw;
  --passage-frame-scale:1;
  --passage-light-scale:1;
  --passage-opacity:1;
  --passage-route-offset:0;
  --passage-end-opacity:1;
  position:relative;
  min-height:1080px;
  overflow:clip;
  isolation:isolate;
  color:#0d1527;
  background:
    linear-gradient(180deg,#0f1732 0%,#111a36 11%,#263858 25%,#7387a8 39%,#cbd7e8 53%,#edf2f9 68%,#f7f9fc 84%,#f7f9fc 100%);
}
.passage-chapter::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(255,255,255,.78) 0,rgba(225,235,255,.36) 21%,rgba(173,194,229,.13) 41%,transparent 60%),
    linear-gradient(90deg,rgba(10,17,39,.56),rgba(18,29,58,.10) 29%,transparent 43%,transparent 57%,rgba(18,29,58,.10) 71%,rgba(10,17,39,.56));
}
.passage-chapter::after {
  content:'';
  position:absolute;
  z-index:-4;
  left:50%;
  top:42%;
  width:min(42vw,660px);
  height:72%;
  transform:translate(-50%,-50%);
  clip-path:polygon(42% 0,58% 0,79% 100%,21% 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(230,239,255,.22) 44%,rgba(255,255,255,.04));
  opacity:.72;
  pointer-events:none;
}
.passage-scene { position:absolute; inset:0; pointer-events:none; }
.passage-depth { position:absolute; inset:0; }
.passage-plane {
  position:absolute;
  top:0;
  bottom:0;
  width:46%;
  border:1px solid rgba(194,210,239,.13);
  background:linear-gradient(180deg,rgba(13,22,49,.92),rgba(30,45,78,.55) 27%,rgba(133,154,190,.16) 63%,rgba(255,255,255,.035));
  box-shadow:0 0 90px rgba(7,13,31,.20);
  transition:transform 120ms linear,opacity 120ms linear;
}
.passage-plane-left {
  left:-15%;
  transform-origin:100% 19%;
  transform:translateX(var(--passage-left-shift)) skewY(-4deg);
  clip-path:polygon(0 0,100% 0,77% 100%,0 100%);
}
.passage-plane-right {
  right:-15%;
  transform-origin:0 19%;
  transform:translateX(var(--passage-right-shift)) skewY(4deg);
  clip-path:polygon(0 0,100% 0,100% 100%,23% 100%);
}
.passage-plane-left::after,.passage-plane-right::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 15%,rgba(123,150,207,.16) 43%,rgba(255,255,255,.12) 82%),
    linear-gradient(90deg,rgba(255,255,255,.03),transparent 35%);
}
.passage-aperture {
  position:absolute;
  left:50%;
  top:46px;
  width:min(54vw,790px);
  height:825px;
  transform:translateX(-50%);
  opacity:var(--passage-opacity);
}
.passage-aperture::after {
  content:'';
  position:absolute;
  left:50%;
  top:7%;
  bottom:4%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(173,194,236,.05),rgba(194,212,247,.48) 42%,rgba(93,124,204,.20) 71%,transparent);
}
.passage-frame {
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(220,230,250,.52);
  border-bottom-color:rgba(255,255,255,.72);
  transform:translate(-50%,-50%) scale(var(--passage-frame-scale));
  box-shadow:0 0 64px rgba(118,150,220,.075),inset 0 0 54px rgba(255,255,255,.045);
}
.passage-frame-a { width:100%; height:100%; border-radius:46% 46% 8% 8% / 24% 24% 6% 6%; }
.passage-frame-b { width:74%; height:82%; border-radius:46% 46% 9% 9% / 27% 27% 7% 7%; opacity:.82; }
.passage-frame-c { width:49%; height:64%; border-radius:46% 46% 11% 11% / 30% 30% 9% 9%; opacity:.66; }
.passage-light {
  position:absolute;
  left:50%;
  top:43%;
  width:min(34vw,520px);
  height:610px;
  transform:translate(-50%,-50%) scaleX(var(--passage-light-scale));
  border-radius:48%;
  background:radial-gradient(ellipse,rgba(255,255,255,.90) 0,rgba(231,239,255,.44) 28%,rgba(147,177,235,.13) 55%,transparent 73%);
  filter:blur(9px);
  opacity:calc(.28 + (var(--passage-opacity) * .56));
}
.passage-route { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.passage-route-base,.passage-route-active { fill:none; stroke-linecap:round; }
.passage-route-base {
  stroke:rgba(198,214,244,.50);
  stroke-width:1.35;
  filter:drop-shadow(0 0 5px rgba(126,151,207,.15));
}
.passage-route-active {
  stroke:url(#passageSignal);
  stroke-width:2.65;
  stroke-dasharray:1;
  stroke-dashoffset:var(--passage-route-offset);
  filter:drop-shadow(0 0 10px rgba(49,91,255,.30));
}
.passage-route-node {
  fill:#fff;
  stroke:#6f93f4;
  stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(49,91,255,.34));
}
.passage-route-node-end { fill:#315bff; opacity:var(--passage-end-opacity); }
.passage-copy { position:relative; z-index:3; padding-top:300px; text-align:center; }
.passage-meta {
  display:flex;
  justify-content:center;
  gap:18px;
  color:#65779a;
  font-size:11px;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.passage-meta span { color:#315bff; }
.passage-copy h2 {
  max-width:980px;
  margin:28px auto 0;
  font-size:clamp(46px,4.9vw,76px);
  font-weight:560;
  line-height:.99;
  letter-spacing:-.059em;
  text-wrap:balance;
}
.passage-copy h2 span {
  color:#315bff;
  text-shadow:0 8px 26px rgba(49,91,255,.09);
}
.passage-copy > p:last-child {
  max-width:625px;
  margin:28px auto 0;
  color:#4f6182;
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.58;
}
.passage-axis {
  position:absolute;
  z-index:3;
  left:50%;
  bottom:84px;
  width:min(100%,1220px);
  transform:translateX(-50%);
}
.passage-axis-line {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  gap:22px;
  padding-top:22px;
  border-top:1px solid rgba(91,120,183,.34);
  color:#5f7195;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.passage-axis-line span:nth-child(2) { text-align:center; color:#315bff; }
.passage-axis-line span:last-child { text-align:right; }
.passage-axis-line::before {
  content:'';
  position:absolute;
  left:50%;
  top:-4px;
  width:7px;
  height:7px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#315bff;
  box-shadow:0 0 0 7px rgba(49,91,255,.08),0 0 18px rgba(49,91,255,.28);
}

@media (max-width:900px) {
  .passage-chapter { min-height:930px; background:linear-gradient(180deg,#101935 0%,#26395b 21%,#a4b6d1 44%,#eef3fa 65%,#f7f9fc 100%); }
  .passage-chapter::after { width:70vw; height:68%; }
  .passage-plane { width:56%; }
  .passage-plane-left { left:-27%; }
  .passage-plane-right { right:-27%; }
  .passage-aperture { top:48px; width:76vw; height:680px; }
  .passage-light { width:60vw; height:510px; }
  .passage-copy { padding-top:245px; }
  .passage-copy h2 { max-width:720px; font-size:clamp(42px,7.6vw,64px); }
  .passage-copy > p:last-child { max-width:540px; }
  .passage-axis { bottom:58px; }
}

@media (max-width:620px) {
  .passage-chapter { min-height:840px; }
  .passage-chapter::after { width:88vw; }
  .passage-aperture { width:94vw; height:610px; }
  .passage-frame-a { width:90%; }
  .passage-frame-b { width:70%; }
  .passage-frame-c { width:48%; }
  .passage-light { width:78vw; height:460px; }
  .passage-copy { padding-top:220px; text-align:left; }
  .passage-meta { justify-content:flex-start; }
  .passage-copy h2 { margin-top:24px; font-size:clamp(39px,10.7vw,52px); }
  .passage-copy > p:last-child { margin:24px 0 0; font-size:17px; }
  .passage-axis { bottom:46px; }
  .passage-axis-line { gap:8px; font-size:8px; letter-spacing:.12em; }
}

@media (prefers-reduced-motion:reduce) {
  .passage-chapter {
    --passage-left-shift:-10vw !important;
    --passage-right-shift:10vw !important;
    --passage-frame-scale:1 !important;
    --passage-light-scale:1 !important;
    --passage-opacity:1 !important;
    --passage-route-offset:0 !important;
    --passage-end-opacity:1 !important;
  }
  .passage-plane,.passage-frame,.passage-light { transition:none !important; }
}