/* ==========================================================================
   NailGram — Motion layer
   Direção: editorial / premium, intensidade discreta.
   Regras: só transform e opacity (+ clip-path nos reveals de imagem),
   uma leitura por elemento, parallax raso, nada de motion no mobile pequeno.
   Sem JS a página aparece 100% estática e completa (gate na classe .js).
   ========================================================================== */

:root {
  --ng-ease: cubic-bezier(.22, .74, .28, 1);
  --ng-ease-soft: cubic-bezier(.33, .8, .38, 1);
  --ng-rise: 20px;
  --ng-rise-sm: 12px;
  --ng-dur: 640ms;
  --ng-dur-sm: 540ms;
  --ng-dur-mask: 760ms;
}

/* --------------------------------------------------------------------------
   1. Reveals de entrada por scroll
   Estados iniciais só existem quando o JS está ativo e vai revelá-los.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  transition-property: opacity, transform, clip-path;
  transition-duration: var(--ng-dur-sm);
  transition-timing-function: var(--ng-ease);
  transition-delay: var(--ng-reveal-delay, 0ms);
}

/* fade puro — legendas, microcopy, selos */
.js [data-reveal="fade"] { opacity: 0; }

/* subida discreta — títulos (rise maior) e textos/blocos (rise curto) */
.js [data-reveal="up"] {
  opacity: 0;
  transform: translate3d(0, var(--ng-rise), 0);
  transition-duration: var(--ng-dur);
}
.js [data-reveal="up-sm"] {
  opacity: 0;
  transform: translate3d(0, var(--ng-rise-sm), 0);
}

/* escala mínima — cards, quebra do ciclo, setas do fluxo */
.js [data-reveal="scale"] {
  opacity: 0;
  transform: scale(.985) translate3d(0, 8px, 0);
  transition-timing-function: var(--ng-ease-soft);
}

/* cortina editorial — a foto abre de baixo para cima dentro da moldura.
   O clip-path é aplicado na <img>, não na moldura, para preservar o
   border-radius e as sombras dos containers. */
.js [data-reveal="mask"] > img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path var(--ng-dur-mask) var(--ng-ease-soft), transform 1100ms var(--ng-ease-soft);
  transition-delay: var(--ng-reveal-delay, 0ms);
}
.js [data-reveal="mask"].is-revealed > img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* linha do ciclo — desenhada de cima para baixo */
.js [data-reveal="line"] {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition-duration: 520ms;
}

/* estado final — o reset de transform é por tipo, nunca global, para não
   apagar transforms de layout (ex.: a rotação do selo do hero). */
.js [data-reveal].is-revealed { opacity: 1; }
.js [data-reveal="up"].is-revealed,
.js [data-reveal="up-sm"].is-revealed,
.js [data-reveal="scale"].is-revealed,
.js [data-reveal="line"].is-revealed { transform: none; }

/* --------------------------------------------------------------------------
   2. Parallax raso (JS escreve --py / --pyi; CSS compõe a transform)
   `translate3d` já promove o elemento a uma camada de composição, então
   `will-change` seria redundante e manteria camadas presas na memória.
   -------------------------------------------------------------------------- */
.js [data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0) rotate(var(--rot, 0deg));
}
.js .hero-small--top { --rot: -5deg; }
.js .hero-small--bottom { --rot: 4deg; }

/* imagem respira dentro da moldura conforme a seção atravessa a viewport.
   A escala 1.1 garante folga suficiente para o deslocamento sem mostrar borda. */
.js [data-parallax-image] > img {
  transform: scale(1.1) translate3d(0, var(--pyi, 0px), 0);
}
/* moldura que combina cortina + parallax: a cortina cuida do clip-path,
   o parallax cuida do transform, sem disputa de transition. */
.js [data-reveal="mask"][data-parallax-image] > img {
  transition: clip-path var(--ng-dur-mask) var(--ng-ease-soft);
  transition-delay: var(--ng-reveal-delay, 0ms);
}
.js [data-reveal="mask"][data-parallax-image].is-revealed > img {
  transform: scale(1.1) translate3d(0, var(--pyi, 0px), 0);
}

/* --------------------------------------------------------------------------
   3. Header — ganha corpo depois que a página começa a rolar
   -------------------------------------------------------------------------- */
.site-header {
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  background: rgba(251, 248, 244, .92);
  border-bottom-color: rgba(38, 33, 31, .12);
  box-shadow: 0 8px 24px rgba(38, 33, 31, .05);
}
.header-link .ng-icon { transition: transform .18s var(--ng-ease); }
.header-link:hover .ng-icon { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Microinterações
   -------------------------------------------------------------------------- */
.ng-button .ng-icon { transition: transform .18s var(--ng-ease); }
.ng-button:hover .ng-icon { transform: translate3d(2px, -2px, 0); }
.ng-button:active { transform: translateY(0); transition-duration: 90ms; }

.content-tile .image-frame img,
.gallery-item .image-frame img,
.ref-card .image-frame img { transition: transform .5s var(--ng-ease-soft); }
.content-tile:hover .image-frame img,
.gallery-item:hover .image-frame img { transform: scale(1.03); }

.member-menu { cursor: default; }
.offer-card { transition: transform .35s var(--ng-ease-soft), box-shadow .35s var(--ng-ease-soft); }
.offer-card:hover { transform: translateY(-3px); box-shadow: 0 36px 90px rgba(38, 33, 31, .3); }

/* --------------------------------------------------------------------------
   5. Botão de WhatsApp — entra depois que o usuário passa da primeira dobra
   -------------------------------------------------------------------------- */
.js .whatsapp-float.is-ready {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(.94);
  pointer-events: none;
  transition: opacity .32s var(--ng-ease), transform .32s var(--ng-ease), box-shadow .2s ease, filter .2s ease;
}
.js .whatsapp-float.is-ready.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}
.js .whatsapp-float.is-ready.is-visible:hover { transform: translate3d(0, -3px, 0) scale(1); }

/* --------------------------------------------------------------------------
   6. Ajustes responsivos de motion
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --ng-rise: 16px; --ng-rise-sm: 10px; --ng-dur: 560ms; --ng-dur-mask: 660ms; }
}

@media (max-width: 680px) {
  :root { --ng-rise: 14px; --ng-rise-sm: 9px; --ng-dur: 520ms; --ng-dur-sm: 460ms; --ng-dur-mask: 580ms; }

  /* sem parallax no mobile: menos camadas animadas e zero risco de jank */
  .js [data-parallax] { --py: 0px !important; }
  .js [data-parallax-image] > img,
  .js [data-reveal="mask"][data-parallax-image].is-revealed > img {
    --pyi: 0px !important;
    transform: scale(1.02);
  }
  .js [data-reveal="mask"] > img { transition-duration: 640ms; }

  /* hover não existe em touch: nenhuma informação depende dele */
  .content-tile:hover .image-frame img,
  .gallery-item:hover .image-frame img { transform: none; }
  .offer-card:hover { transform: none; box-shadow: 0 30px 80px rgba(38, 33, 31, .25); }
}

/* --------------------------------------------------------------------------
   7. prefers-reduced-motion — conteúdo idêntico, sem movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Todo conteúdo aparece imediatamente. O reset de transform continua
     escopado por tipo de reveal: `transform: none` global apagaria rotações
     que fazem parte do layout (selo do hero, cartões inclinados). */
  .js [data-reveal],
  .js [data-reveal].is-revealed { opacity: 1 !important; transition: none !important; }
  .js [data-reveal="up"],
  .js [data-reveal="up-sm"],
  .js [data-reveal="scale"],
  .js [data-reveal="line"],
  .js [data-reveal="up"].is-revealed,
  .js [data-reveal="up-sm"].is-revealed,
  .js [data-reveal="scale"].is-revealed,
  .js [data-reveal="line"].is-revealed { transform: none !important; }

  .js [data-reveal="mask"] > img,
  .js [data-reveal="mask"].is-revealed > img {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }

  .js [data-parallax] { --py: 0px !important; transform: rotate(var(--rot, 0deg)) !important; }
  .js [data-parallax-image] > img,
  .js [data-reveal="mask"][data-parallax-image].is-revealed > img { transform: none !important; transition: none !important; }

  .js .whatsapp-float.is-ready,
  .js .whatsapp-float.is-ready.is-visible { opacity: 1; transform: none; pointer-events: auto; transition: none; }

  .faq-answer { transition: none; }
  .faq-item button svg { transition: none; }
  .site-header { transition: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}