/* ==========================================================================
   ANIMATIONS.CSS — Microanimações do projeto Clube da Costura
   Todas as animações usam apenas transform e opacity para manter
   a performance (compositor-only, sem reflow).

   Sistema de revelação:
   - Elementos com a classe .reveal iniciam invisíveis.
   - O JavaScript (js/main.js) adiciona .is-visible quando o elemento
     entra na viewport, disparando a transição correspondente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ESTADO INICIAL DOS ELEMENTOS REVELÁVEIS
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Fade Up — sobe suavemente enquanto aparece */
.reveal--up {
  transform: translateY(32px);
}

/* Fade Left — entra vindo da esquerda */
.reveal--left {
  transform: translateX(-40px);
}

/* Fade Right — entra vindo da direita */
.reveal--right {
  transform: translateX(40px);
}

/* --------------------------------------------------------------------------
   ESTADO FINAL — aplicado via JavaScript ao entrar na viewport
   -------------------------------------------------------------------------- */
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* O escalonamento (stagger) da revelação em cascata é feito via
   JavaScript (js/main.js), evitando conflitos de transition-delay
   com os efeitos de hover. */

/* --------------------------------------------------------------------------
   FLOAT — flutuação contínua e sutil (imagem do celular na hero)
   -------------------------------------------------------------------------- */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

.float {
  animation: float 5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   HOVER SCALE — leve aproximação na foto e no card
   A foto e o card também usam o sistema .reveal, portanto a transição
   precisa incluir opacity (revelação) além de transform/box-shadow (hover).
   -------------------------------------------------------------------------- */
.about__photo,
.card {
  transition:
    opacity 700ms ease,
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.about__photo:hover {
  transform: scale(1.02);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* --------------------------------------------------------------------------
   ACESSIBILIDADE — respeita usuários que preferem menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}