/* ==========================================================================
   style.css — Camada de refinamento sobre o Tailwind CDN
   Cobre:
     01. Base & resets editoriais
     02. Tipografia (OpenType, italics, masks)
     03. Selection, focus-visible, scrollbar
     04. Lenis (scroll suave)
     05. Header — estado .is-scrolled (glass effect)
     06. Hero — perspective, cartas, gradiente de borda
     07. Reveal — estados iniciais (GSAP sobrescreve no load)
     08. Story — imagem + parallax target
     09. Procedimentos — hover refinado
     10. Footer
     11. Acessibilidade — prefers-reduced-motion
     12. Print
   ========================================================================== */

/* ============================================================ */
/* 01. Base & resets editoriais                                  */
/* ============================================================ */

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth; /* fallback sem JS; o Lenis sobrescreve para auto */
}

body {
  font-feature-settings: 'kern', 'liga', 'calt', 'ss01';
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Container shell utilitário (caso precise fora do Tailwind) */
.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-px-mobile);
}
@media (min-width: 768px) {
  .shell { padding-inline: var(--shell-px-tablet); }
}
@media (min-width: 1024px) {
  .shell { padding-inline: var(--shell-px-desktop); }
}

/* ============================================================ */
/* 02. Tipografia editorial                                      */
/* ============================================================ */

.font-display em,
.font-display i {
  font-style: italic;
  font-weight: 400;
}

/* Os headlines usam letter-spacing tighter por padrão; reforço aqui */
h1, h2 {
  letter-spacing: var(--tracking-editorial);
}

/* Italics em champagne herdam o tom da classe Tailwind .text-champagne;
   este bloco serve apenas como failsafe caso o JIT não injete a cor a tempo. */
em.text-champagne,
i.text-champagne {
  color: var(--color-champagne);
}

/* Reveal mask — wrapper que recorta o texto deslizante */
.reveal-mask {
  display: block;
  overflow: hidden;
  line-height: 0.95;
  padding-bottom: 0.1em; /* respira para descenders de italics */
}

.reveal-mask > * {
  display: inline-block;
  will-change: transform, opacity;
  /* Posição inicial controlada exclusivamente pelo GSAP em main.js → setupHeroInitialState. */
}

/* ============================================================ */
/* 03. Selection, focus, scrollbar                               */
/* ============================================================ */

::selection {
  background: var(--color-graphite);
  color: var(--color-ivory);
}

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--color-graphite);
  outline-offset: 4px;
  border-radius: 2px;
}

#header-whatsapp:focus-visible,
#footer-whatsapp:focus-visible {
  outline-color: var(--color-champagne);
  outline-offset: 3px;
}

/* Scrollbar discreta (Lenis ainda controla a inércia) */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--line-medium);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--line-medium) transparent;
}

/* ============================================================ */
/* 04. Lenis — scroll suave                                      */
/* ============================================================ */

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  overflow: hidden;
}

html.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth {
  scroll-behavior: auto; /* impede o smooth nativo de duelar com o Lenis */
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ============================================================ */
/* 05. Header — estado .is-scrolled (glass)                      */
/* ============================================================ */

#site-header {
  position: fixed;
  z-index: var(--z-header);
}

/* Camada de fundo gerenciada por ::before para animar com transition */
#site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(var(--ivory-rgb) / 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-base) var(--ease-soft),
    backdrop-filter var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft);
  pointer-events: none;
  z-index: -1;
}

#site-header.is-scrolled::before {
  background: var(--ivory-glass);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line-soft);
}

/* Reduz levemente o padding vertical quando scrolled (densifica a barra) */
#site-header.is-scrolled > div > div {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  transition: padding var(--dur-base) var(--ease-soft);
}

/* CTA do WhatsApp com micro-lift e tracking refinado */
#header-whatsapp {
  transition:
    transform var(--dur-fast) var(--ease-editorial),
    background-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
  box-shadow: 0 1px 0 0 rgba(var(--graphite-rgb) / 0.04);
}

#header-whatsapp:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(var(--graphite-rgb) / 0.35);
}

.header-ig {
  transition: border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-editorial);
}

.header-ig:hover {
  transform: translateY(-1px);
}

/* ============================================================ */
/* 06. Hero — perspective, cartas, gradiente de borda            */
/* ============================================================ */

#hero {
  isolation: isolate; /* contém o gradiente sem afetar header fixo */
}

/* Selo numerado (01 —) com pequena animação de entrada do traço */
.hero-eyebrow span:first-child {
  transform-origin: left center;
}

#hero-title em {
  color: var(--color-champagne);
  font-style: italic;
  font-weight: 400;
}

/* Container 3D do leque */
.hero-fan {
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* Cartas do leque — estado inicial (oculto até GSAP) */
.hero-card {
  opacity: 0;
  transform-origin: 50% 92%;
  will-change: transform, opacity, filter;
  box-shadow: var(--shadow-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-card img {
  filter: saturate(0.94) contrast(1.02);
  transition: transform var(--dur-cinematic) var(--ease-editorial),
              filter var(--dur-slow) var(--ease-soft);
}

/* Hover do leque: foca a carta sob o cursor, escurece as outras */
.hero-fan:hover .hero-card:not(:hover) {
  filter: brightness(0.78) saturate(0.9);
}

.hero-fan .hero-card:hover {
  box-shadow: var(--shadow-card-hover);
  z-index: 20 !important;
}

.hero-fan .hero-card:hover img {
  transform: scale(1.04);
}

/* Indicador de scroll — animação de respiração do traço */
@keyframes scroll-pulse {
  0%, 100% { transform: scaleX(1); opacity: 0.4; }
  50%      { transform: scaleX(1.4); opacity: 0.8; }
}

#hero a[href="#story"] .block.h-px {
  transform-origin: left center;
  animation: scroll-pulse 2.6s var(--ease-soft) infinite;
}

/* ============================================================ */
/* 07. Reveal — estados iniciais                                 */
/* ============================================================ */

/* Genérico: fade + translateY (GSAP anima para opacity:1 / y:0) */
[data-anim="reveal"] {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* Header tem seu próprio ciclo (entrada no load) */
[data-anim="header"] {
  opacity: 0;
  transform: translateY(-12px);
}

/* Linha do hero (vive dentro de .reveal-mask; herda translateY 110%) */
[data-anim="hero-line"] {
  /* opacidade tratada pelo .hero-card / .reveal-mask > * já; aqui só garante o will-change */
  will-change: transform, opacity;
}

/* Headline que será splitado em linhas (h2 nos blocos Story/Procedures/Contact) */
[data-anim="reveal-line"] {
  /* O JS vai dividir em linhas e gerar máscaras. Até lá fica oculto. */
  opacity: 0;
  will-change: opacity;
}

/* ============================================================ */
/* 08. Story                                                     */
/* ============================================================ */

.story-image {
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border-radius: 2px;
}

.story-image img {
  transition: transform var(--dur-cinematic) var(--ease-editorial);
  will-change: transform;
}

.story-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(var(--graphite-rgb) / 0.42) 100%
  );
  pointer-events: none;
}

/* Hook para parallax leve (yPercent: -8 no ScrollTrigger) */
.story-image[data-parallax] img {
  transform: scale(1.08);
}

/* ============================================================ */
/* 09. Procedimentos — hover refinado                            */
/* ============================================================ */

.procedure-card {
  position: relative;
}

.procedure-card > a {
  display: block;
  transition: transform var(--dur-base) var(--ease-editorial);
}

.procedure-card > a > div:first-child {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-soft);
}

.procedure-card > a > div:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(var(--graphite-rgb) / 0.18));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
  pointer-events: none;
}

.procedure-card:hover > a {
  transform: translateY(-6px);
}

.procedure-card:hover > a > div:first-child {
  box-shadow: var(--shadow-card-hover);
}

.procedure-card:hover > a > div:first-child::after {
  opacity: 1;
}

.procedure-card img {
  filter: saturate(0.96);
}

/* Numeração lateral (01, 02, ...) — micro animação no hover */
.procedure-card h3 + span,
.procedure-card > a > div:nth-child(2) > span:last-child {
  transition: color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}

.procedure-card:hover h3 + span {
  color: var(--color-graphite);
  transform: translateX(-4px);
}

/* ============================================================ */
/* 10. Footer                                                    */
/* ============================================================ */

#site-footer a {
  transition: color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}

#site-footer a:hover {
  color: var(--color-graphite);
}

#footer-whatsapp:hover span:first-child,
#site-footer a:hover span:first-child {
  transform: translateX(2px);
  display: inline-block;
}

/* ============================================================ */
/* 11. Acessibilidade — prefers-reduced-motion                   */
/* ============================================================ */

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

  [data-anim],
  [data-anim="reveal"],
  [data-anim="reveal-line"],
  [data-anim="header"],
  .hero-card,
  .reveal-mask > * {
    opacity: 1 !important;
    transform: none !important;
  }

  #hero a[href="#story"] .block.h-px {
    animation: none !important;
  }
}

/* ============================================================ */
/* 12. Instagram feed                                            */
/* ============================================================ */

.instagram-item {
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-editorial);
}

.instagram-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.instagram-item[aria-busy="true"] {
  animation: instagram-skeleton-pulse 1.8s ease-in-out infinite;
  box-shadow: none;
}

.instagram-item video,
.instagram-item img {
  background: var(--color-line);
}

/* Esconde o ícone de imagem quebrada + alt text até o usuário dropar os arquivos
   reais em assets/images/. Cada card vira um tile bege limpo se a mídia faltar. */
.instagram-item img {
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
}
.instagram-item img::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: var(--color-line);
}

@keyframes instagram-skeleton-pulse {
  0%, 100% { background-color: var(--color-line); }
  50%      { background-color: rgba(var(--graphite-rgb) / 0.04); }
}

/* ============================================================ */
/* 13. Print                                                     */
/* ============================================================ */

@media print {
  #site-header,
  #site-footer,
  #instagram-feed,
  .hero-fan,
  [data-anim] {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.7em;
    color: #555;
  }
}