@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

.boot {
  --amber: #e8a33c;
  --hot: #ffc867;
  --dim: #7a5320;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  color: var(--amber);
  background: #0b0805;
  font: 18px/1.05 "VT323", "DM Mono", monospace;
  text-shadow: 0 0 6px rgba(232, 163, 60, .55);
}
.boot::before {
  animation: boot-flicker .15s steps(2, end) infinite;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.35) 2px 3px);
}
.boot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.72) 100%);
}
.boot-screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  min-height: 0;
  border-radius: 18px / 3%;
  overflow: hidden;
  box-shadow: inset 0 0 80px 24px rgba(0,0,0,.76), 0 0 28px rgba(232,163,60,.08);
}
.boot-power {
  position: absolute;
  inset: 0;
  background: var(--hot);
  transform: scaleY(.005);
  transform-origin: center;
  animation: boot-power-on .35s ease-out both;
  pointer-events: none;
}
.boot-content {
  position: relative;
  z-index: 1;
  width: min(100%, 1050px);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 100%;
}
.ap-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  color: var(--amber);
  line-height: .82;
}
.ap-wordmark svg { flex: none; filter: drop-shadow(0 0 5px rgba(232,163,60,.35)); }
.ap-wordmark__type { min-width: 0; }
.ap-wordmark__name,
.ap-wordmark__sub {
  color: var(--amber);
  background: repeating-linear-gradient(to bottom, var(--hot) 0 2px, var(--amber) 2px 4px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ap-wordmark__name {
  font: italic 900 clamp(34px, 7vw, 78px)/.85 "Arial Black", "Helvetica Neue", sans-serif;
  letter-spacing: .02em;
}
.ap-wordmark__sub {
  margin-top: 8px;
  padding-left: .45em;
  font: 400 clamp(11px, 1.8vw, 18px)/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .45em;
}
.boot-title {
  margin: 0;
  text-align: center;
  color: var(--hot);
  font: inherit;
  font-size: clamp(20px, 3.4vw, 30px);
  letter-spacing: .13em;
}
.boot-frame {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(190px, .8fr);
  gap: 18px;
  min-height: 0;
  padding: 14px 16px;
  border: 2px dashed var(--dim);
  background: rgba(20, 12, 5, .42);
}
.boot-log { min-width: 0; overflow: hidden; color: var(--amber); }
.boot-log__line { min-height: 1.05em; overflow-wrap: anywhere; }
.boot-cursor { color: var(--hot); animation: boot-cursor-blink .7s steps(1) infinite; }
.boot-art { display: flex; align-items: center; justify-content: center; color: var(--dim); opacity: .75; }
.ap-ascii {
  margin: 0;
  font: 11px/.95 "VT323", "DM Mono", monospace;
  letter-spacing: 0;
  white-space: pre;
  color: var(--amber);
  text-shadow: 0 0 5px rgba(232,163,60,.45);
}
.boot-progress { display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--hot); }
.boot-progress__blocks { letter-spacing: .15em; }
.boot-legal { color: var(--dim); font-size: 14px; line-height: 1.05; text-align: center; text-shadow: none; }
.boot--exit .boot-screen { animation: boot-collapse .45s ease-in forwards; }
.boot--fade-out { animation: boot-fade .15s ease-out forwards; }
.boot--flat { animation: none; text-shadow: none; }
.boot--flat::before { display: none; }
.boot--flat::after { background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%); }
.boot--flat .boot-screen { border-radius: 0; box-shadow: none; }
.boot--flat .ap-wordmark svg, .boot--flat .ap-ascii { filter: none; text-shadow: none; }

@keyframes boot-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .97; } }
@keyframes boot-power-on { 0% { transform: scaleY(.005); filter: brightness(5); } 70% { transform: scaleY(.005); filter: brightness(3); } 100% { transform: scaleY(1); filter: brightness(1); opacity: 0; } }
@keyframes boot-cursor-blink { 50% { opacity: 0; } }
@keyframes boot-collapse { 0% { transform: scaleY(1); filter: brightness(1); } 58% { transform: scaleY(.006); filter: brightness(3); } 100% { transform: scale(.004, .006); filter: brightness(8); opacity: 0; } }
@keyframes boot-fade { to { opacity: 0; } }

@media (max-width: 700px) {
  .boot { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .boot-content { gap: 10px; }
  .ap-wordmark svg { width: 58px; height: 58px; }
  .ap-wordmark__name { font-size: clamp(30px, 8vw, 48px); }
  .ap-wordmark__sub { font-size: 10px; letter-spacing: .34em; }
  .boot-frame { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
  .boot-art { order: -1; max-height: 120px; overflow: hidden; }
  .ap-ascii { font-size: 8px; line-height: .8; }
  .boot-log { font-size: clamp(14px, 4vw, 18px); }
  .boot-legal { font-size: 11px; }
}
@media (max-width: 420px) {
  .boot-art { display: none; }
  .boot-frame { padding: 8px; }
  .boot-content { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot { animation: none; }
  .boot-power { animation: none; opacity: 0; }
  .boot-cursor { animation: none; }
}