* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.logo-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  cursor: pointer;
}

.main-svg {
  width: 100%;
  height: 100%;
}

#logo {
  font-family: "Georgia", serif;
  font-size: clamp(60px, 12vw, 150px);
  font-weight: 600;
  fill: transparent;
  stroke: #00ff00;
  stroke-width: 1.5;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw 7s ease-out forwards;
}

.subtitle {
  font-family: "Georgia", serif;
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 600;
  fill: transparent;
  stroke: #00ff00;
  stroke-width: 1;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw 14s ease-out forwards;
}

.motto {
  font-family: "Georgia", serif;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 600;
  fill: transparent;
  stroke: #00ff00;
  stroke-width: 1.5;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw 14s ease-out forwards;
}

.motto-latin {
  font-family: "Georgia", serif;
  font-size: clamp(14px, 2.5vw, 20px);
  font-weight: 600;
  fill: transparent;
  stroke: #00ff00;
  stroke-width: 1;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw 14s ease-out forwards;
}

.neural-network {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: networkFade 1s ease-in-out 5.5s forwards;
  pointer-events: none;
}

.particle {
  fill: #00ff00;
  opacity: 1;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: #00ff00;
  }
}

@keyframes networkFade {
  to {
    opacity: 0.6;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  #logo {
    font-size: clamp(40px, 15vw, 120px);
  }

  .subtitle {
    font-size: clamp(16px, 5vw, 24px);
  }

  .motto {
    font-size: clamp(12px, 4vw, 20px);
  }

  .motto-latin {
    font-size: clamp(10px, 3vw, 16px);
  }
}

@media (max-width: 480px) {
  #logo {
    font-size: clamp(32px, 18vw, 100px);
  }

  .subtitle {
    font-size: clamp(14px, 6vw, 20px);
  }

  .motto {
    font-size: clamp(10px, 5vw, 16px);
  }

  .motto-latin {
    font-size: clamp(8px, 4vw, 14px);
  }
}

.logo-container:hover .neural-network {
  opacity: 1;
}