/* ============================================================
   MOBAPE · Animações
   1) As 6 animações oficiais da marca (build, pulse, spin, orbit,
      draw, split) — copiadas do handoff (animations.css).
      Manipulam apenas .tri-filled e .tri-stroke no símbolo.
   2) Sistema de reveal ao scroll (fade-in / slide-up) via
      atributo data-reveal (ativado por reveal.js).
   ============================================================ */

/* ============================================================
   1 · ANIMAÇÕES DA MARCA
   ============================================================ */

/* — BUILD — peças montam-se (splash / intro) */
@keyframes build-tri {
  0%   { transform: translate(-40px, -30px) scale(0.7); opacity: 0; }
  60%  { transform: translate(4px, 3px) scale(1.03); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes build-stroke {
  0%   { stroke-dashoffset: 720; opacity: 0; }
  30%  { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.anim-build .tri-filled { transform-origin: 100px 90px; animation: build-tri 700ms cubic-bezier(0.34,1.32,0.64,1) both; }
.anim-build .tri-stroke { stroke-dasharray: 720; animation: build-stroke 900ms ease-out 300ms both; }

/* — PULSE — triângulo vazado respira (loop) */
@keyframes pulse-out {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}
.anim-pulse .tri-stroke { transform-origin: 150px 150px; animation: pulse-out 2400ms ease-in-out infinite; }

/* — SPIN — no hover, o triângulo vazado dá 360° (nav / CTA) */
.anim-spin .tri-stroke { transform-origin: 150px 150px; transition: transform 700ms cubic-bezier(0.65,0,0.35,1); }
.anim-spin:hover .tri-stroke { transform: rotate(360deg); }

/* — ORBIT — loading spinner (loop) */
@keyframes orbit-around {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}
.anim-orbit .tri-stroke { transform-origin: 100px 90px; animation: orbit-around 1800ms linear infinite; }

/* — DRAW — o contorno desenha-se; o cheio aparece depois */
@keyframes draw-stroke { 0% { stroke-dashoffset: 720; } 100% { stroke-dashoffset: 0; } }
@keyframes fade-in-mark { 0%,60% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }
.anim-draw .tri-stroke { stroke-dasharray: 720; animation: draw-stroke 1100ms cubic-bezier(0.65,0,0.35,1) both; }
.anim-draw .tri-filled { transform-origin: 100px 90px; animation: fade-in-mark 1100ms ease-out 800ms both; }

/* — SPLIT — triângulos afastam-se e recombinam (easter egg / 404) */
@keyframes split-left {
  0% { transform: translate(0,0) rotate(0); } 30% { transform: translate(-30px,-10px) rotate(-8deg); }
  70% { transform: translate(4px,1px) rotate(2deg); } 100% { transform: translate(0,0) rotate(0); }
}
@keyframes split-right {
  0% { transform: translate(0,0) rotate(0); } 30% { transform: translate(30px,10px) rotate(8deg); }
  70% { transform: translate(-4px,-1px) rotate(-2deg); } 100% { transform: translate(0,0) rotate(0); }
}
.anim-split .tri-filled { transform-origin: 100px 90px; animation: split-left 1000ms cubic-bezier(0.4,0,0.2,1) both; }
.anim-split .tri-stroke { transform-origin: 150px 150px; animation: split-right 1000ms cubic-bezier(0.4,0,0.2,1) both; }

/* ============================================================
   2 · REVEAL AO SCROLL
   Estado inicial: invisível e ligeiramente em baixo.
   reveal.js adiciona .is-revealed quando o elemento entra no ecrã.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* Elementos marcados como "instant" não animam (ex.: navbar) */
[data-reveal="instant"] { opacity: 1; transform: none; transition: none; }

/* Se o utilizador prefere menos movimento, mostra tudo já */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .anim-pulse .tri-stroke,
  .hero-dot,
  .hero-scroll-line { animation: none !important; }
}