/* Logo Animation Styles - Isolated under .hero-draw-container */

.hero-draw-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: var(--space-4);
}

.hero-draw__svg {
  width: min(900px, 100%);
  height: auto;
  display: block;
}

/* Testo: sempre normale */
.hero-draw__svg #hero-draw-evo path,
.hero-draw__svg #hero-draw-lab path {
  stroke: none;
  stroke-opacity: 0;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* Simbolo: stroke visibile subito, fill inizialmente spento */
.hero-draw__svg #hero-draw-sp1 path,
.hero-draw__svg #hero-draw-sp2 path,
.hero-draw__svg #hero-draw-sp3 path {
  vector-effect: non-scaling-stroke;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 1;
}

@keyframes heroDrawDashMove {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes heroDrawFillIn {
  to {
    fill-opacity: 1;
  }
}

@keyframes heroDrawHideStroke {
  to {
    stroke-opacity: 0;
  }
}

/* Testo: fade in finale */
.hero-draw__svg #hero-draw-evo,
.hero-draw__svg #hero-draw-lab {
  opacity: 0;
}

@keyframes heroDrawTextFadeIn {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-draw__svg #sp1 path,
  .hero-draw__svg #sp2 path,
  .hero-draw__svg #sp3 path {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 0;
  }

  .hero-draw__svg #evo,
  .hero-draw__svg #lab {
    opacity: 1;
    animation: none;
  }
}

/* Mobile Adjustments */
@media (max-width: 720px) {
  .hero-draw-container {
    justify-content: center;
    margin-bottom: var(--space-3);
  }

  .hero-draw__svg {
    width: 100%;
    max-width: 400px;
    /* Limit size on mobile for better fit */
  }
}