/* Main styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Logo container */
.logo-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* SVG Draw-In Animation */
.draw-in-svg {
  opacity: 0;
  animation: fadeIn 0.3s ease-out 0.1s forwards, pulse 2s ease-in-out 3s infinite alternate;
  transform-origin: center;
}

/* Colors for the SVG paths */
.draw-in-svg .s0 {
  fill: #8B5CF6; /* Main parts in purple */
  stroke: #8B5CF6;
  stroke-width: 1;
}

.draw-in-svg .s1 {
  fill: #A78BFA; /* Lighter parts in lavender */
  stroke: #A78BFA;
  stroke-width: 1;
}

/* Path animation setup */
.logo-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill-opacity: 0;
  animation: drawPath 2s ease-in-out forwards;
}

/* Set different animation delays for each path */
.logo-path:nth-child(1) {
  animation-delay: 0.2s;
}

.logo-path:nth-child(2) {
  animation-delay: 0.6s;
}

.logo-path:nth-child(3) {
  animation-delay: 1s;
}

/* Path drawing animation */
@keyframes drawPath {
  0% {
    stroke-dashoffset: 1000;
    fill-opacity: 0;
  }
  60% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Subtle pulse animation for logo after draw-in completes */
@keyframes pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(139, 92, 246, 0));
  }
  100% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typing animation */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 20px; /* Fixed height in pixels */
  background-color: rgb(216, 180, 254); /* Updated to match text-purple-300 */
  margin-left: 2px;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
  position: relative;
}

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

/* Bulletproof typewriter effect that prevents ALL layout shift */
.typewriter-container {
  position: relative;
  margin-bottom: 15px;
  display: block;
  width: 100%;
  min-height: 4rem; /* Ensure consistent height across all devices */
}

.typewriter-placeholder {
  visibility: hidden;
  user-select: none;
  pointer-events: none;
  display: block;
  opacity: 0;
  white-space: normal;
  height: 0;
}

.typewriter-text-visible {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}



/* Form status messages */
.success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid #10B981;
}

.error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid #EF4444;
}

/* Only apply validation styling when explicitly added */
.error-border {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 1px #EF4444 !important;
}

/* Error message styling */
.error-message {
  color: #EF4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: rgba(239, 68, 68, 0.1);
  border-radius: 0.25rem;
  border-left: 3px solid #EF4444;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}


/* Form container styling */
.form-container-enhance {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.5s ease;
  position: relative;
  overflow: hidden;
}

.form-container-enhance:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Circuit board background */
.circuit-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* Container with circuit animation */
.absolute.inset-0.hidden.md\:flex {
  position: relative;
  overflow: hidden;
}

/* Removed duplicate rule */



/* Right column container */
.w-full.bg-gray-900.relative.flex-grow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .form-container-enhance {
    margin: 1rem auto;
    max-width: 90%;
  }

  .w-full.bg-gray-900.relative.flex-grow {
    min-height: auto;
  }
}



/* Language Switcher Styles */
#lang-cs, #lang-en {
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  outline: none;
}

.active-lang {
  color: rgb(147, 51, 234); /* purple-700 for consistency */
  font-weight: 700;
  position: relative;
}

.active-lang::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgb(147, 51, 234); /* purple-700 */
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease;
}

#lang-cs:hover, #lang-en:hover {
  color: rgb(147, 51, 234); /* purple-700 for consistency */
}

/* Loading state for language switcher */
.lang-loading {
  opacity: 0.6;
  cursor: wait !important;
  pointer-events: none;
  animation: langLoading 0.5s ease-in-out infinite;
}

@keyframes langLoading {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}