/* =========================================================================
   Fisiolight — camada de animação
   Reproduz o comportamento das animações do site de referência (Dolce Coffee):
   abertura, entrada do topo, revelações, parallax, hover, cursor, menu e galeria.
   O visual da página continua todo em style.css; para voltar às animações
   originais, basta remover este arquivo e js/animacoes.js do index.html.
   ========================================================================= */

:root {
  --anim-ease: cubic-bezier(.22, 1, .36, 1);
  --anim-ease-cortina: cubic-bezier(.76, 0, .24, 1);
  --anim-roxo: 101, 81, 123;      /* #65517b, cor dos botões */
  --anim-cobre: #c99562;
}

/* ---------- 1. Desliga as animações próprias da versão anterior ---------- */
.header,
.hero:before,
.hero-copy > *,
.hero-visual,
.title-line > span,
.title-line > em,
.hero-image-frame,
.hero-image-frame > .real-photo,
.outline-shape,
.secondary-photo,
.round-note,
.hero-leaf,
.hero-tag,
.scroll-note,
.scroll-note svg,
.atmosphere > *,
.gallery-heading.visible .founder-signature-name {
  animation: none;
}
.button:before { display: none; }                 /* brilho que cruzava o botão */
.nav > a:after { display: none; }                 /* traço reto do menu */
.care-card { transition: border-color .2s ease; }
.gallery-card { transition: border-color .2s ease; }
.gallery-card > img { transition: transform .7s var(--anim-ease); }
@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover,
  .post-card.visible:hover { transform: none; }
  .hero-image-frame:hover > .real-photo { transform: none; }
}

/* ---------- 2. Rolagem suave (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Troca de cor entre seções no mesmo tempo da referência */
.page-colors > div { transition: opacity .9s var(--anim-ease); }

/* ---------- 3. Abertura ---------- */
.sem-abertura .brand-opening,
html:not(.anim) .brand-opening { display: none; }
.anim .brand-opening { animation: abertura-saida .75s var(--anim-ease-cortina) 1.15s forwards; }
.abertura { width: min(58vw, 260px); animation: abertura-encolhe .45s ease-in 1.15s forwards; }
.abertura-anel {
  stroke-dasharray: 730;
  stroke-dashoffset: 730px;
  transform-box: fill-box;
  transform-origin: 50%;
  animation: abertura-traco .8s cubic-bezier(.65, 0, .35, 1) forwards;
}
.abertura-logo { opacity: 0; animation: abertura-aparece .5s .05s forwards; }
.abertura-nome {
  fill: #3b241800;
  stroke-dasharray: 900;
  stroke-dashoffset: 900px;
  font: 500 44px Cormorant Garamond, Georgia, serif;
  letter-spacing: -.5px;
  animation: abertura-traco .6s .15s forwards, abertura-preenche .35s .55s forwards;
}
.abertura-sub {
  clip-path: inset(0 100% 0 0);
  font: 600 6.8px DM Sans, Arial, sans-serif;
  letter-spacing: 2.6px;
  animation: abertura-escreve .55s cubic-bezier(.45, 0, .2, 1) .62s forwards;
}
@keyframes abertura-traco { to { stroke-dashoffset: 0; } }
@keyframes abertura-preenche { to { fill: #3b2418; } }
@keyframes abertura-escreve { to { clip-path: inset(0); } }
@keyframes abertura-aparece { to { opacity: 1; } }
@keyframes abertura-encolhe { to { opacity: 0; transform: scale(.92); } }
@keyframes abertura-saida {
  0% { clip-path: inset(0); }
  to { clip-path: inset(0 0 100%); visibility: hidden; pointer-events: none; }
}

/* ---------- 4. Estado inicial da entrada do topo (antes da abertura terminar) ---------- */
.anim:not(.topo-pronto) .hero-copy > .eyebrow,
.anim:not(.topo-pronto) .hero-copy > .intro,
.anim:not(.topo-pronto) .hero-copy > .hero-buttons,
.anim:not(.topo-pronto) .hero-copy > .hero-note { opacity: 0; translate: 0 24px; }
.anim:not(.topo-pronto) .hero h1 { opacity: 0; }
.anim:not(.topo-pronto) .outline-shape { opacity: 0; scale: .94; }
.anim:not(.topo-pronto) .hero-image-frame { scale: 1.06; translate: 0 16px; }
.anim:not(.topo-pronto) .secondary-photo { opacity: 0; scale: .6; rotate: -8deg; }
.anim:not(.topo-pronto) .round-note { opacity: 0; scale: .5; }
.anim:not(.topo-pronto) .hero-tag { opacity: 0; translate: 10px 0; }
.anim:not(.topo-pronto) .scroll-note { opacity: 0; }

/* Foto principal: zoom lento contínuo + folga para o parallax */
.anim .hero-image-frame > .real-photo {
  position: relative;
  top: -2%;
  height: 106%;
  animation: zoom-lento 18s ease-in-out infinite alternate;
}
@keyframes zoom-lento {
  from { scale: 1; translate: 0 0; }
  to { scale: 1.07; translate: -1% -1%; }
}

/* Selo redondo girando devagar */
.anim .round-note > svg:first-child { animation: giro-lento 22s linear infinite; }
@keyframes giro-lento { to { rotate: 360deg; } }

/* Indicador "descubra" */
.anim .scroll-note svg { animation: indicador-rolagem 1.8s ease-in-out infinite; }
@keyframes indicador-rolagem {
  0% { translate: 0 -100%; opacity: 0; }
  25%, 70% { opacity: 1; }
  100% { translate: 0 200%; opacity: 0; }
}

/* ---------- 5. Textos palavra por palavra ---------- */
.tr-mascara {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  vertical-align: bottom;
}
.tr-palavra { display: inline-block; will-change: transform; }
.tr-espera .tr-palavra { opacity: 0; translate: 0 105%; filter: blur(8px); }

/* Revelação de blocos */
.rv-espera { opacity: 0; translate: 0 24px; }
.rv-escrita { clip-path: inset(0 100% 0 0); }

/* ---------- 6. Faixa de princípios em movimento ---------- */
.principles > .wrap.faixa { width: 100%; max-width: none; padding-inline: 0; display: block; overflow: hidden; }
.faixa-trilho { display: flex; width: max-content; will-change: transform; }
.faixa-grupo { display: flex; flex-shrink: 0; align-items: center; gap: 56px; padding-right: 56px; }

/* ---------- 7. Cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none; }
.cursor-bola {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(var(--anim-roxo), .9);
  border-radius: 50%;
  background: rgba(var(--anim-roxo), 0);
  translate: -50% -50%;
  transition: background-color .35s var(--anim-ease), opacity .3s ease;
}
.cursor.ver .cursor-bola { background: rgba(var(--anim-roxo), .92); }
.cursor-rotulo {
  color: #fbf7f1;
  font: italic 500 18px Cormorant Garamond, Georgia, serif;
  white-space: nowrap;
  opacity: 0;
  scale: .6;
  transition: opacity .3s ease, scale .35s var(--anim-ease);
}
.cursor.ver .cursor-rotulo { opacity: 1; scale: 1; }
@media (width < 768px) { .cursor { display: none; } }

/* ---------- 8. Cards de cuidados: inclinação, brilho e corações ---------- */
.care-card { position: relative; transform-style: preserve-3d; }
.card-brilho {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .35), transparent 55%);
  transition: opacity .5s ease;
}
.care-card:hover .card-brilho { opacity: 1; }
.coracao {
  position: absolute;
  z-index: 10;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  color: #936039;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08));
}

/* Link do card: sublinhado que cresce e seta que anda */
.care-card > a .sublinha { position: relative; }
.care-card > a .sublinha::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--anim-cobre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.care-card > a svg { transition: transform .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .care-card > a:hover .sublinha::after { transform: scaleX(1); }
  .care-card > a:hover svg { transform: translateX(4px); }
}

/* ---------- 9. Sublinhado desenhado à mão no menu ---------- */
.nav > a { position: relative; }
.sublinhado-mao {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 10px;
  overflow: visible;
  pointer-events: none;
}
.sublinhado-mao path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .5s ease-out;
}
.nav > a:hover .sublinhado-mao path,
.nav > a:focus-visible .sublinhado-mao path { stroke-dashoffset: 0; }
@media (width <= 900px) { .sublinhado-mao { display: none; } }

/* ---------- 10. Galeria: hover e ícone ---------- */
.card-sobreposicao {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(32, 22, 43, 0);
  transition: background-color .5s ease;
}
.card-sobreposicao svg {
  width: 44px;
  height: 44px;
  color: #fcf8fe;
  opacity: 0;
  scale: .75;
  transition: opacity .5s ease, scale .5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-card:hover > img { transform: scale(1.1); }
  .gallery-card:hover .card-sobreposicao { background: rgba(32, 22, 43, .35); }
  .gallery-card:hover .card-sobreposicao svg { opacity: 1; scale: 1; }
}

/* Enquanto os cards se montam, eles podem sair um pouco da faixa (para cima e para baixo) */
.instagram { overflow-x: clip; }
.gallery-track.montando { overflow: visible; clip-path: inset(-400px 0 -400px 0); }

/* ---------- 11. Janela de vídeo/publicação ---------- */
.janela {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(32, 22, 43, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.janela[hidden] { display: none; }
.janela-caixa {
  position: relative;
  width: min(92vw, 420px);
  max-height: 85svh;
  overflow: auto;
  border-radius: 28px;
  background: #fcf8fe;
  overscroll-behavior: contain;
}
.janela-caixa iframe { display: block; width: 100%; height: min(85svh, 760px); border: 0; }
.lenis.lenis-smooth .janela-caixa iframe { pointer-events: auto; }
.janela-fechar {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fcf8fe;
  color: #3b2418;
  cursor: pointer;
}

/* ---------- 12. Botão flutuante do WhatsApp ---------- */
.floating-contact { isolation: isolate; }
.anim .floating-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #65517b;
  animation: pulso-whatsapp 2.2s ease-out infinite;
}
.anim .floating-contact:not(.flutuante-visivel) { opacity: 0; scale: .6; translate: 0 20px; pointer-events: none; }
@keyframes pulso-whatsapp {
  0% { opacity: .55; transform: scale(1); }
  to { opacity: 0; transform: scale(1.7); }
}

/* Contador de seguidores sem "pular" de largura */
.contador-numero { font-variant-numeric: tabular-nums; }

/* ---------- 13. Menu do celular ---------- */
.menu-mascara { display: block; overflow: hidden; }
.menu-texto { display: block; }

/* ---------- 14. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim .floating-contact::before { display: none; }
  .anim .hero-image-frame > .real-photo,
  .anim .round-note > svg:first-child,
  .anim .scroll-note svg { animation: none; }
}