/**
 * Logo Component Styles and Header Title
 * Handles logo display, header title positioning, and animations
 * @author Simeon Tsvetanov
 */

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo__image {
  width: clamp(32px, 5vw, 48px);
  height: clamp(32px, 5vw, 48px);
  transition: transform var(--transition-speed);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  display: block;
  border-radius: 50%;
}

.logo__image:hover {
  transform: scale(1.1);
}

/* Header title styles */
.header__title {
  font-size: clamp(
    1.2rem,
    4.5vw,
    2rem
  ); /* Responsive based on available space */
  font-weight: bold;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent-secondary-dark);
  opacity: 1;
  z-index: 2;
  font-family: "Share Tech Mono", "Fira Mono", "Consolas", "Menlo", monospace;
  overflow: hidden;
  text-transform: uppercase;
  width: 0;
  border-right: 2px solid var(--accent-secondary-dark);
  animation: typewriter 1.5s steps(15, end) 0.2s 1 normal both,
    blinkTextCursor 0.8s steps(1) infinite;
}

.header__title.typed {
  border-right: none;
  animation: none !important; /* Using !important to override any other animations */
  width: 17ch;
}

/* Light theme color */
body[data-theme="light"] .header__title {
  color: var(--accent-secondary-light);
  border-right: 2px solid var(--accent-secondary-light);
}

/* Ensure border is removed in light theme too when animation completes */
body[data-theme="light"] .header__title.typed {
  border-right: none;
  animation: none !important; /* Explicitly override for light theme */
}

/* Typewriter effect keyframes */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 15ch;
  }
}

/* Text cursor blink effect keyframes */
@keyframes blinkTextCursor {
  0%,
  100% {
    border-right-color: inherit;
  }
  50% {
    border-right-color: transparent;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .header__title {
    font-size: clamp(
      1.4rem,
      6vw,
      2.2rem
    ); /* Much larger on mobile - proportional to icons */
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .header__title {
    font-size: clamp(
      1.2rem,
      5.5vw,
      1.8rem
    ); /* Still large and readable on small screens */
    width: 15ch; /* Keep the same character width */
  }
}

/* Add a script to toggle the .typed class after animation */