/* Ubuntu Yaru Terminal Theme with Retro Enhancements
 * Base colors: Purple (#7B68EE) for text, dark background (#2C001E)
 * Yaru colors: Orange (#FF7800) for accents, cyan (#00BCD4) for links
 * Inspired by CRT phosphor glow and terminal emulators
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Monofett&display=swap');

* {
  background: #2C001E;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

body {
  min-height: 95vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  background: radial-gradient(ellipse at center, #3D0A2D 0%, #2C001E 70%);
}

/* Terminal prompt styling based on PS1 */
.prompt {
  color: #7B68EE; /* User color (blue in PS1) */
}

.prompt-user {
  color: #7B68EE; /* User name */
}

.prompt-at {
  color: #FFFFFF; /* @ symbol */
}

.prompt-host {
  color: #FF7800; /* Host color (red in PS1) */
}

.prompt-colon {
  color: #FFFFFF; /* : symbol */
}

.prompt-path {
  color: #4CAF50; /* Path color (green in PS1) */
}

.prompt-arrow {
  color: #FFFFFF; /* > symbol */
}

/* Fixed: Use repeating-linear-gradient for dashed line */
.output::before {
  content: '';
  display: block;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    #444,
    #444 1px,
    transparent 1px,
    transparent 2px
  );
  margin: 1rem 0;
  animation: glitch 3s infinite;
}

h2, h3, b {
  font-weight: 700;
  color: #FF7800;
  text-shadow: 0 0 5px rgba(255, 120, 0, 0.3);
  margin: 1rem 0 0.5rem;
}

h3 {
  display: inline-block;
  font-size: inherit;
  padding: 0 0.5em;
  margin-bottom: 0;
  background: linear-gradient(90deg, #7B68EE, #FF7800);
  color: #fafafa;
  border-radius: 3px;
}

a {
  color: #00BCD4;
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px dotted transparent;
}

a:hover {
  color: #FF7800;
  text-shadow: 0 0 8px #00BCD4;
  border-bottom-color: #00BCD4;
  transform: scale(1.05);
}

/* FIXED: Precise typing animation with disappearing cursor */
.typeme {
  /* Base styling */
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid transparent; /* Hidden cursor initially */
  text-shadow: 0 0 3px #FFFFFF;
  margin-bottom: 1rem;
  display: inline-block;
  position: relative;
}

/* Different character limits for different durations */
.typeme[data-chars="short"] {
  width: 0;
  animation: typing-short 1.5s steps(20) forwards, cursor-disappear 1.5s infinite;
}

.typeme[data-chars="medium"] {
  width: 0;
  animation: typing-medium 2.5s steps(35) forwards, cursor-disappear 2.5s infinite;
}

.typeme[data-chars="long"] {
  width: 0;
  animation: typing-long 3.5s steps(50) forwards, cursor-disappear 3.5s infinite;
}

/* Precise typing animations with exact character counts */
@keyframes typing-short {
  0% { 
    width: 0; 
    border-right-color: #FFFFFF; /* Cursor visible during typing */
  }
  100% { 
    width: 20ch; /* Stops exactly at 20 characters */
    border-right-color: #FFFFFF; /* Cursor still visible at end */
  }
}

@keyframes typing-medium {
  0% { 
    width: 0; 
    border-right-color: #FFFFFF;
  }
  100% { 
    width: 35ch; /* Stops exactly at 35 characters - enough for ./resume.sh */
    border-right-color: #FFFFFF;
  }
}

@keyframes typing-long {
  0% { 
    width: 0; 
    border-right-color: #FFFFFF;
  }
  100% { 
    width: 50ch; /* Stops exactly at 50 characters - for longer commands */
    border-right-color: #FFFFFF;
  }
}

/* KEY FIX: Cursor blinks during typing, then disappears */
@keyframes cursor-disappear {
  /* Blink during the first half (typing phase) */
  0%, 25% { border-right-color: #FFFFFF; }
  25%, 50% { border-right-color: transparent; }
  50%, 75% { border-right-color: #FFFFFF; }
  75%, 100% { border-right-color: transparent; }
  
  /* After typing completes (75%+), fade out completely */
  100% {
    border-right-color: transparent;
    border-right-width: 0; /* Completely remove the cursor */
  }
}

/* Alternative: Smooth fade out after typing */
.typeme.typed::after {
  /* This pseudo-element creates a clean final state */
  content: '';
  border-right: none;
}

/* Output timing coordinated with typing durations */
.typeme[data-chars="short"] + .output {
  animation: showOutput 0.5s ease-out 1.6s forwards;
}

.typeme[data-chars="medium"] + .output {
  animation: showOutput 0.5s ease-out 2.6s forwards;
}

.typeme[data-chars="long"] + .output {
  animation: showOutput 0.5s ease-out 3.6s forwards;
}

/* Output styling */
.output {
  width: 100%;
  max-width: 80ch;
  opacity: 0;
  transform: translateY(20px);
  background: rgba(44, 0, 30, 0.8);
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 5px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(123, 104, 238, 0.1);
  position: relative;
  margin-top: 1rem;
  transition: all 0.5s ease-out;
}

@keyframes showOutput {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-background {
  color: #B5BFE2;
}

.text-secondary {
  color: #8CAAEE;
  font-style: italic;
}

.cursor {
  color: #FFFFFF;
}

ul {
  padding-left: 2rem;
  margin: 0.5rem 0;
}

li {
  margin: 0.5rem 0;
  position: relative;
}

li::before {
  content: '» ';
  color: #FF7800;
  font-weight: bold;
  position: absolute;
  left: -1.5rem;
}

img {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 100%;
  height: auto;
  border: 2px solid #7B68EE;
  border-radius: 4px;
  box-shadow: 
    0 0 10px rgba(123, 104, 238, 0.3),
    inset 0 0 5px rgba(255, 120, 0, 0.1);
  background: #111;
}

/* Footer styling */
footer {
  margin-top: auto;
  padding: 2rem 0 1rem 0;
  color: #B5BFE2;
  font-size: 0.9rem;
  border-top: 1px solid #444;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

footer li {
  position: relative;
  padding: 0.25rem 0;
}

footer li::before {
  content: none;
}

footer a {
  color: #00BCD4;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  transition: all 0.2s ease;
}

footer a:hover {
  background: rgba(0, 188, 212, 0.1);
  color: #FF7800;
  text-shadow: none;
  text-decoration: none;
  transform: none;
}

footer p {
  margin: 0.5rem 0;
  padding: 0;
}

/* Add 'typed' class to typeme elements after animation completes */
@keyframes addTypedClass {
  0%, 99% { }
  100% { content: 'typed'; }
}

/* Animations */
@keyframes glitch {
  0%, 100% { transform: translateX(0); background: #444; }
  10%, 20%, 30% { transform: translateX(-2px); background: #FF7800; }
  40%, 50%, 60% { transform: translateX(2px); background: #7B68EE; }
  70%, 80%, 90% { transform: translateX(-1px); background: #8CAAEE; }
}

/* Dynamic resizing */
@media (min-width: 600px) {
  body {
    font-size: 1.25rem;
    max-width: 90ch;
    margin: 0 auto;
  }
  
  .output {
    max-width: none;
  }
  
  img {
    max-width: 300px;
  }
  
  footer ul {
    flex-direction: row;
    justify-content: flex-start;
    gap: 2rem;
  }
  
  /* Increase character limits for larger screens */
/* BULLETPROOF TYPING WITH DISAPPEARING CURSOR */
.typeme {
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 1rem;
  display: inline-block;
  position: relative;
  text-shadow: 0 0 3px #FFFFFF;
}

.typeme::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: #FFFFFF;
  box-shadow: 0 0 3px #FFFFFF;
  animation-fill-mode: forwards;
  transition: all 0.2s ease-out;
}

/* Typing width animations */
.typeme[data-chars="short"] {
  animation: type-width-short 1.5s steps(20) forwards;
}
.typeme[data-chars="medium"] {
  animation: type-width-medium 2.5s steps(35) forwards;
}
.typeme[data-chars="long"] {
  animation: type-width-long 3.5s steps(50) forwards;
}

@keyframes type-width-short { from { width: 0; } to { width: 20ch; } }
@keyframes type-width-medium { from { width: 0; } to { width: 35ch; } }
@keyframes type-width-long { from { width: 0; } to { width: 50ch; } }

/* Cursor animations - blink then disappear */
.typeme[data-chars="short"]::after { animation: cursor-vanish-short 1.6s ease-out forwards; }
.typeme[data-chars="medium"]::after { animation: cursor-vanish-medium 2.6s ease-out forwards; }
.typeme[data-chars="long"]::after { animation: cursor-vanish-long 3.6s ease-out forwards; }

@keyframes cursor-vanish-short {
  0% { opacity: 1; width: 2px; transform: translateX(0); }
  7% { opacity: 0; }
  14% { opacity: 1; }
  21% { opacity: 0; }
  28%, 95% { opacity: 1; width: 2px; }
  97% { opacity: 0.5; width: 1px; }
  100% { opacity: 0; width: 0; transform: translateX(2px); }
}

@keyframes cursor-vanish-medium {
  0% { opacity: 1; width: 2px; transform: translateX(0); }
  5% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: 0; }
  20%, 90% { opacity: 1; width: 2px; }
  95% { opacity: 0.5; width: 1px; }
  100% { opacity: 0; width: 0; transform: translateX(2px); }
}

@keyframes cursor-vanish-long {
  0% { opacity: 1; width: 2px; transform: translateX(0); }
  4% { opacity: 0; }
  8% { opacity: 1; }
  12% { opacity: 0; }
  16%, 85% { opacity: 1; width: 2px; }
  90% { opacity: 0.5; width: 1px; }
  100% { opacity: 0; width: 0; transform: translateX(2px); }
}

/* PERMANENTLY HIDE CURSOR AFTER ANIMATION */
.typeme::after {
  animation-fill-mode: forwards !important;
}

.typeme::after,
.typeme.typed::after {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  transform: translateX(2px) !important;
}

/* Output timing */
.typeme[data-chars="short"] + .output { animation: showOutput 0.5s ease-out 1.7s forwards; }
.typeme[data-chars="medium"] + .output { animation: showOutput 0.5s ease-out 2.3s forwards; }
.typeme[data-chars="long"] + .output { animation: showOutput 0.5s ease-out 3.7s forwards; }

@media (max-width: 600px) {
  img {
    float: none;
    display: block;
    margin: 1rem auto;
  }
  
  .typeme {
    display: block !important;
    width: 100% !important;
  }
  
  .output {
    max-width: 100%;
  }
  
  footer {
    padding: 1rem 0;
    font-size: 0.8rem;
  }
  
  footer ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  footer li {
    text-align: center;
  }
}