/* ==========================================================================
   ATHENE3D · ANIMAÇÕES (animations.css)
   --------------------------------------------------------------------------
   Regras de ouro usadas aqui:
     1. Animar apenas transform/translate/scale/rotate e opacity (e, em
        poucos casos, clip-path). Essas propriedades não recalculam o
        layout, por isso ficam fluidas até em celulares simples.
     2. Elementos só ficam escondidos (opacity: 0) quando o HTML tem a
        classe .js. Se o JavaScript falhar, tudo aparece normalmente.
     3. Quem prefere menos movimento (configuração do sistema) recebe a
        página sem animações (seção 07 deste arquivo).

   Animações que dependem de JavaScript (vaso guiado pela rolagem, linha de
   produção, inclinação 3D, botões magnéticos, letras decodificando)
   ficam no main.js; aqui estão só os estilos que elas acionam.

   Sumário:
     01. Keyframes (movimentos reutilizáveis)
     02. Hero e detalhes (o fatiador é desenhado pelo main.js)
     03. Letreiro, cubo, WhatsApp e outros
     04. Entrada ao rolar a página (data-reveal)
     05. Sequência de abertura (data-intro)
     06. Títulos "impressos" camada por camada (data-split) e assinatura
     07. Movimento reduzido (acessibilidade)
   ========================================================================== */

/* ==========================================
   01. KEYFRAMES
   Cada @keyframes descreve um movimento que
   pode ser aplicado com a propriedade animation.
========================================== */

/* LED piscando (impressora "ligada") */
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

/* Segmento que desce pela linha do "Role para conhecer" */
@keyframes scroll-cue {
  0% {
    translate: 0 -100%;
  }
  100% {
    translate: 0 260%;
  }
}

/* Letreiro: anda metade da trilha (= uma cópia do conteúdo) e recomeça */
@keyframes ticker {
  to {
    translate: -50% 0;
  }
}

/* Cubo girando em torno do eixo vertical */
@keyframes cube-spin {
  from {
    transform: rotateX(-24deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-24deg) rotateY(360deg);
  }
}

/* Anel do WhatsApp: cresce e desaparece */
@keyframes ring {
  0% {
    opacity: 0.7;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.55;
  }
}

/* Barra de progresso de leitura do header (ligada à rolagem) */
@keyframes header-progress {
  to {
    transform: scaleX(1);
  }
}

/* Palavra recém-"impressa": começa quente (laranja, brilhando) e esfria
   até a cor normal. Só existe o quadro "from": o navegador anima dele
   até o estilo normal do elemento. */
@keyframes cool-down {
  from {
    color: #ffb48d;
    text-shadow: 0 0 18px rgba(242, 100, 34, 0.85);
  }
}

/* Ícone da etapa "pula" quando o bico chega nela */
@keyframes icon-pop {
  0% {
    scale: 0.6;
  }
  60% {
    scale: 1.18;
  }
  100% {
    scale: 1;
  }
}

/* Brilho do bico enquanto deposita material */
@keyframes extrude {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}

/* ==========================================
   02. HERO E DETALHES
   (a cena do fatiador é animada pelo main.js, num <canvas>)
========================================== */
.slicer[data-fase="imprimindo"] .slicer__led,
.slicer[data-fase="aquecendo"] .slicer__led,
.print-art.is-running .print-art__led {
  animation: blink 1.1s steps(2, jump-none) infinite;
}

.hero__scroll-line::after {
  animation: scroll-cue 2.2s var(--ease-in-out) infinite;
}

/* ==========================================
   03. LETREIRO, CUBO, WHATSAPP E OUTROS
========================================== */
.ticker__track {
  animation: ticker 42s linear infinite;
}

/* A faixa laranja anda no sentido contrário e um pouco mais rápido */
.ticker__row--alt .ticker__track {
  animation-duration: 34s;
  animation-direction: reverse;
}

/* Passar o mouse pausa o letreiro (facilita a leitura) */
.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.cube__body {
  animation: cube-spin 10s linear infinite;
}

.wa-float__ring {
  animation: ring 2.4s var(--ease-out) infinite;
}

/* Brilho na ponta do bico da impressora enquanto ela trabalha */
.print-art.is-running .print-art__glow {
  animation: extrude 0.5s var(--ease-in-out) infinite;
}

/* Ícone da etapa ativa "pula" uma vez */
.step.is-active .step__hex .icon {
  animation: icon-pop 0.6s var(--ease-out);
}

/* ==========================================
   04. ENTRADA AO ROLAR (data-reveal)
   Como funciona:
     - O elemento começa transparente e 28 px abaixo;
     - O main.js observa a rolagem com IntersectionObserver e, quando o
       elemento aparece na tela, adiciona a classe .is-visible;
     - A transição leva o elemento ao estado normal.
   Variações: data-reveal="fade" (só opacidade) e "scale" (cresce).
   --reveal-delay é definido pelo main.js em grupos com data-stagger.
========================================== */
.js [data-reveal] {
  transition: opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    translate 0.9s var(--ease-out) var(--reveal-delay, 0ms),
    scale 0.9s var(--ease-out) var(--reveal-delay, 0ms);
}

.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  translate: 0 28px;
}

.js [data-reveal="fade"]:not(.is-visible) {
  translate: none;
}

.js [data-reveal="scale"]:not(.is-visible) {
  translate: none;
  scale: 0.95;
}

/* ==========================================
   05. SEQUÊNCIA DE ABERTURA (data-intro)
   Elementos do hero entram em ordem quando a página carrega.
   --d (definido no HTML) é a posição na fila: cada passo soma 90 ms.
   O main.js adiciona .is-ready no <html> para disparar tudo.
========================================== */
.js [data-intro] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 1s var(--ease-out), translate 1.1s var(--ease-out), scale 1.4s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms + 120ms);
}

.js [data-intro="scale"] {
  translate: none;
  scale: 0.92;
}

.is-ready [data-intro] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* ==========================================
   06. TÍTULOS "IMPRESSOS" (data-split) E ASSINATURA
   O main.js envolve cada palavra em duas camadas:
     .split-word        -> caixa da palavra;
     .split-word__inner -> a palavra em si.
   A palavra começa totalmente recortada por baixo, com
   clip-path: inset(100% 0 0 0), e é revelada de baixo para cima em
   degraus (steps), como camadas sendo depositadas. Ao terminar, ela
   "esfria" do laranja para a cor normal (keyframes cool-down).
   --w é o número da palavra, usado para escalonar o atraso.
   O título recebe .is-visible quando entra na tela.
========================================== */
.split-word {
  display: inline-block;
  vertical-align: top;
}

.split-word__inner {
  display: inline-block;
  /* espaço extra para acentos e descendentes não serem cortados */
  padding: 0.08em 0.04em 0.14em;
  margin: -0.08em -0.04em -0.14em;
}

.js [data-split] .split-word__inner {
  clip-path: inset(100% 0 0 0);
}

.js [data-split].is-visible .split-word__inner {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s steps(7, end);
  transition-delay: calc(var(--w, 0) * 70ms + 150ms);
  animation: cool-down 1.4s var(--ease-out) both;
  animation-delay: calc(var(--w, 0) * 70ms + 550ms);
}

/* Assinatura do rodapé: as "camadas" sobem em 26 degraus */
.js .footer__mega:not(.is-visible) {
  background-size: 100% 0%;
}

.js .footer__mega.is-visible {
  transition: background-size 2.6s steps(26, end) 0.2s;
}

/* ==========================================
   07. MOVIMENTO REDUZIDO
   Respeita a opção "Reduzir movimento" do sistema operacional
   (iOS, Android, macOS, Windows). Animações viram instantâneas e todo o
   conteúdo aparece já no estado final.
========================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal]:not(.is-visible),
  .js [data-intro] {
    opacity: 1;
    translate: none;
    scale: none;
  }

  .js [data-split] .split-word__inner {
    clip-path: none;
  }

  /* Elementos sem estado final útil ficam escondidos */
  .wa-float__ring,
  .hero__scroll-line::after {
    display: none;
  }

  .ticker__track,
  .cube__body {
    animation: none;
  }
}