/* ==========================================================================
   Movimento. Tudo termina num estado visível; com "reduzir movimento", nada anima.
   ========================================================================== */

/* ---------- Entrada do topo (classe .is-intro adicionada pelo motion.js) ---------- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .16em .08em; margin-block: -.16em -.08em; }
[data-split] .w > span { display: inline-block; }

.is-intro .lockup__black { animation: rise .8s var(--ease-out) both; }
.is-intro .lockup__tag { animation: swing 1.2s .2s var(--ease-out) both; }
.is-intro .lockup__logo { animation: slide-in .9s .4s var(--ease-out) both; }
.is-intro [data-split] .w > span { animation: word-up 1s calc(.45s + var(--i, 0) * 60ms) var(--ease-out) both; }
.is-intro .hero .lead, .is-intro .thanks__text { animation: rise .8s 1.05s var(--ease-out) both; }
.is-intro .hero__actions, .is-intro .thanks__actions { animation: rise .8s 1.15s var(--ease-out) both; }
.is-intro .hero .fine, .is-intro .pending { animation: rise .8s 1.25s var(--ease-out) both; }
.is-intro .thanks__ok { animation: pop .6s .3s var(--ease-spring) both; }
.is-intro .tape { animation: tape-in 1.1s .7s var(--ease-out) both; }
.is-intro .topbar__chip { animation: pop .6s .3s var(--ease-spring) both; }
.is-intro .fan__item--bill { animation: deal 1s .9s var(--ease-out) both; }
.is-intro .fan__item--cal { animation: deal 1s 1.05s var(--ease-out) both; }
.is-intro .fan__item--invite { animation: deal 1s 1.2s var(--ease-out) both; }
.is-intro .fan__stamp { animation: stamp-slam .7s 1.7s var(--ease-out) both; }
.is-intro .ticket { animation: ticket-in .9s .5s var(--ease-spring) both; }
.is-intro .ticket__stamp { animation: stamp-slam .7s 1.2s var(--ease-out) both; }

/* Flutuação contínua do leque */
.fan__item > * { animation: float 6s ease-in-out infinite; }
.fan__item--cal > * { animation-delay: -2s; }
.fan__item--invite > * { animation-delay: -4s; }

/* Detalhes vivos das ilustrações */
.pass__plane { animation: fly 3.2s var(--ease-out) infinite; }
.phone__inf path { stroke-dasharray: 100; animation: infinity 5s ease-in-out infinite; }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes word-up { from { transform: translateY(108%); } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes swing {
  0% { opacity: 0; transform: translateX(-24px) rotate(-30deg); }
  45% { opacity: 1; transform: translateX(0) rotate(10deg); }
  68% { transform: rotate(-6deg); }
  85% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
@keyframes tape-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes deal { from { opacity: 0; transform: translate(60px, 40px) rotate(18deg) scale(.9); } }
@keyframes float { 50% { translate: 0 -10px; } }
@keyframes fly { 0%, 20% { transform: translateX(-3px); } 60% { transform: translateX(4px); } 100% { transform: translateX(-3px); } }
@keyframes infinity { 0% { stroke-dashoffset: 100; } 35%, 100% { stroke-dashoffset: 0; } }
@keyframes ticket-in { from { opacity: 0; transform: translateY(24px) rotate(-10deg) scale(.9); } }

/* ---------- Revelar ao rolar (só o que estava abaixo da dobra) ---------- */
[data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].is-pending { opacity: 0; transform: translateY(36px); }
.cards > [data-reveal]:nth-child(2), .steps > [data-reveal]:nth-child(2), .prizes > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.cards > [data-reveal]:nth-child(3), .steps > [data-reveal]:nth-child(3), .prizes > [data-reveal]:nth-child(3) { transition-delay: .16s; }
/* Depois de revelado, o card volta a responder rápido ao mouse */
.card[data-reveal]:not(.is-pending) { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), opacity .9s var(--ease-out); }

/* ---------- Carimbo que bate ----------
   A rotação final de cada carimbo vem do próprio elemento (--stamp-r), para a batida terminar no ângulo certo. */
[data-stamp].is-armed { opacity: 0; }
[data-stamp].is-slam { animation: stamp-slam .7s var(--ease-out) both; }
@keyframes stamp-slam {
  0% { opacity: 0; transform: scale(2.6) rotate(calc(var(--stamp-r, -9deg) - 13deg)); }
  55% { opacity: 1; transform: scale(.92) rotate(calc(var(--stamp-r, -9deg) + 1deg)); }
  75% { transform: scale(1.05) rotate(calc(var(--stamp-r, -9deg) - 1deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--stamp-r, -9deg)); }
}
.prize-first__ill .stamp, .prize__ill .stamp { --stamp-r: 12deg; }

/* ---------- Inclinação 3D (só com mouse) ---------- */
@media (hover: hover) and (pointer: fine) {
  .card.is-tilting { transition: transform .12s linear, box-shadow .6s var(--ease-out); }
  .card:hover { box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .9), 0 0 0 1px var(--accent-glow); }
  .prize { transition: transform .4s var(--ease-out); }
  .prize:hover { transform: translateY(-4px); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .tape__track { animation: none; }
  [data-reveal].is-pending, [data-stamp].is-armed { opacity: 1; transform: none; }
}