/* ==========================================================================
   motion.css — camada cinematográfica do site (usada só pelo index2.html)
   Toda regra de movimento fica atrás de `html.motion`, classe que o
   js/motion.js só adiciona quando o visitante NÃO pediu redução de
   movimento (prefers-reduced-motion). Sem JS ou com redução ativa, o site
   renderiza exatamente como o index.html original.
   ========================================================================== */

/* ---------- Barra de progresso de leitura ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--gold); transform-origin:0 50%; transform:scaleX(0);
  z-index:1200; pointer-events:none;
}

/* ---------- Gate: entrada suave ---------- */
html.motion .gate-frame{animation:gateIn 1.1s cubic-bezier(.22,1,.36,1) both;}
@keyframes gateIn{
  from{opacity:0; transform:translateY(34px) scale(.98);}
  to{opacity:1; transform:none;}
}

/* ---------- Preloader: respiração do monograma ---------- */
html.motion #preloader .mono{animation:monoPulse 1.8s ease-in-out infinite;}
@keyframes monoPulse{
  0%,100%{transform:scale(1); opacity:.8;}
  50%{transform:scale(1.06); opacity:1;}
}

/* ---------- Hero: camada de fundo com ken burns + parallax ---------- */
html.motion #hero{overflow:hidden;}
html.motion .hero-bg{
  position:absolute; inset:0; z-index:0; will-change:transform; pointer-events:none;
}
html.motion .hero-bg-img{
  position:absolute; inset:-6%;
  background:linear-gradient(rgba(15,12,9,.6),rgba(15,12,9,.68)), url('../img/web/M_L84.jpg') center/cover no-repeat;
  animation:kenburns 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  from{transform:scale(1);}
  to{transform:scale(1.1);}
}
html.motion .hero-content{will-change:transform, opacity;}
html.motion .scroll-hint{z-index:2;}

/* ---------- Hero: sequência de entrada (classe .hero-ready via JS) ---------- */
html.motion #hero .eyebrow,
html.motion #hero h1,
html.motion #hero .hero-date,
html.motion #hero .count-box,
html.motion #hero .hero-content > .btn-primary{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}
html.motion #hero .eyebrow{letter-spacing:.6em;}
html.motion #hero h1{transform:translateY(18px) scale(.97);}
html.motion #hero .scroll-hint{opacity:0; transition:opacity 1.2s ease 2s;}

html.motion #hero.hero-ready .eyebrow{opacity:1; transform:none; letter-spacing:.35em; transition-delay:.15s; transition-duration:1.4s;}
html.motion #hero.hero-ready h1{opacity:1; transform:none; transition-delay:.4s;}
html.motion #hero.hero-ready .hero-date{opacity:1; transform:none; transition-delay:.75s;}
html.motion #hero.hero-ready .count-box{opacity:1; transform:none;}
html.motion #hero.hero-ready .count-box:nth-child(1){transition-delay:.95s;}
html.motion #hero.hero-ready .count-box:nth-child(2){transition-delay:1.08s;}
html.motion #hero.hero-ready .count-box:nth-child(3){transition-delay:1.21s;}
html.motion #hero.hero-ready .count-box:nth-child(4){transition-delay:1.34s;}
html.motion #hero.hero-ready .hero-content > .btn-primary{opacity:1; transform:none; transition-delay:1.55s;}
html.motion #hero.hero-ready .scroll-hint{opacity:.8;}

/* ---------- Countdown: pulso sutil na virada do segundo ---------- */
html.motion .count-box span.tick{animation:tickIn .5s ease;}
@keyframes tickIn{
  from{opacity:.35; transform:translateY(-4px);}
  to{opacity:1; transform:none;}
}

/* ---------- Navbar: transparente no topo, esconde ao descer, volta ao subir ---------- */
html.motion #navbar{
  transition:transform .5s cubic-bezier(.22,1,.36,1), background .5s ease,
             border-color .5s ease, box-shadow .5s ease;
}
html.motion #navbar.nav-hidden{transform:translateY(-100%);}
html.motion #navbar.nav-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.07);}
html.motion #navbar:not(.nav-scrolled){
  background:transparent; border-bottom-color:transparent; backdrop-filter:none;
}
html.motion #navbar:not(.nav-scrolled) #navMenu a,
html.motion #navbar:not(.nav-scrolled) #navToggle{color:#fff; opacity:.92; text-shadow:0 1px 8px rgba(0,0,0,.4);}
html.motion #navbar:not(.nav-scrolled) #navMenu a:hover{color:#fff; opacity:1;}
html.motion #navbar:not(.nav-scrolled) .nav-logo{filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.35));}
@media (max-width:980px){
  /* dropdown mobile tem fundo creme — links voltam pra cor de tinta */
  html.motion #navbar:not(.nav-scrolled) #navMenu a{color:var(--ink); text-shadow:none;}
}

/* ---------- Reveals por scroll (classes .mv aplicadas pelo motion.js) ---------- */
html.motion .mv{
  opacity:0;
  transition:opacity .9s ease var(--mvd,0ms), transform 1s cubic-bezier(.22,1,.36,1) var(--mvd,0ms),
             letter-spacing 1.2s ease var(--mvd,0ms);
  will-change:opacity, transform;
}
html.motion .mv-up{transform:translateY(36px);}
html.motion .mv-left{transform:translateX(-44px);}
html.motion .mv-right{transform:translateX(44px);}
html.motion .mv-scale{transform:scale(.92) translateY(22px);}
html.motion .mv-fade{transform:none;}
html.motion .section-eyebrow.mv{letter-spacing:.55em;}
html.motion .mv.in{opacity:1; transform:none;}
html.motion .section-eyebrow.mv.in{letter-spacing:.3em;}

/* ---------- Títulos de seção: filete que se desenha ---------- */
html.motion .section-title{position:relative; padding-bottom:20px;}
html.motion .section-title::after{
  content:''; position:absolute; left:50%; bottom:0; width:70px; height:1px;
  background:var(--gold); transform:translateX(-50%) scaleX(0);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1) .35s;
}
html.motion .section-title.in::after{transform:translateX(-50%) scaleX(1);}

/* ---------- Galeria: zoom lento e cinematográfico no hover ---------- */
html.motion .gallery-item img{transition:transform 1.4s cubic-bezier(.22,1,.36,1), filter 1.4s ease;}
html.motion .gallery-item:hover img{transform:scale(1.09); filter:saturate(1.08) brightness(1.03);}

/* ---------- Lightbox: fade + zoom de entrada ---------- */
html.motion .lightbox.open{animation:lbFade .35s ease;}
html.motion .lightbox.open .lightbox-img{animation:lbImg .5s cubic-bezier(.22,1,.36,1);}
@keyframes lbFade{from{opacity:0;}}
@keyframes lbImg{from{opacity:0; transform:scale(.95);}}

/* ---------- FAQ: resposta desliza ao abrir ---------- */
html.motion .faq-item[open] p{animation:faqIn .45s ease;}
@keyframes faqIn{
  from{opacity:0; transform:translateY(-8px);}
  to{opacity:1; transform:none;}
}

/* ---------- Cartões: elevação mais suave ---------- */
html.motion .gift-item{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;}
html.motion .gift-item:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.1);}
html.motion .event-card{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;}
html.motion .event-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.08);}
html.motion .message-card{transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;}
html.motion .message-card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,.07);}

/* ---------- Botões: leve respiro extra ---------- */
html.motion .btn-primary{transition:background .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;}
html.motion .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28);}