.crt-portal {
  display: none;
}

.boot-pending body {
  overflow: hidden;
}

.boot-pending .crt-boot,
.boot-pending .crt-boot[hidden] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  overflow: hidden;
  background: #060707;
  color: #d7c6a3;
  isolation: isolate;
}

.crt-boot::before,
.crt-boot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.crt-boot::before {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(173, 255, 199, 0.026) 4px);
  mix-blend-mode: screen;
}

.crt-boot::after {
  background:
    linear-gradient(90deg, rgba(111, 39, 33, 0.09), transparent 11%, transparent 89%, rgba(111, 39, 33, 0.09)),
    radial-gradient(circle at 50% 50%, rgba(173, 255, 199, 0.032), transparent 38%);
  box-shadow: inset 0 0 9rem rgba(0, 0, 0, 0.76);
}

.crt-aperture {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  padding: max(4.5rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(3rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 36%, rgba(197, 154, 61, 0.045), transparent 30%),
    radial-gradient(circle at 78% 70%, rgba(173, 255, 199, 0.035), transparent 28%),
    #080909;
  transform-origin: center;
  animation: crt-aperture-open 360ms cubic-bezier(0.18, 0.78, 0.16, 1) both;
}

.boot-loader {
  position: relative;
  z-index: 4;
  width: min(48rem, 74vw);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
}

.boot-title {
  margin: 0 0 clamp(1.5rem, 4vh, 2.8rem);
  color: rgba(215, 198, 163, 0.58);
  font: 400 clamp(0.65rem, 0.85vw, 0.9rem) / 1 "DM Mono", monospace;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.boot-command {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: 1.3em;
  margin: 0 0 clamp(1.15rem, 2.4vh, 1.75rem);
  color: #d7c6a3;
  font: 400 clamp(1.9rem, 4.8vw, 4.75rem) / 1 "DM Mono", monospace;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.boot-command > span {
  color: #adffc7;
  font-size: 0.72em;
  text-shadow: 0 0 1rem rgba(173, 255, 199, 0.55);
}

.boot-command code {
  min-height: 1em;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.boot-command.is-typing code::after {
  content: "_";
  display: inline-block;
  margin-left: 0.08em;
  color: #adffc7;
  animation: cursor-blink 440ms steps(2, end) infinite;
}

.boot-command.is-glitch code {
  color: #adffc7;
  text-shadow: -0.08em 0 #a44a2a, 0.08em 0 rgba(197, 154, 61, 0.88);
  animation: single-glitch 120ms steps(3, end) both;
}

.boot-command.is-resolved code {
  color: #adffc7;
  text-shadow: 0 0 1.3rem rgba(173, 255, 199, 0.25);
}

.boot-progress {
  position: relative;
  width: 100%;
  height: 6px;
  border: 1px solid rgba(173, 255, 199, 0.58);
  background: repeating-linear-gradient(90deg, transparent 0 8.4%, rgba(173, 255, 199, 0.1) 8.5% 8.7%), rgba(173, 255, 199, 0.025);
  box-shadow: 0 0 1.2rem rgba(173, 255, 199, 0.1), 8px 8px 0 -5px rgba(111, 39, 33, 0.55);
  clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0 100%);
}

.boot-progress::before,
.boot-progress::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.boot-progress::before {
  left: 0;
  top: -5px;
  width: 18%;
  height: 1px;
  background: #c59a3d;
  box-shadow: 1rem 14px 0 rgba(173, 255, 199, 0.28);
}

.boot-progress::after {
  top: -3px;
  bottom: -3px;
  left: calc(var(--boot-progress, 0) * 100% - 1px);
  width: 2px;
  background: #adffc7;
  box-shadow: 0 0 0.9rem #adffc7;
  opacity: clamp(0, calc(var(--boot-progress, 0) * 3), 1);
  transition: left 110ms linear;
}

.boot-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #6f2721 0%, #c59a3d 48%, #adffc7 100%);
  box-shadow: 0 0 1.2rem rgba(173, 255, 199, 0.42);
  transform: scaleX(var(--boot-progress, 0));
  transform-origin: left;
  transition: transform 110ms linear;
}

.boot-hologram {
  position: absolute;
  inset: clamp(1.1rem, 3.2vw, 3.4rem);
  z-index: 2;
  pointer-events: none;
  perspective: 900px;
}

.boot-holo {
  position: absolute;
  width: clamp(4rem, 9vw, 8.5rem);
  height: clamp(3.2rem, 7vw, 6.5rem);
  filter: drop-shadow(0 0 0.55rem rgba(173, 255, 199, 0.13));
  opacity: 0.72;
  animation: holo-drift 2.8s ease-in-out infinite alternate;
}

.boot-holo::before,
.boot-holo::after,
.boot-holo span::before,
.boot-holo span::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.boot-holo::before { top: 0; left: 0; width: 72%; height: 1px; }
.boot-holo::after { top: 0; left: 0; width: 1px; height: 70%; }
.boot-holo span::before {
  top: 0.7rem;
  left: 0.7rem;
  width: 36%;
  height: 1px;
  box-shadow: 0 0.45rem 0 currentColor, 1rem 0.9rem 0 rgba(197, 154, 61, 0.7);
}
.boot-holo span::after {
  top: 0.7rem;
  left: 0.7rem;
  width: 1px;
  height: 1.7rem;
  box-shadow: 0.45rem 1.7rem 0 rgba(111, 39, 33, 0.9);
}

.boot-holo--nw { left: 0; top: 0; color: #adffc7; transform: rotateY(22deg); }
.boot-holo--ne { right: 0; top: 0; color: #c59a3d; transform: scaleX(-1) rotateY(22deg); animation-delay: -1.1s; }
.boot-holo--sw { left: 0; bottom: 0; color: #c59a3d; transform: scaleY(-1) rotateY(22deg); animation-delay: -0.6s; }
.boot-holo--se { right: 0; bottom: 0; color: #adffc7; transform: scale(-1) rotateY(22deg); animation-delay: -1.7s; }

.boot-depth-rail {
  position: absolute;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(transparent, rgba(173, 255, 199, 0.34), transparent);
  opacity: 0.48;
}

.boot-depth-rail::after {
  content: "";
  position: absolute;
  top: 24%;
  width: clamp(1.6rem, 4vw, 4rem);
  height: 26%;
  border-top: 1px solid rgba(197, 154, 61, 0.5);
  border-bottom: 1px solid rgba(173, 255, 199, 0.3);
  transform: perspective(120px) rotateY(48deg);
}

.boot-depth-rail--left { left: 1.3%; }
.boot-depth-rail--left::after { left: 0; transform-origin: left; }
.boot-depth-rail--right { right: 1.3%; }
.boot-depth-rail--right::after { right: 0; transform: perspective(120px) rotateY(-48deg); transform-origin: right; }

.crt-skip {
  position: absolute;
  z-index: 12;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid rgba(173, 255, 199, 0.42);
  background: rgba(8, 9, 9, 0.72);
  color: #adffc7;
  font: 400 0.52rem/1 "DM Mono", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.crt-skip:hover,
.crt-skip:focus-visible {
  background: #adffc7;
  color: #080909;
  outline: 2px solid #adffc7;
  outline-offset: 3px;
}

.crt-boot.is-exiting {
  animation: crt-collapse 300ms cubic-bezier(0.68, 0, 0.84, 0.18) both;
}

.crt-boot.is-exiting .crt-skip { opacity: 0; }

/* Routed dossiers are revealed by viewport shutters. The document itself is never
   clipped, filtered, transformed, or replaced, so fixed artwork and realm colour
   remain stable while the aperture moves from the true screen centre. */
.tv-route-pending,
.tv-route-opening,
.tv-route-closing {
  overflow: hidden;
}

.tv-route-pending::before,
.tv-route-pending::after,
.tv-route-opening::before,
.tv-route-opening::after,
.tv-route-closing::before,
.tv-route-closing::after {
  content: "";
  position: fixed;
  left: 0;
  z-index: 300;
  width: 100vw;
  height: calc(50vh + 1px);
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(173, 255, 199, 0.024) 4px),
    radial-gradient(circle at 50% 100%, rgba(173, 255, 199, 0.045), transparent 44%),
    #060707;
  will-change: transform;
}

.tv-route-pending::before,
.tv-route-opening::before,
.tv-route-closing::before {
  top: 0;
  border-bottom: 1px solid rgba(173, 255, 199, 0.76);
  box-shadow: 0 1px 1.2rem rgba(173, 255, 199, 0.28);
}

.tv-route-pending::after,
.tv-route-opening::after,
.tv-route-closing::after {
  bottom: 0;
  border-top: 1px solid rgba(173, 255, 199, 0.76);
  box-shadow: 0 -1px 1.2rem rgba(173, 255, 199, 0.28);
}

.tv-route-pending::before,
.tv-route-pending::after { transform: translateY(0); }
.tv-route-opening::before { animation: tv-shutter-top-open 720ms cubic-bezier(0.18, 0.78, 0.16, 1) both; }
.tv-route-opening::after { animation: tv-shutter-bottom-open 720ms cubic-bezier(0.18, 0.78, 0.16, 1) both; }
.tv-route-closing body { pointer-events: none; }
.tv-route-closing::before { animation: tv-shutter-top-close 560ms cubic-bezier(0.72, 0, 0.86, 0.28) both; }
.tv-route-closing::after { animation: tv-shutter-bottom-close 560ms cubic-bezier(0.72, 0, 0.86, 0.28) both; }

@keyframes crt-aperture-open {
  0% { transform: scaleY(0.008); opacity: 0.48; }
  55% { transform: scaleY(0.008); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes single-glitch {
  0% { transform: translateX(0) skewX(0); }
  33% { transform: translateX(-0.08em) skewX(4deg); }
  66% { transform: translateX(0.06em) skewX(-3deg); }
  100% { transform: translateX(0) skewX(0); }
}

@keyframes cursor-blink { 50% { opacity: 0; } }

@keyframes holo-drift {
  from { opacity: 0.46; filter: drop-shadow(0 0 0.25rem rgba(173, 255, 199, 0.08)); }
  to { opacity: 0.82; filter: drop-shadow(0 0 0.8rem rgba(173, 255, 199, 0.18)); }
}

@keyframes crt-collapse {
  0% { transform: scale3d(1, 1, 1); opacity: 1; }
  68% { transform: scale3d(1, 0.006, 1); opacity: 0.88; }
  100% { transform: scale3d(0, 0.002, 1); opacity: 0; }
}

@keyframes tv-shutter-top-open { to { transform: translateY(-100%); } }
@keyframes tv-shutter-bottom-open { to { transform: translateY(100%); } }
@keyframes tv-shutter-top-close { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes tv-shutter-bottom-close { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (max-width: 760px) {
  .crt-aperture {
    padding: max(4.7rem, env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) max(3rem, env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left));
  }
  .boot-loader { width: min(34rem, 82vw); }
  .boot-title { margin-bottom: 1.4rem; }
  .boot-command { gap: 0.45rem; font-size: clamp(1.45rem, 8vw, 2.6rem); }
  .boot-hologram { inset: max(1rem, env(safe-area-inset-top)) 0.9rem max(1rem, env(safe-area-inset-bottom)); }
  .boot-depth-rail { display: none; }
  .crt-skip { font-size: 0.46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .crt-boot,
  .boot-pending .crt-boot { display: none !important; }
  .boot-pending body { overflow: auto; }
  .tv-route-pending::before,
  .tv-route-pending::after,
  .tv-route-opening::before,
  .tv-route-opening::after,
  .tv-route-closing::before,
  .tv-route-closing::after { content: none; }
}