/* Movimento curto, uma vez por entrada. Sem parallax, loops ou trabalho por scroll.
   Transform só em peças pequenas: nunca no app-shell, página ou navegação fixa. */
:root {
  --motion-quick: 150ms;
  --motion-enter: 420ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

@keyframes jogano-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes jogano-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes jogano-icon-in {
  from { transform: translateY(3px) scale(.9); }
  to { transform: none; }
}
@keyframes jogano-accent-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* A casca só dissolve: transformar a página prenderia seus descendentes fixed. */
.page-animate { animation: jogano-appear 220ms ease-out; }
.page-header { animation: jogano-appear 220ms ease-out; }
.page-header-icon { animation: jogano-icon-in 320ms var(--motion-ease); }
.section-card, .empty-state { animation: jogano-appear 280ms ease-out; }
.stat-grid > .stat-tile {
  animation: jogano-appear 300ms ease-out both;
}
.stat-grid > .stat-tile:nth-child(2) { animation-delay: 40ms; }
.stat-grid > .stat-tile:nth-child(3) { animation-delay: 80ms; }
.stat-grid > .stat-tile:nth-child(4) { animation-delay: 120ms; }

/* Hero em sequência: texto, explicação e ação. O botão já responde durante a entrada. */
.lp-hero-content > :is(.lp-hero-eyebrow, .lp-hero-title, .lp-hero-sub, .lp-hero-ctas, .lp-hero-perks) {
  animation: jogano-rise 480ms var(--motion-ease) both;
}
.lp-hero-content > .lp-hero-title { animation-delay: 50ms; }
.lp-hero-content > .lp-hero-sub { animation-delay: 100ms; }
.lp-hero-content > .lp-hero-ctas { animation-delay: 150ms; }
.lp-hero-content > .lp-hero-perks { animation-delay: 190ms; }
.lp-hero-eyebrow { display: inline-block; }
.lp-hero-title-accent {
  text-decoration: underline;
  text-decoration-color: rgba(203, 255, 61, .25);
  text-underline-offset: .16em;
  text-decoration-thickness: .07em;
}
.lp-hero-ctas .lp-btn-lime { box-shadow: 0 6px 24px rgba(203, 255, 61, .22); }
.lp-mobile-menu { animation: jogano-appear 180ms ease-out; }

/* O módulo só prepara elementos abaixo da dobra. Sem JS, nada fica escondido.
   Sem fill-mode: ao terminar a entrada, hover e foco voltam a controlar transform. */
.jogano-reveal-pending { opacity: 0; transform: translateY(12px); }
.jogano-reveal-enter { animation: jogano-rise var(--motion-enter) var(--motion-ease); }
.jogano-reveal-pending:focus-within { opacity: 1; transform: none; }

.lp-feature-card, .lp-pricing-card {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--motion-ease);
}
.lp-feature-card { box-shadow: 0 4px 16px rgba(15, 27, 42, .035); }
.lp-feature-icon, .lp-step-icon {
  transition: transform 220ms var(--motion-ease);
}
.lp-section[id] { scroll-margin-top: 24px; }

/* Transições só nas propriedades necessárias, inclusive nos controles do app. */
.btn-primary, .btn-secondary, .header-action, .tab-pill, .sidebar-link,
.lp-btn-lime, .lp-btn-ghost, .lp-btn-outline-light, .lp-btn-outline-dark {
  transition: transform var(--motion-quick) var(--motion-ease),
              background-color var(--motion-quick) ease,
              border-color var(--motion-quick) ease,
              color var(--motion-quick) ease,
              box-shadow var(--motion-quick) ease;
}
.custom-input {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.game-card { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--motion-ease); }

/* A superfície da aba entra por opacidade/escala, sem tentar interpolar gradientes. */
.bottom-nav .bottom-nav-item {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 10px 4px; border: none; border-radius: 14px;
  cursor: pointer; position: relative; isolation: isolate;
  background: transparent; color: var(--bc-muted);
  transition: color 180ms ease, transform var(--motion-quick) var(--motion-ease);
}
.bottom-nav-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-lt));
  opacity: 0; transform: scale(.88);
  transition: opacity 180ms ease, transform 240ms var(--motion-ease);
}
.bottom-nav .bottom-nav-item.is-active { color: var(--bc-on-accent); }
.bottom-nav-item.is-active::before { opacity: 1; transform: none; }
.bottom-nav-icon { display: inline-flex; }
.bottom-nav-item.is-active .bottom-nav-icon { animation: jogano-icon-in 280ms var(--motion-ease); }

/* Mouse recebe elevação; toque recebe pressão. Evita hover que fica preso no Android. */
@media (hover: hover) and (pointer: fine) {
  .lp-feature-card:hover, .lp-pricing-card:hover {
    transform: translateY(-3px); border-color: var(--lp-accent);
    box-shadow: 0 12px 28px rgba(15, 27, 42, .09);
  }
  .lp-feature-card:hover .lp-feature-icon, .lp-step-item:hover .lp-step-icon {
    transform: translateY(-2px) rotate(-4deg);
  }
}
@media (hover: none) and (pointer: coarse) {
  .btn-primary, .btn-secondary,
  .lp-btn-lime, .lp-btn-ghost, .lp-btn-outline-light, .lp-btn-outline-dark { min-height: 44px; }
  .btn-primary:hover, .btn-secondary:hover, .game-card:hover,
  .app-content .game-card:hover, .lp-btn-lime:hover,
  .lp-btn-outline-light:hover, .lp-btn-outline-dark:hover { transform: none; }
  .game-card:hover { border-color: var(--bc-border-soft); box-shadow: none; }
}
:is(.btn-primary, .btn-secondary, .header-action, .tab-pill,
    .lp-btn-lime, .lp-btn-ghost, .lp-btn-outline-light, .lp-btn-outline-dark):not(:disabled):not([aria-disabled="true"]):active {
  transform: scale(.97);
}
.bottom-nav .bottom-nav-item:active { transform: scale(.95); }

/* Detalhe de marca aparece com o título e depois permanece parado. */
.lp-eyebrow::after {
  content: ''; display: block; width: 28px; height: 3px; margin-top: 8px;
  border-radius: 3px; background: currentColor; transform-origin: left;
}
.lp-section-head .lp-eyebrow::after { margin-inline: auto; transform-origin: center; }
.jogano-reveal-enter .lp-eyebrow::after { animation: jogano-accent-in 420ms var(--motion-ease); }

/* Respeita a preferência inclusive quando ela muda durante a visita. */
@media (prefers-reduced-motion: reduce) {
  .page-animate, .page-header, .page-header-icon, .section-card, .empty-state, .stat-grid > .stat-tile,
  .lp-hero-content > :is(.lp-hero-eyebrow, .lp-hero-title, .lp-hero-sub, .lp-hero-ctas, .lp-hero-perks),
  .lp-mobile-menu, .jogano-reveal-enter, .jogano-reveal-enter .lp-eyebrow::after,
  .bottom-nav-item.is-active .bottom-nav-icon { animation: none !important; }
  .jogano-reveal-pending { opacity: 1; transform: none; }
  .btn-primary, .btn-secondary, .header-action, .tab-pill, .sidebar-link, .custom-input,
  .lp-btn-lime, .lp-btn-ghost, .lp-btn-outline-light, .lp-btn-outline-dark,
  .lp-feature-card, .lp-pricing-card, .lp-feature-icon, .lp-step-icon, .game-card,
  .bottom-nav .bottom-nav-item, .bottom-nav-item::before { transition: none; }
  .lp-feature-card:hover, .lp-pricing-card:hover, .lp-feature-card:hover .lp-feature-icon,
  .lp-step-item:hover .lp-step-icon,
  :is(.btn-primary, .btn-secondary, .header-action, .tab-pill,
      .lp-btn-lime, .lp-btn-ghost, .lp-btn-outline-light, .lp-btn-outline-dark):not(:disabled):not([aria-disabled="true"]):active,
  .bottom-nav .bottom-nav-item:active { transform: none; }
}

@media print {
  .jogano-reveal-pending { opacity: 1; transform: none; }
  .jogano-reveal-enter { animation: none; }
}