/**
 * @file motion.css
 * @description Sistema de motion: keyframes, classes utilitárias para
 * reveals editoriais, mask-clip, parallax CSS-only e marquee.
 *
 * Responsabilidade: padronizar transições e entradas para todo o site
 * em chave editorial (sem bounce, sem playful).
 * Camada: web
 */

/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes maskRevealUp {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 30%, 0);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes maskRevealRight {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes lineGrow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes drawStroke {
  from {
    stroke-dashoffset: var(--dash, 1000);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

/* ============================================
   CLASSES UTILITÁRIAS DE REVEAL
   ============================================ */

/* Mask reveal vertical — palavras emergem do chão */
.reveal-mask {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 30%, 0);
  transition:
    clip-path var(--dur-epic) var(--ease-mask),
    transform var(--dur-epic) var(--ease-mask);
  will-change: clip-path, transform;
}

.reveal-mask.is-revealed {
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
}

/* Stagger entre filhos do reveal-mask */
.reveal-mask--stagger > * {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 100%, 0);
  transition:
    clip-path var(--dur-slow) var(--ease-mask),
    transform var(--dur-slow) var(--ease-mask);
}

.reveal-mask--stagger.is-revealed > * {
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
}

.reveal-mask--stagger.is-revealed > *:nth-child(1) {
  transition-delay: 80ms;
}

.reveal-mask--stagger.is-revealed > *:nth-child(2) {
  transition-delay: 200ms;
}

.reveal-mask--stagger.is-revealed > *:nth-child(3) {
  transition-delay: 320ms;
}

.reveal-mask--stagger.is-revealed > *:nth-child(4) {
  transition-delay: 440ms;
}

/* Fade-up clássico */
.reveal-up {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

.reveal-up.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Fade simples */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--dur-epic) var(--ease-out);
}

.reveal-fade.is-revealed {
  opacity: 1;
}

/* Scale-in, frutos do símbolo */
.reveal-scale {
  transform: scale(0);
  opacity: 0;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.reveal-scale.is-revealed {
  transform: scale(1);
  opacity: 1;
}

/* Linha vertical crescendo (referência ao tronco) */
.reveal-line-y {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform var(--dur-epic) var(--ease-out);
}

.reveal-line-y.is-revealed {
  transform: scaleY(1);
}

/* Stagger por delay programático via CSS variable */
[data-stagger] {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ============================================
   MARQUEE / TICKER
   ============================================ */

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--s-7);
  white-space: nowrap;
}

.marquee__track {
  display: flex;
  gap: var(--s-7);
  flex-shrink: 0;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ============================================
   GRAIN / TEXTURA
   ============================================ */

.has-grain {
  position: relative;
  isolation: isolate;
}

.has-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 220px;
  mix-blend-mode: multiply;
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 2;
}

.has-grain--light::after {
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* ============================================
   PARALLAX CSS-ONLY (controlado por JS via CSS var)
   ============================================ */

.parallax {
  --p: 0;
  transform: translate3d(0, calc(var(--p) * 1px), 0);
  will-change: transform;
}

/* ============================================
   CURSOR LIGHT / SPOTLIGHT (segue mouse)
   ============================================ */

.spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--creme);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.4s var(--ease-elegant), height 0.4s var(--ease-elegant);
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .spotlight {
    display: block;
  }
}

.spotlight.is-hover {
  width: 80px;
  height: 80px;
}

/* ============================================
   ANIMAÇÕES DECORATIVAS
   ============================================ */

.float {
  animation: float 6s ease-in-out infinite;
}

.blink-cursor::after {
  content: '_';
  animation: blink 1s step-end infinite;
  margin-left: 0.1em;
  font-weight: 300;
}

/* ============================================
   PROGRESS BAR DE LEITURA (topo)
   ============================================ */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--terracota);
  width: var(--p, 0%);
  z-index: 100;
  transition: width 0.05s linear;
}