.showcase-signal-layer { position: absolute; left: 0; top: 0; width: var(--oa-layer-w); height: var(--oa-layer-h); z-index: 21; overflow: hidden; pointer-events: none; contain: strict; opacity: 1; transition: opacity 90ms steps(3, end); }
.showcase-signal-layer[data-coordinate-space="viewport"] { position: fixed; left: var(--oa-layer-left); top: var(--oa-layer-top); }
.showcase-signal-layer.is-clearing { opacity: 0; }
.showcase-signal-route-block { position: absolute; left: var(--oa-block-x); top: var(--oa-block-y); width: var(--oa-block-w); height: var(--oa-block-h); border: 1px solid var(--oa-block-color); background: var(--oa-block-fill, transparent); opacity: 0; animation: oa-showcase-route-block 130ms steps(4, end) var(--oa-block-delay) both; }
@keyframes oa-showcase-route-block { 0% { opacity: 0; background: transparent; } 34% { opacity: .62; background: transparent; } 100% { opacity: .62; background: var(--oa-block-fill, transparent); } }
.showcase-signal-source { position: absolute; left: var(--oa-source-x); top: var(--oa-source-y); width: var(--oa-source-w); height: var(--oa-source-h); border: 1px solid var(--blue); background: var(--blue); opacity: 1; animation: oa-showcase-source 300ms steps(7, end) both; transform-origin: right center; }
.showcase-signal-source[data-color="acid"] { border-color: var(--acid); background: var(--acid); }
.showcase-signal-source[data-direction="back"] { transform-origin: right center; }
@keyframes oa-showcase-source { 0%, 18% { opacity: 1; transform: scaleX(1); } 76% { opacity: 1; transform: scaleX(.18); background: transparent; } 100% { opacity: 0; transform: scaleX(.08); background: transparent; } }
.showcase-signal-terminal { position: absolute; left: var(--oa-terminal-x); top: var(--oa-terminal-y); width: var(--oa-terminal-w); height: var(--oa-terminal-h); border: 1px solid var(--oa-terminal-color, var(--acid)); background: var(--oa-terminal-color, var(--acid)); opacity: 0; animation: oa-showcase-terminal 360ms steps(8, end) var(--oa-terminal-delay) both; transform-origin: right center; }
.showcase-signal-terminal[data-direction="next"] { --oa-terminal-color: var(--blue); transform-origin: left center; }
.showcase-signal-terminal[data-direction="back"] { transform-origin: right center; }
@keyframes oa-showcase-terminal { 0% { opacity: 0; transform: scaleX(.08); background: transparent; } 12% { opacity: 1; transform: scaleX(.14); background: transparent; } 68%, 100% { opacity: 1; transform: scaleX(1); background: var(--oa-terminal-color, var(--acid)); } }
.showcase-rail-control { z-index: 22; }
.showcase-rail-control.is-signal-locked { cursor: wait !important; }
.showcase-rail.is-signal-travelling .showcase-rail-control { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.showcase-rail.is-signal-travelling .showcase-rail-control.is-signal-source-control { opacity: 1 !important; visibility: visible !important; animation: oa-showcase-control-depart 430ms steps(8, end) both; }
.showcase-rail-control.is-signal-source-control > * { visibility: hidden; }
@keyframes oa-showcase-control-depart { 0%, 46% { clip-path: inset(0); } 100% { clip-path: inset(0 0 0 92%); opacity: 0; } }
.showcase-back-arrow.is-signal-source-control { animation-name: oa-showcase-control-depart-back !important; }
@keyframes oa-showcase-control-depart-back { 0%, 46% { clip-path: inset(0); } 100% { clip-path: inset(0 92% 0 0); opacity: 0; } }
html.oa-showcase-signal-active #cursor,
html.oa-showcase-signal-active .oa-pixel-hover-fill,
body:has(.showcase-rail.is-signal-travelling) #cursor,
body:has(.showcase-rail.is-signal-travelling) .oa-pixel-hover-fill { opacity: 0 !important; visibility: hidden !important; }
html.oa-showcase-signal-active .hero-ascii-title.is-locator-active::before,
html.oa-showcase-signal-active .hero-ascii-title.is-locator-active::after { display: none !important; }
html.oa-showcase-signal-active .hero-code-pointer { visibility: hidden !important; }
.showcase-rail.is-signal-travelling .showcase-rail-control.oa-signal-arrival-outline { opacity: 1 !important; visibility: visible !important; border-color: var(--ink) !important; background: var(--acid) !important; color: var(--ink) !important; outline: 1px solid var(--acid); outline-offset: 2px; animation: oa-showcase-control-spawn 210ms steps(6, end) both; }
.showcase-rail.is-signal-travelling .showcase-next-arrow.oa-signal-arrival-outline { border-color: var(--ink) !important; background: var(--blue) !important; color: var(--paper) !important; outline-color: var(--blue); }
.showcase-rail-control.oa-signal-arrival-outline > * { visibility: hidden; }
.showcase-rail-control.oa-signal-arrival-outline.is-signal-copy-ready > * { visibility: visible; }
@keyframes oa-showcase-control-spawn { 0% { opacity: 1; clip-path: inset(0 100% 0 0); background: transparent; } 100% { opacity: 1; visibility: visible; clip-path: inset(0); background: var(--acid); } }
@keyframes oa-showcase-control-spawn-back { 0% { opacity: 1; clip-path: inset(0 0 0 100%); background: transparent; } 100% { opacity: 1; visibility: visible; clip-path: inset(0); background: var(--acid); } }
.showcase-back-arrow.oa-signal-arrival-outline { animation-name: oa-showcase-control-spawn-back; }
@media (prefers-reduced-motion: reduce) { .showcase-signal-layer { display: none; } .showcase-rail.is-signal-travelling .showcase-rail-control.oa-signal-arrival-outline { outline-width: 1px; animation: none; } }