/* ============================================================
   JURASSIC PARK SYSTEM SECURITY — CRT Terminal Styles
   ============================================================ */

:root {
  --green: #33ff00;
  --green-dim: #1a8c00;
  --green-dark: #0d4400;
  --green-glow: rgba(51, 255, 0, 0.4);
  --amber: #ffb000;
  --amber-glow: rgba(255, 176, 0, 0.4);
  --red: #ff3333;
  --red-glow: rgba(255, 51, 51, 0.4);
  --cyan: #00ccff;
  --cyan-glow: rgba(0, 204, 255, 0.3);
  --bg: #0a0a0a;
  --bg-screen: #050505;
  --font-terminal: 'VT323', monospace;
  --text-shadow-green: 0 0 5px var(--green-glow), 0 0 10px var(--green-glow), 0 0 20px var(--green-dark);
  --text-shadow-red: 0 0 5px var(--red-glow), 0 0 10px var(--red-glow), 0 0 20px rgba(255, 51, 51, 0.2);
  --text-shadow-amber: 0 0 5px var(--amber-glow), 0 0 10px var(--amber-glow);
  --text-shadow-cyan: 0 0 5px var(--cyan-glow), 0 0 10px var(--cyan-glow);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-terminal);
}

/* ── CRT Container ─────────────────────────────────────── */

#crt {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-screen);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0, 0, 0, 0.3) 1px,
    rgba(0, 0, 0, 0.3) 2px
  );
}

.screen-curve {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 101;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.4) 80%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

#crt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 99;
  background: rgba(18, 16, 16, 0);
  animation: flicker 0.15s infinite;
  pointer-events: none;
}

@keyframes flicker {
  0%   { opacity: 0.27861; }
  5%   { opacity: 0.34769; }
  10%  { opacity: 0.23604; }
  15%  { opacity: 0.90626; }
  20%  { opacity: 0.18128; }
  25%  { opacity: 0.83891; }
  30%  { opacity: 0.65583; }
  35%  { opacity: 0.67807; }
  40%  { opacity: 0.26559; }
  45%  { opacity: 0.84693; }
  50%  { opacity: 0.96019; }
  55%  { opacity: 0.08594; }
  60%  { opacity: 0.20313; }
  65%  { opacity: 0.71988; }
  70%  { opacity: 0.53455; }
  75%  { opacity: 0.37288; }
  80%  { opacity: 0.71428; }
  85%  { opacity: 0.70419; }
  90%  { opacity: 0.78910; }
  95%  { opacity: 0.25030; }
  100% { opacity: 0.20476; }
}

#crt::after {
  content: '';
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 8px;
  z-index: 102;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(51, 255, 0, 0.08),
    transparent
  );
  animation: scanbar 6s linear infinite;
  pointer-events: none;
}

@keyframes scanbar {
  0%   { top: -5%; }
  100% { top: 105%; }
}

/* ── Terminal ──────────────────────────────────────────── */

#terminal {
  position: relative;
  flex: 1;
  overflow: hidden;
  z-index: 10;
  color: var(--green);
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.4;
}

#terminal-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 2vh 3vw;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dark) transparent;
}

#terminal-scroll::-webkit-scrollbar { width: 6px; }
#terminal-scroll::-webkit-scrollbar-track { background: transparent; }
#terminal-scroll::-webkit-scrollbar-thumb { background: var(--green-dark); border-radius: 3px; }

/* ── Output ────────────────────────────────────────────── */

#output {
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: var(--text-shadow-green);
  min-height: 0;
}

#output .line {
  display: block;
}

#output .cmd-echo {
  color: var(--green);
}

#output .sys {
  color: var(--green-dim);
}

#output .warn {
  color: var(--red);
  text-shadow: var(--text-shadow-red);
}

#output .info {
  color: var(--amber);
  text-shadow: var(--text-shadow-amber);
}

#output .highlight {
  color: var(--amber);
  text-shadow: var(--text-shadow-amber);
}

#output .cyan {
  color: var(--cyan);
  text-shadow: var(--text-shadow-cyan);
}

#output .dir-entry {
  color: var(--cyan);
  text-shadow: var(--text-shadow-cyan);
}

#output .file-entry {
  color: var(--green);
}

#output .exec-entry {
  color: var(--green);
  font-weight: bold;
}

#output a {
  color: var(--green);
  text-shadow: var(--text-shadow-green);
  text-decoration: none;
  border-bottom: 1px solid var(--green-dim);
  transition: color 0.2s, text-shadow 0.2s;
}

#output a:hover,
#output a:focus {
  color: #66ff33;
  text-shadow: 0 0 8px var(--green-glow), 0 0 15px var(--green-glow);
  border-bottom-color: var(--green);
}

#output .success-ascii {
  font-size: 0.72em;
  line-height: 1.02;
  letter-spacing: 0;
}

/* ── Input Line ────────────────────────────────────────── */

#input-line {
  display: flex;
  align-items: center;
  margin-top: 0.2em;
  min-height: 1.4em;
}

#input-line.hidden {
  display: none;
}

.prompt {
  color: var(--green);
  text-shadow: var(--text-shadow-green);
  white-space: nowrap;
  flex-shrink: 0;
}

.prompt-root {
  color: var(--red);
  text-shadow: var(--text-shadow-red);
}

#input-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  position: relative;
}

#cmd-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--green);
  font-family: var(--font-terminal);
  font-size: inherit;
  text-shadow: var(--text-shadow-green);
  caret-color: transparent;
  width: 100%;
  padding: 0;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

#cmd-input + .cursor-blink {
  position: absolute;
  left: 0;
  pointer-events: none;
}

#cmd-input.password-mode {
  color: transparent;
  text-shadow: none;
}

.cursor-blink {
  color: var(--green);
  text-shadow: var(--text-shadow-green);
  animation: blink 1s step-end infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── Tab Suggestions ───────────────────────────────────── */

#tab-suggestions {
  padding: 0.3em 0;
  color: var(--green-dim);
  text-shadow: 0 0 3px var(--green-dark);
  font-size: 0.9em;
}

#tab-suggestions.hidden {
  display: none;
}

#tab-suggestions span {
  margin-right: 2em;
  display: inline-block;
}

#tab-suggestions .is-dir {
  color: var(--cyan);
  text-shadow: 0 0 3px rgba(0, 204, 255, 0.15);
}

/* ── Nedry Overlay ─────────────────────────────────────── */

#nedry-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: var(--bg-screen);
  padding: 2vh 2vw;
}

#nedry-overlay.hidden {
  display: none;
}

#nedry-content {
  text-align: center;
  width: 100%;
  max-width: 700px;
}

.nedry-gif {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 0 auto 1em;
  border: 1px solid rgba(255, 51, 51, 0.35);
  box-shadow: 0 0 10px rgba(255, 51, 51, 0.2);
}

@keyframes nedry-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -2px); }
  100% { transform: translate(1px, 2px); }
}

#nedry-text {
  color: var(--red);
  text-shadow: var(--text-shadow-red);
  font-size: clamp(18px, 3.5vw, 36px);
  font-weight: bold;
  letter-spacing: 0.1em;
  animation: nedry-text-flash 0.3s ease-in-out infinite alternate;
}

@keyframes nedry-text-flash {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.02); }
}

.nedry-flood {
  position: absolute;
  inset: 0;
  z-index: 49;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg-screen);
}

.nedry-flood-line {
  color: var(--red);
  text-shadow: var(--text-shadow-red);
  font-family: var(--font-terminal);
  font-size: clamp(14px, 2vw, 22px);
  white-space: nowrap;
  opacity: 0;
  animation: flood-in 0.08s ease-out forwards;
}

@keyframes flood-in {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Social Footer ─────────────────────────────────────── */

#social-footer {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0.6em 1em;
  font-size: clamp(13px, 1.6vw, 18px);
  color: var(--green-dim);
  text-shadow: var(--text-shadow-green);
  border-top: 1px solid var(--green-dark);
  background: var(--bg-screen);
  flex-shrink: 0;
}

#social-footer a {
  color: var(--green);
  text-shadow: var(--text-shadow-green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, text-shadow 0.2s, border-color 0.2s;
  padding: 0.1em 0.3em;
}

#social-footer a:hover,
#social-footer a:focus {
  color: #66ff33;
  text-shadow: 0 0 8px var(--green-glow), 0 0 15px var(--green-glow);
  border-bottom-color: var(--green);
}

.footer-sep {
  color: var(--green-dark);
  margin: 0 0.5em;
  font-size: 0.85em;
}

.footer-dot {
  color: var(--green-dark);
  margin: 0 0.4em;
}

.disclaimer {
  display: block;
  margin-top: 0.3em;
  font-size: 0.7em;
  color: var(--green-dim);
  opacity: 0.6;
  letter-spacing: 0.05em;
}

/* ── Animations ────────────────────────────────────────── */

.glitch {
  animation: glitch-effect 0.3s linear;
}

@keyframes glitch-effect {
  0%   { transform: translate(0); filter: hue-rotate(0deg); }
  10%  { transform: translate(-5px, 3px); filter: hue-rotate(90deg); }
  20%  { transform: translate(3px, -5px); filter: hue-rotate(180deg); }
  30%  { transform: translate(-3px, -3px); filter: hue-rotate(270deg); }
  40%  { transform: translate(5px, 5px); filter: hue-rotate(0deg); }
  50%  { transform: translate(-5px, -2px); filter: hue-rotate(90deg); }
  60%  { transform: translate(3px, 4px); filter: hue-rotate(0deg); }
  70%  { transform: translate(-2px, -4px); }
  80%  { transform: translate(4px, 2px); }
  90%  { transform: translate(-3px, 3px); }
  100% { transform: translate(0); filter: hue-rotate(0deg); }
}

.screen-off {
  animation: screen-off 0.4s ease-in forwards;
}

@keyframes screen-off {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  60%  { transform: scale(1, 0.005); filter: brightness(1.5); }
  100% { transform: scale(0, 0); filter: brightness(0); }
}

.screen-on {
  animation: screen-on 0.5s ease-out forwards;
}

@keyframes screen-on {
  0%   { transform: scale(0, 0); filter: brightness(0); }
  40%  { transform: scale(1, 0.005); filter: brightness(1.5); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}

.input-reject {
  animation: reject-shake 0.4s ease-in-out;
}

@keyframes reject-shake {
  0%, 100% { transform: translateX(0); }
  10%      { transform: translateX(-8px); }
  20%      { transform: translateX(8px); }
  30%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  50%      { transform: translateX(-4px); }
  60%      { transform: translateX(4px); }
  70%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
  90%      { transform: translateX(-1px); }
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ── Progress bar animation for system override ────────── */

.progress-bar {
  display: inline;
}

.progress-fill {
  color: var(--red);
  text-shadow: var(--text-shadow-red);
}

/* ── Mobile ────────────────────────────────────────────── */

@media (max-width: 600px) {
  #terminal {
    font-size: clamp(12px, 3.5vw, 18px);
  }

  #terminal-scroll {
    padding: 1.5vh 2.5vw;
  }

  .nedry-gif {
    width: min(100%, 320px);
  }

  #nedry-text {
    font-size: clamp(16px, 5vw, 28px);
  }

  #social-footer {
    font-size: clamp(12px, 3vw, 16px);
    padding: 0.5em 0.5em;
  }
}

@media (max-width: 400px) {
  .nedry-gif {
    width: min(100%, 260px);
  }
}

/* ── Focus ─────────────────────────────────────────────── */

#cmd-input:focus { outline: none; }

@supports (-webkit-touch-callout: none) {
  #cmd-input { font-size: 16px; }
}

::selection {
  background: var(--green-dim);
  color: #000;
}