/* ==========================================================================
   PULSE Performance Club — motion.css
   F1 — Fundação: base de motion, reveals e reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sistema de reveal
   Ativação via IntersectionObserver (js/main.js) adicionando .is-visible.
   -------------------------------------------------------------------------- */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

.reveal,
.reveal-up {
  transform: translateY(32px);
}

.reveal-left {
  transform: translateX(-32px);
}

.reveal-right {
  transform: translateX(32px);
}

.reveal-scale {
  transform: scale(0.97);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger discreto por grupo */
[data-stagger] > * {
  --stagger-delay: 0ms;
  transition-delay: var(--stagger-delay);
}

/* --------------------------------------------------------------------------
   2. Manifesto (F3)
   Blocos da headline entram em sequência, com stagger curto.
   A imagem (reveal-scale) já é coberta pelo sistema de reveal acima.
   -------------------------------------------------------------------------- */

.manifesto__title .manifesto__block:nth-child(1) {
  transition-delay: 0ms;
}

.manifesto__title .manifesto__block:nth-child(2) {
  transition-delay: 80ms;
}

.manifesto__title .manifesto__block:nth-child(3) {
  transition-delay: 160ms;
}

.manifesto__support {
  transition-delay: 220ms;
}

/* --------------------------------------------------------------------------
   3. Treino da Semana (F8)
   As linhas entram em sequência e as barras preenchem da esquerda para a
   direita quando o painel aparece. O gatilho é o reveal da F1: o painel
   leva .reveal-up e a classe .is-visible dispara a cascata.
   -------------------------------------------------------------------------- */

.exercise {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

/* Barras partem vazias */
.stat__bar {
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out-expo);
}

/* Stagger curto de 60ms entre as linhas */
.exercise:nth-child(1) { transition-delay: 60ms; }
.exercise:nth-child(2) { transition-delay: 120ms; }
.exercise:nth-child(3) { transition-delay: 180ms; }
.exercise:nth-child(4) { transition-delay: 240ms; }

.workout__stats {
  transition: opacity var(--duration-reveal) var(--ease-out-expo);
  transition-delay: 320ms;
  opacity: 0;
}

.workout__panel.is-visible .exercise {
  opacity: 1;
  transform: none;
}

.workout__panel.is-visible .stat__bar {
  transform: scaleX(var(--stat-value, 0));
}

.workout__panel.is-visible .workout__stats {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Entrada do Hero (F2)
   Sequência: label → headline → imagem → texto de apoio → CTAs
   -------------------------------------------------------------------------- */

.hero__label,
.hero__line,
.hero__support,
.hero__actions {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
  transition-delay: var(--hero-delay, 0ms);
}

.hero__support,
.hero__actions {
  transform: translateY(24px);
}

.hero__media {
  opacity: 0;
  transform: translateY(20px) scale(1.04);
  transition:
    opacity var(--duration-hero-media) var(--ease-out-expo),
    transform var(--duration-hero-media) var(--ease-out-expo);
  transition-delay: var(--hero-delay, 0ms);
}

.hero.is-ready .hero__label {
  --hero-delay: 100ms;
}

.hero.is-ready .hero__line:nth-child(1) {
  --hero-delay: 220ms;
}

.hero.is-ready .hero__line:nth-child(2) {
  --hero-delay: 320ms;
}

.hero.is-ready .hero__line:nth-child(3) {
  --hero-delay: 420ms;
}

.hero.is-ready .hero__media {
  --hero-delay: 260ms;
}

.hero.is-ready .hero__support {
  --hero-delay: 560ms;
}

.hero.is-ready .hero__actions {
  --hero-delay: 660ms;
}

.hero.is-ready .hero__label,
.hero.is-ready .hero__line,
.hero.is-ready .hero__support,
.hero.is-ready .hero__actions {
  opacity: 1;
  transform: translateY(0);
}

.hero.is-ready .hero__media {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* O movimento de cursor assume o transform do media depois da entrada */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .hero.is-ready .hero__media {
    transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0);
  }
}

/* --------------------------------------------------------------------------
   5. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }

  /* Manifesto: sem stagger e sem espera */
  .manifesto__title .manifesto__block,
  .manifesto__support {
    transition-delay: 0ms;
  }

  /* Modalidades: troca de imagem instantânea, sem fade cruzado */
  .modality__image {
    transition: none;
  }

  /* Treino da Semana: linhas visíveis e barras já preenchidas */
  .exercise,
  .workout__stats {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stat__bar,
  .workout__panel.is-visible .stat__bar {
    transform: scaleX(var(--stat-value, 0));
    transition: none;
  }

  /* Hero: conteúdo visível de imediato, sem sequência de entrada */
  .hero__label,
  .hero__line,
  .hero__support,
  .hero__actions,
  .hero__media,
  .hero__watermark {
    opacity: 1;
    transform: none;
    transition: none;
  }
}