/* SCREEN / HARDWARE */
.screen{
  position:relative;
  height:100%;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow: none;
  transform:translateZ(0);
}

.screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:7;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 40%, rgba(0,0,0,.38) 92%);
  animation:crt-vign 9s steps(1) infinite;
}

/* the living phosphor bed behind everything — it breathes
   (on .monitor::before — .screen::after is taken by the scanlines below) */
.monitor::before{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  background:
    radial-gradient(58% 48% at 50% 46%, rgba(0,255,99,.15), rgba(0,255,99,.045) 55%, transparent 78%),
    radial-gradient(30% 24% at 48% 40%, rgba(120,255,170,.09), transparent 70%);
  filter:blur(7px);
  animation:crt-breathe 6.5s ease-in-out infinite;
  will-change:opacity,transform;
}

@keyframes crt-breathe{
  0%,100%{ opacity:.72; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.035); }
}

/* rare micro-flickers in the vignette — the tube feels switched on */
@keyframes crt-vign{
  0%,100%{ opacity:1; }
  62%{ opacity:.84; }
  63%{ opacity:1; }
  89%{ opacity:.9; }
  90%{ opacity:1; }
}

.screen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,255,99,.06) 0,
      rgba(0,255,99,.06) 1px,
      rgba(0,0,0,.25) 2px,
      rgba(0,0,0,.25) 4px
    );
  mix-blend-mode:screen;
  animation:scanline-pulse 2.2s linear infinite;
}

.noise{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:.05;
  background:
    repeating-linear-gradient(90deg, rgba(0,255,99,.12) 0, rgba(0,255,99,.12) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(180deg, rgba(0,255,99,.08) 0, rgba(0,255,99,.08) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(45deg, transparent 0, transparent 5px, rgba(0,255,99,.06) 5px, rgba(0,255,99,.06) 6px);
  background-size:9px 9px, 13px 13px, 11px 11px;
  mix-blend-mode:screen;
  /* feather the grid into darkness — no rectangle edge */
  -webkit-mask-image:radial-gradient(70% 60% at 50% 46%, #000 30%, transparent 80%);
  mask-image:radial-gradient(70% 60% at 50% 46%, #000 30%, transparent 80%);
  animation:crt-noise-shimmer 7s ease-in-out infinite;
}

@keyframes crt-noise-shimmer{
  0%,100%{ opacity:.04; }
  50%{ opacity:.08; }
}

.glass{
  position:absolute;
  inset:-10%;
  z-index:8;
  pointer-events:none;
  /* free-floating phosphor light, feathered well inside the bounds */
  background:
    radial-gradient(52% 42% at 50% 44%, rgba(0,255,99,.11), transparent 74%),
    radial-gradient(24% 20% at 42% 36%, rgba(150,255,190,.07), transparent 70%);
  mix-blend-mode:screen;
  filter:blur(5px);
  animation:crt-drift 13s ease-in-out infinite alternate;
  will-change:transform,opacity;
}

@keyframes crt-drift{
  0%{ transform:translate(-1.5%,-1%) scale(1); opacity:.8; }
  50%{ transform:translate(1%,.6%) scale(1.02); opacity:1; }
  100%{ transform:translate(2%,1.6%) scale(1.045); opacity:.85; }
}

.terminal{
  position:absolute;
  inset:0;
  z-index:6;
  display:block;
  padding:clamp(24px,3vw,48px);
  background:transparent;
  color:var(--terminal-ink);
  font-family:var(--cobol-font);
  text-shadow:0 0 12px rgba(0,255,99,.45);
  animation:crt-ink 5.2s ease-in-out infinite;
  -webkit-font-smoothing:none;
  text-rendering:geometricPrecision;
  will-change:opacity,transform;
}

.terminal-shell{
  position:relative;
  width:100%;
  height:100%;
  border:2px solid rgba(0,255,99,.52);
  border-radius:2px;
  background:transparent;
  box-shadow:
    0 0 16px rgba(0,255,99,.18);
  overflow:hidden;
  animation:crt-shell 6.5s ease-in-out infinite;
}

@keyframes crt-shell{
  0%,100%{ box-shadow:0 0 16px rgba(0,255,99,.18); border-color:rgba(0,255,99,.52); }
  50%{ box-shadow:0 0 26px rgba(0,255,99,.34), 0 0 60px rgba(0,255,99,.12); border-color:rgba(0,255,99,.72); }
}

.terminal-shell::before{
  content:"+---------------------- MAINFRAME SCREEN ----------------------+";
  position:absolute;
  top:5px;
  left:4px;
  right:4px;
  font-size:11px;
  letter-spacing:1px;
  color:rgba(0,255,99,.5);
  white-space:nowrap;
  overflow:hidden;
}

.term-head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 12px 8px;
  border-bottom:1px solid rgba(0,255,99,.22);
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(0,255,99,.8);
}

.term-body{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  padding:10px 12px;
  height:calc(100% - 41px);
}

.term-stream{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  white-space:nowrap;
  overflow:hidden;
}

.term-body .tiny{
  color:#9fffb5;
  font-size:clamp(10px,1.1vw,14px);
  letter-spacing:.08em;
  opacity:.9;
  text-transform:uppercase;
}

.cobol-line{
  color:#9affb2;
  letter-spacing:.02em;
  font-variant-ligatures:none;
}

.cobol-line .line-no{
  display:inline-block;
  color:#73ff9f;
  opacity:.7;
  margin-right:10px;
  width:6ch;
  text-align:right;
}

.term-body .big{
  position:relative;
  font-size:clamp(26px,3.6vw,56px);
  letter-spacing:.02em;
  margin:8px 0 10px;
  color:#b8ffc4;
  text-transform:uppercase;
  line-height:1.04;
  font-family:var(--cobol-font);
  font-weight:500;
  font-variant-ligatures:none;
}

.term-body .big::after{
  content:"_";
  position:absolute;
  right:-0.22em;
  animation:cursor-blink 1.05s steps(1) infinite;
}

.term-body .tiny,
.term-body .big{
  font-family:inherit;
}

.term-prompt{
  margin-top:22px;
  display:none;
  align-items:center;
  gap:8px;
  letter-spacing:.08em;
}

.term-prompt.visible{
  display:flex;
}

.term-command{
  display:none;
  align-items:center;
  margin-top:18px;
  gap:8px;
  font-size:clamp(10px,1.05vw,14px);
  letter-spacing:.04em;
  color:#9fffb5;
  white-space:nowrap;
  overflow:hidden;
  /* a real prompt BAR — bordered input box so it reads as "type here" */
  padding:9px 12px;
  border:1px solid rgba(0,255,120,.55);
  border-radius:3px;
  background:rgba(0,44,18,.38);
  box-shadow:inset 0 0 10px rgba(0,255,120,.12);
}

.term-command.visible{
  display:flex;
}

/* invitation while the bar is empty */
.term-command .term-command-text:empty::before{
  content:'TYPE YOUR QUESTION…';
  color:rgba(159,255,181,.38);
}

/* right-aligned affordance: Return sends it */
.term-command::after{
  content:'⏎ RETURN TO ENTER';
  margin-left:auto;
  padding-left:12px;
  font-size:.72em;
  letter-spacing:.14em;
  color:rgba(159,255,181,.45);
  flex:0 0 auto;
}

.term-command .term-cmd-text{
  flex:1;
  min-width:0;
  color:currentColor;
  font-family:var(--cobol-font);
  overflow:hidden;
  text-overflow:clip;
}

.term-command .term-command-text{
  flex:1;
  min-width:0;
  color:currentColor;
  font-family:var(--cobol-font);
  overflow:hidden;
  text-overflow:clip;
}

.term-command .term-command-cursor{
  width:0.6ch;
  height:1.12em;
  background:currentColor;
  animation:cursor-blink 1s steps(1) infinite;
  opacity:.95;
}

.term-prompt .cursor{
  display:inline-block;
  width:0.6ch;
  height:1.15em;
  background:currentColor;
  opacity:.9;
  animation:cursor-blink 1s steps(1) infinite;
}

.enter{
  margin-top:12px;
  padding:7px 12px;
  border:1px solid rgba(0,255,99,.55);
  border-radius:2px;
  background:rgba(0,0,0,.2);
  color:var(--terminal-ink);
  font-size:14px;
  font-family:inherit;
  cursor:pointer;
  transition:.2s ease;
  animation: enter-blink 1.2s steps(2,end) infinite;
  text-transform:uppercase;
  box-shadow:0 0 8px rgba(0,255,99,.28);
  align-self:flex-start;
}
.enter:hover{background:rgba(0,255,99,.08);transform:scale(1.03)}


@keyframes crt-ink{
  0%,100%{ text-shadow:0 0 12px rgba(0,255,99,.45); }
  50%{ text-shadow:0 0 17px rgba(0,255,99,.68), 0 0 36px rgba(0,255,99,.22); }
}