/* ==========================================================
   Movimento — calmo, lento e com propósito.
   Entrada do hero na carga; demais seções revelam ao rolar.
   Tudo é desligado com prefers-reduced-motion.
   ========================================================== */

@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in {
  from { clip-path: inset(6% 6% 6% 6% round 26px); }
  to { clip-path: inset(0 0 0 0 round 26px); }
}
@keyframes arch-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes orb-in { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes chip-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: .55; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -8px); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); }
  70% { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Hero: entrada ---------- */
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: inline-block; }
.hero__title .line > span { animation: rise 1.15s var(--ease-out) both; }
.hero__title .line:nth-child(2) > span { animation-delay: .12s; }
.hero .orb { animation: orb-in 1.2s var(--ease-out) .45s both, breathe 6s ease-in-out 1.8s infinite; }
.topbar { animation: fade-down .9s var(--ease-out) .1s both; }
.hero__cta-row { animation: fade-up 1s var(--ease-out) .4s both; }
.hero__strip { animation: fade-up 1s var(--ease-out) .55s both; }
.hero__visual { animation: card-in 1.4s var(--ease-out) .05s both; }
.arch { animation: arch-up 1.3s var(--ease-out) .3s both; }
.arch img { animation: settle 2.2s var(--ease-out) .3s both; }
.hero__visual .chip--1 { animation: chip-in .8s var(--ease-out) .95s both, float 6s ease-in-out 2s infinite; }
.hero__visual .chip--2 { animation: chip-in .8s var(--ease-out) 1.1s both, float 7s ease-in-out 2.6s infinite; }
.hero__visual .chip--3 { animation: chip-in .8s var(--ease-out) 1.25s both, float 6.5s ease-in-out 3.1s infinite; }
.hero__meta, .hero__quote { animation: fade 1s var(--ease-out) .7s both; }
.hero__copy { animation: fade-up 1s var(--ease-out) .85s both; }
.hero__insta { animation: fade-up 1s var(--ease-out) 1.05s both; }
.hero__mcta { animation: fade-up 1s var(--ease-out) 1.1s both; }
.rings circle { transform-box: fill-box; transform-origin: center; animation: ring 9s ease-in-out infinite; }
.rings circle:nth-child(2) { animation-delay: -3s; }
.rings circle:nth-child(3) { animation-delay: -6s; }

/* Bolhas do card de destaque */
.bubble--lg { animation: drift 9s ease-in-out infinite; }
.bubble--sm { animation: drift 7s ease-in-out -2s infinite reverse; }

/* CTA final */
.btn--pulse { animation: pulse 2.8s var(--ease-soft) 1s infinite; }

/* ---------- Revelação ao rolar (só com JS ativo) ---------- */
html.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }
/* cards com hover precisam de transição de transform rápida depois de revelados */
html.js .spec.reveal.is-in { transition: opacity .9s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out); transition-delay: 0s; }

html.js .reveal-clip {
  clip-path: inset(100% 0 0 0 round 22px);
  transition: clip-path 1.2s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms);
}
html.js .reveal-clip.is-in { clip-path: inset(0 0 0 0 round 22px); }
html.js .why__visual.reveal-clip { clip-path: inset(100% 0 0 0 round 26px); }
html.js .why__visual.reveal-clip.is-in { clip-path: inset(0 0 0 0 round 26px); }
html.js .gallery .reveal-clip:not(.is-in) img { transform: scale(1.18); }

html.js .reveal-lines .line > span { transform: translateY(108%); transition: transform 1.1s var(--ease-out); }
html.js .reveal-lines .line:nth-child(2) > span { transition-delay: .12s; }
html.js .reveal-lines.is-in .line > span { transform: none; }

/* Frase do "Sobre": palavras acendem conforme a rolagem */
.statement__text .w { transition: opacity .5s var(--ease-soft), transform .7s var(--ease-out); }
html.js .statement__text .w { opacity: .16; }
html.js .statement__text .w.is-lit { opacity: 1; }
html.js .statement__text .inline-pic.w { transform: scale(.5); }
html.js .statement__text .inline-pic.w.is-lit { transform: none; }

/* ---------- Menu mobile ---------- */
.menu { opacity: 0; transition: opacity .4s var(--ease-out); }
.menu.is-open { opacity: 1; }
.menu__links a { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .05s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .1s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .15s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: .2s; }

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  html.js .reveal, html.js .reveal-clip, html.js .reveal-lines .line > span,
  html.js .statement__text .w, html.js .gallery .reveal-clip img, .menu__links a {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}