/* 05 Boot loader: CRT-contained RNDMD signal acquisition sequence. */
.boot-loader {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  color: #214cff;
  background: #030403;
  font-family: "Courier New", Courier, monospace;
  cursor: wait;
  animation: boot-loader-failsafe .01s linear 9s forwards;
}

.boot-loader[hidden] { display: none; }
.boot-loader.is-exiting { pointer-events:none; background:transparent; animation:none; }
.boot-loader.is-exiting::before,
.boot-loader.is-exiting::after,
.boot-loader.is-exiting > :not(.boot-loader__exit) { opacity:0; animation:none; }
.is-booting .camera-status { visibility:hidden; opacity:0; }

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

.boot-loader::before {
  opacity: .13;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(57,92,255,.34) 4px);
}

.boot-loader::after {
  opacity: .18;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(33,76,255,.28) 12.2% 12.5%, transparent 12.7% 74%, rgba(33,76,255,.2) 74.2% 74.5%, transparent 74.7%),
    linear-gradient(180deg, transparent 0 24%, rgba(33,76,255,.16) 24.2% 24.5%, transparent 24.7% 82%, rgba(33,76,255,.22) 82.2% 82.5%, transparent 82.7%);
}

.boot-loader__scan {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .32;
  background: linear-gradient(180deg, transparent 0 42%, rgba(33,76,255,.18) 48%, rgba(78,244,255,.28) 50%, rgba(33,76,255,.12) 52%, transparent 58%);
  transform: translateY(-72%);
}

.boot-loader__center {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: min(78%, 760px);
}

.boot-loader__mark {
  position: relative;
  isolation: isolate;
  min-width: 5.7ch;
  color: #214cff;
  font: 900 clamp(44px, 10vw, 138px)/.78 Arial Black, Arial, sans-serif;
  letter-spacing: -.095em;
  text-align: center;
  text-shadow: 0 0 10px rgba(33,76,255,.72), 0 0 30px rgba(33,76,255,.3);
}

.boot-loader__mark::before,
.boot-loader__mark::after {
  content: attr(data-word);
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .76;
  clip-path: inset(0 0 0 var(--lock-progress,0%));
  mix-blend-mode: screen;
  pointer-events: none;
}

.boot-loader__mark::before { color: #ff294d; transform: translateX(-5px); text-shadow: 0 0 14px rgba(255,41,77,.8); }
.boot-loader__mark::after { color: #2bf4ff; transform: translateX(5px); text-shadow: 0 0 14px rgba(43,244,255,.8), 0 0 22px rgba(44,255,117,.44); }
.boot-loader__mark span { display: block; }

.boot-loader__slice {
  --slice-x: 0px;
  --slice-scale: 1;
  position: absolute;
  z-index: 3;
  inset: 0;
  color: #2d52ff;
  opacity: .86;
  pointer-events: none;
  transform: translate3d(var(--slice-x),0,0) scaleX(var(--slice-scale));
  transform-origin: center;
  text-shadow: -3px 0 rgba(255,37,76,.72), 3px 0 rgba(43,244,255,.72);
}
.boot-loader__slice--1 { clip-path: inset(2% 0 82% var(--lock-progress,0%)); --slice-x: -15px; --slice-scale: 1.08; }
.boot-loader__slice--2 { clip-path: inset(19% 0 65% var(--lock-progress,0%)); --slice-x: 20px; --slice-scale: 1.16; }
.boot-loader__slice--3 { clip-path: inset(36% 0 48% var(--lock-progress,0%)); --slice-x: -28px; --slice-scale: 1.22; }
.boot-loader__slice--4 { clip-path: inset(53% 0 31% var(--lock-progress,0%)); --slice-x: 24px; --slice-scale: 1.13; }
.boot-loader__slice--5 { clip-path: inset(69% 0 15% var(--lock-progress,0%)); --slice-x: -18px; --slice-scale: 1.18; }
.boot-loader__slice--6 { clip-path: inset(85% 0 1% var(--lock-progress,0%)); --slice-x: 13px; --slice-scale: 1.1; }

.boot-loader__blocks { position:absolute; z-index:3; inset:0; pointer-events:none; }
.boot-loader__blocks i { position:absolute; width:clamp(3px,.45vw,7px); aspect-ratio:1; background:#3458ff; opacity:.72; box-shadow:-3px 0 rgba(255,37,76,.42),3px 0 rgba(43,244,255,.44); }
.boot-loader__blocks i:nth-child(1) { left:12%; top:28%; }
.boot-loader__blocks i:nth-child(2) { left:18%; top:64%; transform:scaleX(3); }
.boot-loader__blocks i:nth-child(3) { left:27%; top:17%; transform:scaleY(2); }
.boot-loader__blocks i:nth-child(4) { left:34%; top:73%; }
.boot-loader__blocks i:nth-child(5) { left:42%; top:31%; transform:scaleX(2); }
.boot-loader__blocks i:nth-child(6) { left:48%; top:82%; }
.boot-loader__blocks i:nth-child(7) { left:58%; top:20%; transform:scaleX(3); }
.boot-loader__blocks i:nth-child(8) { left:64%; top:69%; transform:scaleY(2); }
.boot-loader__blocks i:nth-child(9) { left:72%; top:37%; }
.boot-loader__blocks i:nth-child(10) { left:81%; top:76%; transform:scaleX(2); }
.boot-loader__blocks i:nth-child(11) { left:87%; top:23%; }
.boot-loader__blocks i:nth-child(12) { left:91%; top:57%; transform:scaleY(3); }

.boot-loader__exit { position:absolute; z-index:12; inset:0; overflow:hidden; opacity:0; pointer-events:none; }
.boot-loader__exit i { position:absolute; left:-8%; width:116%; height:14%; opacity:0; background:#030403; box-shadow:inset 0 1px rgba(52,88,255,.62),-9px 0 rgba(255,37,76,.52),9px 0 rgba(43,244,255,.54); }
.boot-loader__exit i:nth-child(1) { top:0; --exit-a:-7%; --exit-b:14%; --exit-out:108%; }
.boot-loader__exit i:nth-child(2) { top:12%; --exit-a:11%; --exit-b:-18%; --exit-out:-108%; }
.boot-loader__exit i:nth-child(3) { top:24%; --exit-a:-15%; --exit-b:8%; --exit-out:108%; }
.boot-loader__exit i:nth-child(4) { top:36%; --exit-a:8%; --exit-b:-12%; --exit-out:-108%; }
.boot-loader__exit i:nth-child(5) { top:48%; --exit-a:-10%; --exit-b:18%; --exit-out:108%; }
.boot-loader__exit i:nth-child(6) { top:60%; --exit-a:14%; --exit-b:-7%; --exit-out:-108%; }
.boot-loader__exit i:nth-child(7) { top:72%; --exit-a:-6%; --exit-b:12%; --exit-out:108%; }
.boot-loader__exit i:nth-child(8) { top:84%; --exit-a:9%; --exit-b:-16%; --exit-out:-108%; }

.boot-loader__label {
  margin: clamp(22px, 4vw, 42px) 0 10px;
  color: #4668ff;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .28em;
}

.boot-loader__meter { width: min(290px, 62vw); height: 2px; overflow: hidden; background: rgba(33,76,255,.2); }
.boot-loader__meter i { display: block; width: 100%; height: 100%; background: #214cff; box-shadow: 0 0 12px rgba(33,76,255,.7); transform: scaleX(0); transform-origin: left center; }
.boot-loader__progress { margin: 9px 0 0; color: #284fff; font-size: 10px; letter-spacing: .14em; }

.boot-loader__codes,
.boot-loader__symbols,
.boot-loader__status {
  position: absolute;
  z-index: 3;
  color: rgba(47,84,255,.72);
  font-size: clamp(9px, .8vw, 12px);
  letter-spacing: .08em;
}

.boot-loader__codes { top: 9%; display: grid; gap: 7px; }
.boot-loader__codes--left { left: 5%; }
.boot-loader__codes--right { right: 5%; text-align: right; }
.boot-loader__symbols { font-size: clamp(11px, 1.05vw, 15px); word-spacing: 1.2em; }
.boot-loader__symbols--top { top: 17%; right: 22%; }
.boot-loader__symbols--bottom { bottom: 16%; left: 19%; }
.boot-loader__status { right: 5%; bottom: 7%; }

.boot-loader.is-locking .boot-loader__mark::before,
.boot-loader.is-locking .boot-loader__mark::after { opacity: .24; transform: translateX(0); }
.boot-loader.is-locking .boot-loader__mark { text-shadow: 0 0 9px rgba(33,76,255,.48); }
.boot-loader.is-holding .boot-loader__mark::before,
.boot-loader.is-holding .boot-loader__mark::after,
.boot-loader.is-holding .boot-loader__slice,
.boot-loader.is-holding .boot-loader__blocks { opacity:0; animation:none; }
.boot-loader.is-holding .boot-loader__mark { animation:none; transform:none; }
.boot-loader.is-holding .boot-loader__scan { opacity:.08; animation-duration:1800ms; }
.boot-loader.is-holding .boot-loader__codes span,
.boot-loader.is-holding .boot-loader__symbols { animation:none; opacity:.58; transform:none; }

@media (prefers-reduced-motion: no-preference) {
  .boot-loader__scan { animation: boot-scan 980ms linear infinite; }
  .boot-loader__mark::before { animation: boot-rgb-left 230ms steps(2,end) infinite; }
  .boot-loader__mark::after { animation: boot-rgb-right 190ms steps(2,end) infinite; }
  .boot-loader__slice--1,.boot-loader__slice--4 { animation:boot-slice-a 180ms steps(2,end) infinite; }
  .boot-loader__slice--2,.boot-loader__slice--5 { animation:boot-slice-b 230ms steps(2,end) infinite; }
  .boot-loader__slice--3,.boot-loader__slice--6 { animation:boot-slice-c 150ms steps(2,end) infinite; }
  .boot-loader__blocks i { animation:boot-block-jump 310ms steps(2,end) infinite; }
  .boot-loader__blocks i:nth-child(3n) { animation-delay:-90ms; }
  .boot-loader__blocks i:nth-child(3n+1) { animation-delay:-170ms; }
  .boot-loader__codes span:nth-child(2n),
  .boot-loader__symbols { animation: boot-data-flicker 260ms steps(2,end) infinite; }
  .boot-loader.is-locking .boot-loader__mark::before,
  .boot-loader.is-locking .boot-loader__mark::after { animation-duration: 620ms; }
  .boot-loader.is-exiting .boot-loader__exit { opacity:1; animation:boot-exit-flash 900ms steps(1,end) forwards; }
  .boot-loader.is-exiting .boot-loader__exit i { animation:boot-exit-band 860ms steps(3,end) forwards; }
  .boot-loader.is-exiting .boot-loader__exit i:nth-child(2n) { animation-delay:35ms; }
  .boot-loader.is-exiting .boot-loader__exit i:nth-child(3n) { animation-delay:70ms; }
  .crt-screen.is-boot-revealing .os { animation:boot-os-reveal 900ms steps(1,end); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-loader,
  .boot-loader * { animation: none !important; transition-duration: .01ms !important; }
  .boot-loader__mark::before,
  .boot-loader__mark::after { display: none; }
}

@keyframes boot-scan { to { transform: translateY(72%); } }
@keyframes boot-rgb-left { 0%,100% { transform: translateX(-5px); opacity:.68; } 50% { transform:translate3d(-10px,2px,0); opacity:.9; } }
@keyframes boot-rgb-right { 0%,100% { transform: translateX(5px); opacity:.7; } 50% { transform:translate3d(11px,-2px,0); opacity:.92; } }
@keyframes boot-slice-a { 0%,100% { transform:translate3d(var(--slice-x),0,0) scaleX(var(--slice-scale)); } 50% { transform:translate3d(12px,1px,0) scaleX(1.28); } }
@keyframes boot-slice-b { 0%,100% { transform:translate3d(var(--slice-x),0,0) scaleX(var(--slice-scale)); } 50% { transform:translate3d(-19px,-1px,0) scaleX(1.08); } }
@keyframes boot-slice-c { 0%,100% { transform:translate3d(var(--slice-x),0,0) scaleX(var(--slice-scale)); } 50% { transform:translate3d(26px,1px,0) scaleX(1.34); } }
@keyframes boot-block-jump { 0%,100% { opacity:.16; translate:0 0; } 50% { opacity:.88; translate:8px -3px; } }
@keyframes boot-data-flicker { 0%,100% { opacity:.72; transform:translateX(0); } 50% { opacity:.22; transform:translateX(3px); } }
@keyframes boot-exit-band { 0% { opacity:1; transform:translateX(0) scaleX(1); } 22% { opacity:1; transform:translateX(var(--exit-a)) scaleX(1.08); } 48% { opacity:.9; transform:translateX(var(--exit-b)) scaleX(.94); } 72% { opacity:.54; transform:translateX(var(--exit-out)) scaleX(.7); } 100% { opacity:0; transform:translateX(var(--exit-out)) scaleX(.24); } }
@keyframes boot-exit-flash { 0%,12%,30%,48% { opacity:1; } 6%,20%,39% { opacity:.28; } 72%,100% { opacity:0; } }
@keyframes boot-os-reveal { 0% { opacity:.05; filter:drop-shadow(-10px 0 rgba(255,37,76,.68)) drop-shadow(10px 0 rgba(43,244,255,.7)); transform:translateX(-14px) scaleX(1.035); } 12% { opacity:.8; transform:translateX(9px) scaleX(.985); } 20% { opacity:.16; transform:translateX(-5px) scaleX(1.02); } 31% { opacity:1; transform:translateX(12px) scaleX(1.01); } 43% { opacity:.42; filter:drop-shadow(-5px 0 rgba(255,37,76,.5)) drop-shadow(6px 0 rgba(43,244,255,.56)); transform:translateX(-8px); } 58% { opacity:1; transform:translateX(3px); } 74%,100% { opacity:1; filter:none; transform:none; } }
@keyframes boot-loader-failsafe { to { visibility:hidden; pointer-events:none; } }