/* =========================================================
   LEVI DIOLI · ANIMAÇÕES
   Arquivo separado — pronto para iterar/ajustar
   ========================================================= */

/* ---------- Variáveis de timing ---------- */
:root {
  --anim-ease:     cubic-bezier(.22,.61,.36,1);
  --anim-ease-out: cubic-bezier(.16,1,.3,1);
  --anim-fast:     480ms;
  --anim-mid:      720ms;
  --anim-slow:     1100ms;
}

/* ---------- Estado inicial (antes do scroll) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--anim-mid) var(--anim-ease-out), transform var(--anim-mid) var(--anim-ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* delays escalonados — usar via data-delay=1..6 */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

/* fade puro (sem deslocamento) */
.reveal-fade { opacity: 0; transition: opacity var(--anim-slow) var(--anim-ease); }
.reveal-fade.is-in { opacity: 1; }

/* deslocamento horizontal */
.reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity var(--anim-mid) var(--anim-ease-out), transform var(--anim-mid) var(--anim-ease-out); }
.reveal-right { opacity: 0; transform: translateX( 32px); transition: opacity var(--anim-mid) var(--anim-ease-out), transform var(--anim-mid) var(--anim-ease-out); }
.reveal-left.is-in, .reveal-right.is-in { opacity: 1; transform: none; }

/* ---------- Hero: headline com revelação por linha ---------- */
.hero__title .row {
  display: block;
  overflow: hidden;
  position: relative;
}
.hero__title .row > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--anim-slow) var(--anim-ease-out);
}
.hero__title.is-in .row > span { transform: translateY(0); }
.hero__title .row:nth-child(1) > span { transition-delay: 220ms; }
.hero__title .row:nth-child(2) > span { transition-delay: 360ms; }
.hero__title .row:nth-child(3) > span { transition-delay: 500ms; }

/* hero — outros elementos entram em cascata */
.hero__eyebrow,
.hero__lead,
.hero__actions,
.hero__quote {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--anim-ease-out), transform 800ms var(--anim-ease-out);
}
.hero.is-loaded .hero__eyebrow { opacity: 1; transform: none; transition-delay: 200ms; }
.hero.is-loaded .hero__lead    { opacity: 1; transform: none; transition-delay: 600ms; }
.hero.is-loaded .hero__actions { opacity: 1; transform: none; transition-delay: 760ms; }
.hero.is-loaded .hero__quote   { opacity: 1; transform: none; transition-delay: 900ms; }

/* hero — visual entra com leve escala */
.hero__visual {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1200ms var(--anim-ease), transform 1400ms var(--anim-ease);
}
.hero.is-loaded .hero__visual { opacity: 1; transform: scale(1); }

/* ---------- Logo / monograma na carga ---------- */
.nav__logo {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 700ms var(--anim-ease-out) 120ms, transform 700ms var(--anim-ease-out) 120ms;
}
.nav.is-loaded .nav__logo { opacity: 1; transform: none; }

.brand-mark-draw {
  /* Aplique em SVG do monograma; o JS controla as classes */
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawMark 2.4s var(--anim-ease) 200ms forwards;
}
@keyframes drawMark {
  to { stroke-dashoffset: 0; }
}

/* ---------- Linha animada abaixo de títulos ---------- */
.title-line {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.title-line::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--greyge);
  transition: width 1100ms var(--anim-ease-out) 200ms;
}
.title-line.is-in::after { width: 100%; }

/* ---------- Cards: leve elevação ---------- */
.card {
  transition: transform 380ms var(--anim-ease-out),
              background 380ms var(--anim-ease-out),
              border-color 380ms var(--anim-ease-out),
              box-shadow 380ms var(--anim-ease-out);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px -36px rgba(0,0,0,0.6);
}

/* ---------- Método: linhas entram em cascata ---------- */
.metodo__row { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--anim-ease-out), transform 700ms var(--anim-ease-out); }
.metodo__row.is-in { opacity: 1; transform: none; }
.metodo__row:nth-child(1).is-in { transition-delay: 120ms; }
.metodo__row:nth-child(2).is-in { transition-delay: 200ms; }
.metodo__row:nth-child(3).is-in { transition-delay: 280ms; }
.metodo__row:nth-child(4).is-in { transition-delay: 360ms; }
.metodo__row:nth-child(5).is-in { transition-delay: 440ms; }

/* ---------- Depoimentos: revelação suave ---------- */
.depo {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 800ms var(--anim-ease-out), transform 800ms var(--anim-ease-out);
}
.depo.is-in { opacity: 1; transform: none; }
.depo:nth-child(1).is-in { transition-delay: 60ms; }
.depo:nth-child(2).is-in { transition-delay: 200ms; }
.depo:nth-child(3).is-in { transition-delay: 340ms; }
.depo:nth-child(4).is-in { transition-delay: 460ms; }

/* ---------- Botões: hover refinado ---------- */
.btn .btn__arrow {
  transition: transform 320ms var(--anim-ease-out), background 320ms var(--anim-ease-out);
}
.btn:hover .btn__arrow {
  transform: rotate(-8deg) scale(1.08);
}

/* ---------- Form fields: microinterações ---------- */
.field {
  transition: border-color 280ms var(--anim-ease), background 280ms var(--anim-ease), transform 280ms var(--anim-ease);
}
.field:focus-within {
  border-color: var(--marrom);
  background: var(--offwhite);
  transform: translateY(-1px);
}
.field__label {
  transition: color 220ms var(--anim-ease), transform 220ms var(--anim-ease);
}
.field:focus-within .field__label { color: var(--marrom); }

/* ---------- Parallax sutil (controlado via JS) ---------- */
.has-parallax { will-change: transform; }

/* ---------- Hero portrait — leve "respiração" ---------- */
.hero__portrait {
  animation: breath 12s ease-in-out infinite alternate;
}
@keyframes breath {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.04) translateY(-2%); }
}

/* ---------- Monograma O — rotação contínua, lenta ---------- */
.manifesto__o,
.cta-final__o {
  animation: spinSlow 90s linear infinite;
}
@keyframes spinSlow {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---------- Accordion FAQ: pulse no botão ao abrir ---------- */
.faq-item.is-open .faq-item__btn .faq-item__q {
  color: var(--greyge);
  transition: color 320ms var(--anim-ease);
}

/* ---------- Sigil "O" pulsante (hero meta) ---------- */
.hero__sigil {
  animation: pulseDot 2.6s var(--anim-ease) infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(165,125,98,0.50); }
  50%      { box-shadow: 0 0 0 14px rgba(165,125,98,0); }
}

/* ---------- Marquee (caso seja adicionado) ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Respeitar preferência de movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-fade, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
  .hero__title .row > span { transform: none !important; }
}