@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
/* --- GLITCH INTRO STYLES --- */
#intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000; /* Start Black */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* On top of everything */
  color: #fff; /* White text initially (Normal look) */
}

/* The Glitch Animation Effect */
.glitch-active {
  animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: var(--matrix-green) !important;
  background: #000;
}

.glitch-active h1 {
  position: relative;
  text-shadow: 2px 0 #f00, -2px 0 #00f; /* RGB Split */
}

.glitch-active h1:before, .glitch-active h1:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.glitch-active h1:before {
  left: 2px;
  text-shadow: -1px 0 #f00;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch-active h1:after {
  left: -2px;
  text-shadow: -1px 0 #00f;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(14px, 9999px, 127px, 0); }
  20% { clip: rect(82px, 9999px, 22px, 0); }
  40% { clip: rect(34px, 9999px, 86px, 0); }
  60% { clip: rect(6px, 9999px, 102px, 0); }
  80% { clip: rect(101px, 9999px, 18px, 0); }
  100% { clip: rect(58px, 9999px, 93px, 0); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(122px, 9999px, 53px, 0); }
  20% { clip: rect(9px, 9999px, 137px, 0); }
  40% { clip: rect(138px, 9999px, 20px, 0); }
  60% { clip: rect(10px, 9999px, 144px, 0); }
  80% { clip: rect(74px, 9999px, 52px, 0); }
  100% { clip: rect(33px, 9999px, 11px, 0); }
}

:root {
    --matrix-green: #0F0;
    --dark-green: #003300;
}

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  font-family: 'VT323', monospace; /* The geeky font */
  overflow: hidden;
  color: var(--matrix-green);
  height: 100vh;
}

/* Background Rain Canvas */
#matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* Puts it behind everything */
  opacity: 0.3; /* Dim it so text is readable */
}

.container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* Allow scrolling */
}

/* --- REMOVING THE MAC LOOK --- */

/* Make the menu bar look like a text header instead of a window bar */
.menu {
  width: 100%;
  border-bottom: 1px solid var(--matrix-green);
  margin-bottom: 20px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

/* Hide the Mac buttons (Red/Yellow/Green circles) */
.buttons-flex {
  display: none; 
}

.title h1 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: 0 0 5px var(--matrix-green); /* The Glow Effect */
}

.title a {
    color: var(--matrix-green);
    text-decoration: none;
}

/* --- TERMINAL CONTENT --- */

#app {
  font-size: 1.3rem;
  line-height: 1.2;
}

/* Add glow to all text */
p, span, i, h2 {
  text-shadow: 0 0 4px rgba(51, 255, 0, 0.6);
}

/* The path text  */
.path {
    color: #00ccff; /* Cyan color like standard Linux */
    margin-bottom: 5px;
}

/* Styling the input area */
.type, .type2 {
  display: flex;
  align-items: center;
  width: 100%;
}

.icone {
  margin-right: 10px;
  color: var(--matrix-green);
}

/* The actual input box */
input {
  background: transparent;
  border: none;
  color: #fff; /* White text when typing */
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  outline: none;
  flex: 1;
  text-shadow: 0 0 2px white;
}

/* Specific styling for success/error messages */
.sucess {
    color: var(--matrix-green);
}

.error {
    color: #ff4444;
    text-shadow: 0 0 4px red;
}

.code {
    border-left: 2px solid var(--matrix-green);
    padding-left: 15px;
    margin: 10px 0;
    color: #ccffcc;
}

/* Custom Scrollbar to match theme */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--dark-green); border: 1px solid var(--matrix-green); }

/* --- matrix minimal theme (keeps layout + responsiveness) --- */
:root{
  --matrix-green:#00ff00;
  --matrix-dark:#003300;
  --matrix-black:#000000;
  --matrix-panel:#001a00;
}

/* colors + font only */
body{
  background-color: var(--matrix-black);
  font-family: 'VT323', monospace;
  color: var(--matrix-green);
}

#app{
  background-color: rgba(0, 26, 0, 0.92);
  border: 1px solid rgba(0,255,0,0.25);
}

/* keep existing classes working, just recolor */
.white, p, h2, p.response, a, input, span.text{
  color: var(--matrix-green);
}

.blue{ color:#66ff99; }
p.code{ color:#99ffcc; }
p.path{ color:#ccffcc; }
p.path span{ color:#66ff99; }
p.path span + span{ color:#00ff00; }

.sucess, .icone{ color: var(--matrix-green); }
.error, .icone.error{ color:#88ff88; }

input{
  font-family: 'VT323', monospace;
}

/* subtle glow (not neon) */
#app, p, h2, span, i, input{
  text-shadow: 0 0 6px rgba(0,255,0,0.25);
}

/* blinking cursor on prompt icon */
.icone::after{
  content:"_";
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink{ to { visibility: hidden; } }

/* --- matrix rain overlay (fixed, no layout impact) --- */
/* use 2 layers: thin columns + falling specks */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  opacity: 0.55;

  background-image:
    /* vertical columns */
    repeating-linear-gradient(
      to right,
      rgba(0,255,0,0.06) 0px,
      rgba(0,255,0,0.06) 1px,
      transparent 1px,
      transparent 18px
    ),
    /* falling dots */
    repeating-linear-gradient(
      to bottom,
      rgba(0,255,0,0.0) 0px,
      rgba(0,255,0,0.0) 10px,
      rgba(0,255,0,0.18) 11px,
      rgba(0,255,0,0.0) 14px
    );

  background-size: 100% 100%, 100% 180px;
  animation: matrixRain 1.2s linear infinite;
}

@keyframes matrixRain{
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 180px; }
}

/* keep your UI above rain */
.container{
  position: relative;
  z-index: 1;
}

/* scrollbar tuned to matrix */
::-webkit-scrollbar-track{ background-color: #000; }
::-webkit-scrollbar{ background-color: #000; }
::-webkit-scrollbar-thumb{
  background-color: var(--matrix-dark);
  border: 1px solid rgba(0,255,0,0.5);
}