/* ============================================================
   ALPHA STORE — ANIMAÇÕES (estilo Apple)
   Scroll reveal, parallax leve, hover, brilho da marca.
   Usado junto com assets/js/anim.js (Intersection Observer).
   ============================================================ */

/* ------------------------------------------------------------
   1. SCROLL REVEAL
   Adicione data-reveal em qualquer elemento. O JS coloca a
   classe .is-visible quando ele entra na tela.
   Variantes: data-reveal="up" | "left" | "right" | "zoom" | "blur"
   Atraso: data-reveal-delay="150" (em milissegundos)
   ------------------------------------------------------------ */
/* ATENÇÃO — POR QUE USAMOS "animation" E NÃO "transition" AQUI:

   A primeira versão usava transition. Deu um bug feio no site publicado:
   todo elemento que recebia a classe .is-visible DEPOIS do carregamento
   (com atraso, ou criado por JavaScript, como os cartões de produto)
   ficava PRESO em opacidade 0 — ou seja, invisível. O produto existia no
   HTML, o preço estava certo, e o cliente não via nada.

   Com "animation ... forwards" isso não acontece: a animação sempre
   termina no estado final (visível), aconteça o que acontecer.
   NÃO troque de volta para transition. */

[data-reveal] {
  opacity: 0;
}
[data-reveal="up"], [data-reveal=""] , [data-reveal] { transform: translateY(34px); }
[data-reveal="left"]  { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="zoom"]  { transform: scale(.92); }
[data-reveal="blur"]  { transform: translateY(20px); filter: blur(10px); }

/* REGRA DE OURO: o estado VISÍVEL está escrito aqui, direto.
   A animação é só o "tempero" — ela anima a entrada, mas se por qualquer
   motivo não rodar (aba em segundo plano, celular fraco, navegador antigo),
   o elemento JÁ ESTÁ visível pela regra abaixo. Nunca dependa da animação
   para deixar algo visível. */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  animation: revelar .9s var(--ease);
}

@keyframes revelar {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
}

/* ------------------------------------------------------------
   2. STAGGER — filhos aparecem em cascata
   Coloque data-stagger no pai. O JS aplica o atraso em cada filho.
   ------------------------------------------------------------ */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
  animation: revelar .8s var(--ease);
}

/* ------------------------------------------------------------
   3. HERO — vídeo de fundo sem som + máscara escura
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* leve zoom lento e infinito: dá vida mesmo em vídeo parado */
  animation: heroZoom 24s ease-in-out infinite alternate;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(10,132,255,.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.75) 55%, var(--bg) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 60px 20px; max-width: 860px; }
.hero-content .display { margin-bottom: 18px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

/* Setinha "role para baixo" */
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2; color: var(--text-dim);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: .55; }
  50%      { transform: translate(-50%, 9px); opacity: 1; }
}

/* ------------------------------------------------------------
   4. PARALLAX LEVE
   data-parallax="0.25" → move 25% da velocidade do scroll.
   ------------------------------------------------------------ */
[data-parallax] { will-change: transform; transition: transform .1s linear; }

/* Imagem que "respira" no hover (usado na vitrine) */
.zoom-hover { overflow: hidden; border-radius: var(--radius); }
.zoom-hover img, .zoom-hover video {
  transition: transform 1s var(--ease);
}
.zoom-hover:hover img, .zoom-hover:hover video { transform: scale(1.07); }

/* Card que inclina de leve seguindo o mouse (JS opcional) */
.tilt { transition: transform .35s var(--ease); transform-style: preserve-3d; }

/* ------------------------------------------------------------
   5. BRILHO / GLOW da marca (igual ao neon da logo)
   ------------------------------------------------------------ */
.glow {
  position: relative;
}
.glow::after {
  content: "";
  position: absolute; inset: -30%;
  background: radial-gradient(circle at 50% 50%, var(--accent-glow) 0%, transparent 62%);
  filter: blur(38px);
  opacity: .5;
  z-index: -1;
  pointer-events: none;
  animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .62; transform: scale(1.06); }
}

/* Linha luminosa que corre (divisórias premium) */
.shine-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: shine 3.5s linear infinite;
}
@keyframes shine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ------------------------------------------------------------
   6. MICRO-INTERAÇÕES
   ------------------------------------------------------------ */
.lift { transition: transform var(--fast), box-shadow var(--fast); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.press:active { transform: scale(.97); }

/* Spinner de carregamento */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade-in de página */
.page-enter { animation: pageIn .55s var(--ease) both; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Toast entrando */
.toast { animation: toastIn .35s var(--ease) both; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   7. ACESSIBILIDADE — respeita quem desativou animações
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}