/* Studio signal: WebGL planet with a complete CSS fallback. */
.interlude {
  --signal-x: 0px;
  --signal-y: 0px;
  isolation: isolate;
  height: min(86svh, 860px);
  min-height: 660px;
  background: radial-gradient(circle at 50% 48%, #183430 0, #0b1718 38%, #06090d 80%);
}
.interlude::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle at calc(50% + var(--signal-x)) calc(45% + var(--signal-y)), rgba(201,255,109,.2), transparent 38%);
  opacity: .25;
  transition: opacity 1.5s ease;
  animation: signalBreathe 9s ease-in-out infinite;
}
.interlude.is-awake::before { opacity: 1; }
.interlude::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background: repeating-linear-gradient(0deg, transparent 0 119px, rgba(166,240,217,.045) 120px), repeating-linear-gradient(90deg, transparent 0 119px, rgba(166,240,217,.045) 120px);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 73%);
}
.interlude-sky { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; background-image: radial-gradient(circle at 8% 20%, rgba(239,255,211,.9) 0 1px, transparent 2px), radial-gradient(circle at 91% 72%, rgba(239,255,211,.7) 0 1px, transparent 2px), radial-gradient(circle at 77% 13%, rgba(239,255,211,.55) 0 1px, transparent 2px), radial-gradient(circle at 23% 76%, rgba(239,255,211,.5) 0 1px, transparent 2px); }
.interlude.is-awake .interlude-sky { opacity: 1; }
.interlude-sky i { position: absolute; left: 50%; top: 50%; width: min(740px,83vw); aspect-ratio: 1; border: 1px solid rgba(201,255,109,.14); border-radius: 50%; transform: translate(-50%,-50%) rotate(-22deg) scaleY(.65); animation: signalOrbit 36s linear infinite; }
.interlude-sky i:nth-child(2) { width: min(880px,95vw); border-style: dashed; border-color: rgba(139,233,238,.09); animation-duration: 56s; animation-direction: reverse; }
.interlude-sky i:nth-child(3) { width: min(1060px,112vw); border-color: rgba(139,233,238,.07); animation-duration: 68s; }
.interlude-sky i::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid), 0 0 35px var(--acid); }
.interlude-sky i:nth-child(2)::after { width: 4px; height: 4px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.interlude-sky i:nth-child(3)::after { width: 3px; height: 3px; opacity: .7; }
.interlude-orb { z-index: 1; width: min(720px,74vw); border-color: rgba(201,255,109,.14); transform: translate3d(var(--signal-x),var(--signal-y),0); transition: transform .35s ease-out; filter: drop-shadow(0 0 55px rgba(167,233,154,.1)); }
.interlude-orb canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.interlude-orb.has-webgl canvas { opacity: 1; }
.interlude-orb.has-webgl .interlude-ring, .interlude-orb.has-webgl .orb-core { opacity: 0; }
.interlude-orb .interlude-ring { transition: opacity .5s; animation: signalRingA 18s linear infinite; }
.interlude-orb .ring-two { animation: signalRingB 25s linear infinite reverse; }
.interlude-orb .orb-core { transition: opacity .5s; position: relative; overflow: hidden; animation: signalPlanetTurn 14s ease-in-out infinite alternate; }
.interlude-orb .orb-core::after { content: ""; position: absolute; inset: -50%; border-radius: 50%; background: conic-gradient(from 0deg,transparent 0 45%,rgba(255,255,255,.1) 50%,transparent 55%); animation: signalSweep 10s linear infinite; }
.interlude-copy { z-index: 4; width: min(1500px,calc(100% - 40px)); pointer-events: none; }
.interlude-copy .section-index { opacity: 0; transform: translateY(18px); transition: opacity .8s ease .15s,transform .8s ease .15s; }
.interlude.is-awake .interlude-copy .section-index { opacity: 1; transform: translateY(0); }
.interlude-statement { margin: 28px 0 !important; }
.signal-mask { display: block; overflow: hidden; padding: .05em 0 .08em; margin: -.05em 0 -.08em; }
.signal-line { display: block; transform: translateY(115%) rotate(2deg); opacity: 0; transition: transform 1.25s cubic-bezier(.16,1,.3,1),opacity .9s ease; will-change: transform; }
.signal-mask:nth-child(2) .signal-line { transition-delay: .22s; }
.interlude.is-awake .signal-line { transform: translateY(0) rotate(0); opacity: 1; }
.interlude-axis { z-index: 4; opacity: 0; transform: translateY(16px); transition: opacity 1s ease .65s,transform 1s ease .65s; }
.interlude.is-awake .interlude-axis { opacity: 1; transform: translateY(0); }
html[data-theme="light"] .interlude { background: radial-gradient(circle at 50% 46%,#ffe4ad 0,#f1d1aa 48%,#e8d2b8 100%); }
html[data-theme="light"] .interlude::before { background: radial-gradient(circle at calc(50% + var(--signal-x)) calc(45% + var(--signal-y)),rgba(255,247,187,.85),transparent 41%); }
html[data-theme="light"] .interlude::after { opacity: .25; background: repeating-linear-gradient(0deg,transparent 0 119px,rgba(57,99,98,.11) 120px),repeating-linear-gradient(90deg,transparent 0 119px,rgba(57,99,98,.11) 120px); }
html[data-theme="light"] .interlude-sky { filter: sepia(.6); }
html[data-theme="light"] .interlude-orb { filter: drop-shadow(0 0 70px rgba(255,214,126,.52)); }
html[data-theme="light"] .interlude-copy strong { color: #ad4e2d; }
@keyframes signalBreathe { 50% { transform: scale(1.15); } }
@keyframes signalOrbit { to { transform: translate(-50%,-50%) rotate(338deg) scaleY(.65); } }
@keyframes signalRingA { to { transform: rotate(402deg) scaleX(.35); } }
@keyframes signalRingB { to { transform: rotate(322deg) scaleX(.72); } }
@keyframes signalPlanetTurn { 50% { filter: brightness(1.15); transform: rotate(5deg); } }
@keyframes signalSweep { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .interlude { height: 600px; min-height: 580px; }
  .interlude-orb { width: min(470px,92vw); }
  .interlude-copy { width: calc(100% - 36px); }
  .interlude-statement { font-size: clamp(36px,7.5vw,60px) !important; line-height: 1.04 !important; }
  .interlude-axis { bottom: 26px; max-width: 90%; font-size: 8px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .interlude::before,.interlude-sky i,.interlude-orb,.interlude-orb .interlude-ring,.interlude-orb .orb-core,.interlude-orb .orb-core::after { animation: none !important; }
  .interlude-copy .section-index,.signal-line,.interlude-axis { opacity: 1 !important; transform: none !important; transition: none !important; }
  .interlude-sky { opacity: 1; }
}
.interlude-copy .section-index { display: inline-block; padding: 8px 12px; border: 1px solid rgba(201,255,109,.2); background: rgba(3,12,13,.32); backdrop-filter: blur(6px); }
.interlude-statement .signal-line { text-shadow: 0 3px 24px rgba(2,8,8,.5); }
html[data-theme="light"] .interlude-copy .section-index { color: #87381f; border-color: rgba(135,56,31,.28); background: rgba(255,239,202,.72); }
html[data-theme="light"] .interlude-statement .signal-line { text-shadow: 0 1px 0 rgba(255,242,213,.65),0 0 22px rgba(255,230,184,.75); }
html[data-theme="light"] .interlude-statement strong.signal-line { color: #9d3d24; }