/*
  Motion (seção 12 da auditoria + refinamento pedido pelo usuário: "algumas
  animations na page, ao trocar seção, ao aparecer o texto").

  Assinatura de entrada ("focus-in wipe"): o texto nasce ligeiramente
  desfocado, deslocado pra baixo e recortado por um clip-path que sobe como
  uma cortina — em vez do fade+scale genérico anterior. É a mesma ideia de
  "coisa entrando em foco" que a UI já usa em outros lugares (o efeito de
  hover dos Pain Point cards com stroke-dashoffset, o count-up dos números)
  — texto que se materializa, não só aparece. Controlado via classes
  .reveal (IntersectionObserver em js/animations.js) + --reveal-delay.
*/

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  clip-path: inset(0 0 12% 0);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s ease-out,
    clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

/* eyebrow: o quadradinho acende um instante antes do texto focar,
   puxando o olhar pro início da linha de leitura antes do conteúdo em si —
   dispara junto com a mesma classe .is-visible do IntersectionObserver */
.eyebrow .eyebrow-dot {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
}

.eyebrow.is-visible .eyebrow-dot {
  transform: scale(1);
  opacity: 1;
  transition-delay: var(--reveal-delay, 0s);
}

/* CTA flutuante / elementos onMount: fade+translateY simples, delay maior (seção 12) */
.appear-on-load {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-in 0.4s var(--ease-entry) forwards;
  animation-delay: var(--appear-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .appear-on-load {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    animation: none;
    transition: none;
  }

  .eyebrow .eyebrow-dot {
    transform: scale(1);
    opacity: 1;
    transition: none;
  }
}

/* hover simples de link do menu já é tratado via CSS :hover em styles.css */

/*
  Fundo global — EJLStarBackground (porte de motion.div/animate do React
  para @keyframes CSS puro). Os 3 keyframes de glow/névoa replicam
  exatamente os arrays de animate() do componente original (opacity/scale/x).
*/

@keyframes star-glow-top {
  0%, 100% { opacity: 0.08; transform: translateX(-40px) scale(1); }
  50%      { opacity: 0.22; transform: translateX(40px) scale(1.2); }
}

@keyframes star-glow-bottom {
  0%, 100% { opacity: 0.06; transform: translateX(30px) scale(1); }
  50%      { opacity: 0.18; transform: translateX(-30px) scale(1.15); }
}

@keyframes star-mist-drift {
  0%, 100% { opacity: 0.1; transform: translateX(-100px); }
  50%      { opacity: 0.2; transform: translateX(100px); }
}

/* cada estrela define --x-move/--y-move/--base-opacity/--peak-opacity
   inline (js/animations.js) — o keyframe é compartilhado, os valores não */
@keyframes star-twinkle {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: var(--base-opacity, 0.5);
  }
  50% {
    transform: translate(var(--x-move, 0), var(--y-move, 0)) scale(1.4);
    opacity: var(--peak-opacity, 1);
  }
}

/* Deriva sutil do campo inteiro, para o céu não parecer estático. */
@keyframes star-field-drift {
  0%, 100% { transform: translate3d(-8px, -5px, 0) scale(1.025); }
  25%      { transform: translate3d(7px, -10px, 0) scale(1.025); }
  50%      { transform: translate3d(10px, 6px, 0) scale(1.025); }
  75%      { transform: translate3d(-6px, 9px, 0) scale(1.025); }
}