/* ==========================================================================
   NEURIS — Animações
   Animações de entrada e transições controladas por JavaScript
   ========================================================================== */

/* --- Animações de entrada (reveal) --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Atrasos escalonados para grids */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }

/* --- Hero — animação inicial --- */
.hero__label,
.hero__title,
.hero__subtitle,
.hero__actions {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn var(--duration-slow) var(--ease-out) forwards;
}

.hero__label    { animation-delay: 200ms; }
.hero__title    { animation-delay: 400ms; }
.hero__subtitle { animation-delay: 600ms; }
.hero__actions  { animation-delay: 800ms; }

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   Linhas desenhadas à mão — SVG path com stroke-dashoffset
   ========================================================================== */

/* Wrapper inline — posiciona o SVG abaixo do texto */
.draw-line-wrap {
  position: relative;
  display: inline;
}

/* SVG base — underline sobre texto */
.draw-svg {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 10px;
  overflow: visible;
  pointer-events: none;
}

/* Path base — começa invisível */
.draw-path {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.draw-svg--hero .draw-path { stroke-width: 2.5; }
.draw-svg--sm .draw-path   { stroke-width: 2.5; }

/* Hero — activado por JS (.draw-path--drawn) */
.draw-path--drawn {
  animation: drawPath 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


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

/* --- Globo 3D: animação gerida por Canvas/JS --- */
/* (rotação, marcador e grelha são desenhados via requestAnimationFrame) */

/* --- Reduzir animações se o utilizador preferir --- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__label,
  .hero__title,
  .hero__subtitle,
  .hero__actions {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .draw-path {
    stroke-dashoffset: 0;
    animation: none;
  }

  .hero__scroll-thumb,
  .hero__scroll-chevron {
    animation: none;
  }

  .hero__scroll {
    opacity: 1;
  }

  /* Desactivar transições de hover em elementos com movimento */
  .pilar__content,
  .pilar::before,
  .pilar::after,
  .pilar__index,
  .area-card,
  .area-card::before {
    transition: none;
  }
}

/* Regra global — garante que qualquer animação ou transição não coberta
   acima não bloqueia utilizadores com movimento reduzido.
   Sem !important para respeitar overrides de maior especificidade acima. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}