/* ver30 — navy CRT terminal */

html,
body {
  margin: 0;
  height: 100%;
  background: #0a1020;
  color: var(--text);
  font: 15px/1.45 var(--mono);
  overflow: hidden;
}

.crt {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12) 0,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  transition: opacity 0.08s linear;
}

#terminal-stage.is-glitching .crt {
  opacity: 0.85;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.28) 0,
    rgba(0, 0, 0, 0.28) 1px,
    transparent 1px,
    transparent 2px
  );
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.035;
  pointer-events: none;
  transition: opacity 0.06s linear;
}

.noise.is-glitch-burst {
  opacity: 0.12;
}

#terminal-stage {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  text-shadow: 0 0 8px var(--accent-glow);
  overflow: hidden;
}

#terminal-stage.is-glitching .screen {
  animation: terminal-glitch 0.32s steps(5) 1;
  text-shadow:
    2px 0 rgba(240, 100, 100, 0.25),
    -2px 0 rgba(100, 160, 240, 0.25),
    0 0 8px var(--accent-glow);
}

#terminal-stage.is-glitching .decrypt-btn {
  filter: brightness(1.08);
  text-shadow:
    1px 0 rgba(240, 100, 100, 0.35),
    -1px 0 rgba(100, 160, 240, 0.35);
}

@keyframes terminal-glitch {
  0%,
  100% {
    transform: translate(0, 0);
    filter: none;
  }

  18% {
    transform: translate(-3px, 1px) skewX(-0.4deg);
    filter: brightness(1.08);
  }

  36% {
    transform: translate(4px, -1px) skewX(0.3deg);
    filter: brightness(0.92) contrast(1.06);
  }

  54% {
    transform: translate(-2px, 0) skewX(-0.2deg);
    filter: brightness(1.04);
  }

  72% {
    transform: translate(2px, 1px);
    filter: brightness(0.96);
  }
}

#terminal-stage::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  z-index: 5;
  background: rgba(240, 188, 37, 0.08);
  opacity: 0;
  transform: translateY(-120%);
}

#terminal-stage.is-glitching::after {
  animation: glitch-scan 0.32s steps(4) 1;
}

@keyframes glitch-scan {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }

  20%,
  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(110vh);
  }
}

.screen {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.screen__chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
}

.screen__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.screen__chrome span:nth-child(1) {
  background: #c94a44;
}

.screen__chrome span:nth-child(2) {
  background: var(--accent);
}

.screen__chrome span:nth-child(3) {
  background: #5a9e6f;
}

.screen__chrome p {
  margin: 0 0 0 0.5rem;
}

.screen__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 0.75rem;
}

.feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
  margin-bottom: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.line {
  margin: 0 0 0.25rem;
}

.line--dim {
  color: var(--muted);
}

.line--accent {
  color: var(--accent);
}

.line--brand {
  color: var(--accent);
}

.line--ok {
  color: #5a9e6f;
  text-shadow: 0 0 8px rgba(90, 158, 111, 0.35);
}

.line--err {
  color: var(--error);
}

.input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.input-row__prompt {
  color: var(--accent);
  white-space: nowrap;
}

.input-row__field {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: none;
  caret-color: var(--accent);
}

.input-row__field:disabled {
  opacity: 0.5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

a {
  color: var(--accent);
}

.decrypt-btn {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  min-width: 9rem;
  padding: 0.65rem 1.4rem;
  text-align: center;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: rgba(22, 35, 63, 0.85);
  color: var(--accent);
  font: 600 0.8rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 24px var(--accent-glow);
  transition: background 0.2s, color 0.2s;
}

.decrypt-btn:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.decrypt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.decrypt-btn.is-hidden {
  display: none;
}

.decrypt-btn:not(.is-hidden) {
  animation: decrypt-enter 0.35s ease;
}

@keyframes decrypt-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.boot-art-wrap {
  position: relative;
  width: calc(var(--boot-art-cols, 72) * 1ch);
  max-width: 100%;
  margin: 0.2rem 0 0.35rem;
  overflow: visible;
}

.boot-art {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--muted);
  white-space: pre;
  overflow: visible;
  transform: scale(0.92);
  transform-origin: top left;
}

.boot-art__mascots {
  position: relative;
  z-index: 0;
}

.boot-art--evil-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.boot-art-wrap.is-evil-glitch .boot-art--evil-overlay {
  opacity: 1;
  visibility: visible;
}

.boot-art__status-col {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: var(--boot-status-cols, 28ch);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: none;
  font-size: inherit;
  line-height: 1.45;
}

.boot-art__row {
  min-height: 1.02em;
}

.boot-art__mascot {
  display: block;
  white-space: pre;
}

.boot-art__status {
  width: 100%;
  white-space: pre;
  text-align: left;
  text-shadow:
    0 0 6px #0a1020,
    0 0 12px #0a1020;
}

.boot-art .art-gold {
  color: var(--accent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent);
}

.boot-art .art-body {
  color: color-mix(in srgb, var(--accent) 50%, var(--text));
}

.boot-art .art-dim {
  color: color-mix(in srgb, var(--muted) 65%, var(--accent));
}

.boot-art .art-wing-fill {
  color: #c4b5f5;
  text-shadow: 0 0 8px rgba(168, 148, 230, 0.5);
}

.boot-art .art-wing-outline {
  color: #d8dce6;
  text-shadow: 0 0 5px rgba(216, 220, 230, 0.35);
}

.boot-art .art-evil {
  color: #c94a4a;
  text-shadow:
    0 0 6px rgba(201, 74, 74, 0.65),
    0 0 12px rgba(201, 74, 74, 0.35);
}

.boot-art.is-pulsing .art-gold,
.boot-art.is-pulsing .art-body,
.boot-art.is-pulsing .art-wing-fill {
  animation: boot-art-pulse 0.4s ease;
}

@keyframes boot-art-pulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.35);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

#terminal-stage.is-decrypting {
  transition: opacity 400ms ease;
}

#terminal-stage.is-decrypting .screen {
  animation: decrypt-flicker 0.1s steps(2) infinite;
}

#terminal-stage.is-decrypting .decrypt-btn {
  animation: none;
}

#terminal-stage.is-decrypting .line--decrypt-status {
  position: relative;
  z-index: 1;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

@keyframes decrypt-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
}

#portfolio-stage.is-entering {
  display: block;
}

#portfolio-stage.is-entering .stage-atmosphere {
  opacity: var(--stage-atmosphere-opacity, 1);
}

@media (max-width: 520px) {
  body {
    font-size: 13px;
  }

  .decrypt-btn {
    padding: 0.55rem 1rem;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .decrypt-btn {
    transition: none;
  }

  .decrypt-btn:not(.is-hidden) {
    animation: none;
  }

  .boot-art.is-pulsing .art-gold,
  .boot-art.is-pulsing .art-body {
    animation: none;
  }

  #terminal-stage.is-decrypting .screen {
    animation: none;
  }

  #terminal-stage.is-decrypting {
    transition: opacity 200ms ease;
  }

  #terminal-stage.is-glitching .screen,
  #terminal-stage.is-glitching::after {
    animation: none;
  }

  .noise.is-glitch-burst {
    opacity: 0.035;
  }
}