/* ==========================================================================
   Cyda Lopes — animations.css
   Revelações na rolagem, entrada do hero, traços desenhados e keyframes.
   Tudo aqui só vale quando o JS está ativo (.js) e o visitante não pediu
   menos movimento (prefers-reduced-motion).
   ========================================================================== */

/* ---- Entrada do hero ---------------------------------------------------- */
.js [data-hero-in] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 75ms + 60ms);
}
.js [data-hero-line] {
  transform: translate3d(0, 108%, 0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 75ms + 60ms);
}
.js .is-loaded [data-hero-in],
.js .is-loaded [data-hero-line] {
  opacity: 1;
  transform: none;
}

.js .hero__arch {
  transform: translateX(-50%) scaleY(0);
  transition: transform 1.4s var(--ease-in-out);
}
.js .hero__arch-line {
  opacity: 0;
  transition: opacity 1.4s var(--ease-out) 0.7s;
}
/* A foto nunca fica oculta (é o LCP): apenas sobe suavemente sobre o arco */
.js .hero__photo {
  translate: 0 28px;
  transition: translate 1.6s var(--ease-out) 0.1s;
}
.js .hero__badge,
.js .hero__caption {
  opacity: 0;
  transition: opacity 1s var(--ease-out) 1.2s;
}
.js .is-loaded .hero__arch { transform: translateX(-50%) scaleY(1); }
.js .is-loaded .hero__arch-line { opacity: 1; }
.js .is-loaded .hero__photo { translate: 0 0; }
.js .is-loaded .hero__badge,
.js .is-loaded .hero__caption { opacity: 1; }

/* Silhueta do logo desenhada à mão: primeiro o contorno, depois o preenchimento */
.js .draw-once {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  transition: stroke-dashoffset 2.8s var(--ease-in-out) 0.6s, fill-opacity 1.4s var(--ease-out) 2.6s;
}
.js .is-loaded .draw-once {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

.hero__badge-ring { animation: spin 32s linear infinite; }

/* ---- Revelações na rolagem --------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(5px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Imagem revelada por máscara (de baixo para cima) + leve zoom out.
   A máscara fica no filho: o contêiner continua "visível" para o
   IntersectionObserver (o Chrome ignora alvos com clip-path total). */
.js .reveal-mask > * {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--ease-in-out);
}
.js .reveal-mask.is-in > * { clip-path: inset(0 0 0 0); }
.js .reveal-mask:not(.is-in) { background: transparent; }
.js .reveal-mask:not(.is-in)::after { opacity: 0; }
.js .reveal-mask img {
  scale: 1.1;
  transition: scale 2s var(--ease-out);
}
.js .reveal-mask.is-in img { scale: 1; }

/* Assinatura escrita da esquerda para a direita */
.js .reveal-sign > * {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2.2s var(--ease-in-out) 0.2s;
}
.js .reveal-sign.is-in > * { clip-path: inset(0 -5% 0 0); }

/* ---- Traço ligado ao scroll (--p vai de 0 a 1 via JS) ------------------- */
.js .scroll-draw {
  --p: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p));
}
.js .body-care__silhouette.scroll-draw {
  fill-opacity: clamp(0, (var(--p) - 0.75) * 1.2, 0.22);
}
.js .brows__art-fill { fill-opacity: clamp(0, (var(--p) - 0.55) * 2.4, 0.9); }
.body-care__silhouette { fill-opacity: 0.22; }
.brows__art-fill { fill-opacity: 0.9; }

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes marquee {
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(260%); }
}
@keyframes wa-pulse {
  0%, 70% { opacity: 0; transform: scale(1); }
  75% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes pin-pulse {
  0% { opacity: 0.8; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ---- Menos movimento ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal,
  .js .reveal-mask > *,
  .js .reveal-sign > *,
  .js [data-hero-in],
  .js [data-hero-line],
  .js .hero__photo,
  .js .hero__badge,
  .js .hero__caption,
  .js .hero__arch-line {
    opacity: 1;
    transform: none;
    translate: none;
    filter: none;
    clip-path: none;
  }
  .js .hero__arch { transform: translateX(-50%); }
  .js .reveal-mask img,
  .media img,
  .g-item__btn img { scale: 1; transform: none !important; }
  .js .draw-once,
  .js .scroll-draw {
    stroke-dashoffset: 0;
    --p: 1;
  }
  .js .draw-once { fill-opacity: 1; }
  .marquee__track { animation: none; }
  .hero__badge-ring { animation: none; }
}