/* ============================================
   ENERGY2ACT — Logo Animation
   Fase 1: contorno di tutte le lettere insieme
   Fase 2: fill una per una (ene→rgy→2→act)
   Fase 3: ACT glow + stabilizzazione
   ============================================ */

/* Tutti i nodi partono invisibili */
.ene,
.rgy,
.to,
.act {
  opacity: 0;
}

/* ------------------------------------------
   FASE 1 — outline simultaneo
   I cloni "draw" vengono gestiti via JS inline style,
   ma queste classi definiscono il comportamento base
   ------------------------------------------ */
.js-outline {
  fill: none;
  stroke-width: 2;
  opacity: 1;
  stroke-dasharray: var(--path-len, 2000);
  stroke-dashoffset: var(--path-len, 2000);
  transition: stroke-dashoffset var(--outline-dur, 1.4s) cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.js-outline.ene-stroke { stroke: #d7b058; }
.js-outline.rgy-stroke { stroke: #f2d3be; }
.js-outline.to-stroke  { stroke: #999cca; }
.js-outline.act-stroke-white  { stroke: #ffffff; }
.js-outline.act-stroke-purple { stroke: #999cca; }

.js-outline.draw-start {
  stroke-dashoffset: 0;
}

/* ------------------------------------------
   FASE 2 — fill lettera per lettera
   ------------------------------------------ */
.js-fill {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.js-fill.fill-visible {
  opacity: 1;
}

/* ------------------------------------------
   FASE 3 — ACT glow
   ------------------------------------------ */
.js-act-glow {
  opacity: 0;
  pointer-events: none;
}

@keyframes actGlowPulse {
  0%   { opacity: 0;    filter: blur(0px); }
  25%  { opacity: 0.9; }
  55%  { opacity: 0.5; }
  100% { opacity: 0;    filter: blur(0px); }
}

.js-act-glow.glow-fire {
  animation: actGlowPulse 1.6s ease-out forwards;
}

/* ------------------------------------------
   ACT finale stabile
   ------------------------------------------ */
.js-act-final {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.js-act-final.act-visible {
  opacity: 1;
}

/* ------------------------------------------
   Reduced motion
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-outline { transition: none; stroke-dashoffset: 0; }
  .js-fill     { transition: none; opacity: 1 !important; }
  .js-act-glow { display: none; }
  .js-act-final{ transition: none; opacity: 1 !important; }
}