/* ============================================================
   TALMIDIM · APRESENTAÇÃO — Biblioteca de animações reaproveitadas
   das Logos Talmidim/animations/html/* + extras para slides.
   ============================================================ */

/* ============= 01 DRAW + FILL (Tav) ============= */
@keyframes drawTav {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
@keyframes fillFadeIn {
  0%, 50% { opacity: 0; }
  100% { opacity: 1; }
}

.is-active .anim-draw .tav-stroke {
  stroke: var(--white);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: drawTav 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
.is-active .anim-draw .tav-fill {
  opacity: 0;
  animation: fillFadeIn 1.6s ease-out 1.6s forwards;
}

/* ============= 02 PORTAL PULSE ============= */
@keyframes breatheTav {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes ringEmit {
  0%   { transform: scale(0.7); opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}
.anim-breathe { animation: breatheTav 3.6s ease-in-out infinite; }
.anim-ring-emit {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--orange-500);
  pointer-events: none;
}
.is-active .anim-ring-emit { animation: ringEmit 3.4s ease-out infinite; }
.is-active .anim-ring-emit.r2 { animation-delay: 1.1s; }
.is-active .anim-ring-emit.r3 { animation-delay: 2.2s; }

/* ============= 03 GLOW PULSE ============= */
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(249,115,22,0.4)); }
  50%      { filter: drop-shadow(0 0 32px rgba(249,115,22,1)) drop-shadow(0 0 64px rgba(249,115,22,0.5)); }
}
.is-active .anim-glow { animation: glowPulse 2.8s ease-in-out infinite; }

/* ============= 04 VERSE CASCADE (palavra a palavra) ============= */
@keyframes wordRise {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.anim-cascade > * {
  display: inline-block;
  opacity: 0;
}
.is-active .anim-cascade > * {
  animation: wordRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.is-active .anim-cascade > *:nth-child(1)  { animation-delay: 0.30s; }
.is-active .anim-cascade > *:nth-child(2)  { animation-delay: 0.45s; }
.is-active .anim-cascade > *:nth-child(3)  { animation-delay: 0.60s; }
.is-active .anim-cascade > *:nth-child(4)  { animation-delay: 0.75s; }
.is-active .anim-cascade > *:nth-child(5)  { animation-delay: 0.90s; }
.is-active .anim-cascade > *:nth-child(6)  { animation-delay: 1.05s; }
.is-active .anim-cascade > *:nth-child(7)  { animation-delay: 1.20s; }
.is-active .anim-cascade > *:nth-child(8)  { animation-delay: 1.35s; }
.is-active .anim-cascade > *:nth-child(9)  { animation-delay: 1.50s; }
.is-active .anim-cascade > *:nth-child(10) { animation-delay: 1.65s; }
.is-active .anim-cascade > *:nth-child(11) { animation-delay: 1.80s; }
.is-active .anim-cascade > *:nth-child(12) { animation-delay: 1.95s; }
.is-active .anim-cascade > *:nth-child(13) { animation-delay: 2.10s; }
.is-active .anim-cascade > *:nth-child(14) { animation-delay: 2.25s; }
.is-active .anim-cascade > *:nth-child(15) { animation-delay: 2.40s; }
.is-active .anim-cascade > *:nth-child(16) { animation-delay: 2.55s; }
.is-active .anim-cascade > *:nth-child(17) { animation-delay: 2.70s; }
.is-active .anim-cascade > *:nth-child(18) { animation-delay: 2.85s; }
.is-active .anim-cascade > *:nth-child(19) { animation-delay: 3.00s; }
.is-active .anim-cascade > *:nth-child(20) { animation-delay: 3.15s; }

/* ============= 05 STAGGER (filhos diretos) ============= */
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-stagger > * { opacity: 0; }
.is-active .anim-stagger > * { animation: staggerIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.is-active .anim-stagger > *:nth-child(1)  { animation-delay: 0.25s; }
.is-active .anim-stagger > *:nth-child(2)  { animation-delay: 0.40s; }
.is-active .anim-stagger > *:nth-child(3)  { animation-delay: 0.55s; }
.is-active .anim-stagger > *:nth-child(4)  { animation-delay: 0.70s; }
.is-active .anim-stagger > *:nth-child(5)  { animation-delay: 0.85s; }
.is-active .anim-stagger > *:nth-child(6)  { animation-delay: 1.00s; }
.is-active .anim-stagger > *:nth-child(7)  { animation-delay: 1.15s; }
.is-active .anim-stagger > *:nth-child(8)  { animation-delay: 1.30s; }
.is-active .anim-stagger > *:nth-child(9)  { animation-delay: 1.45s; }
.is-active .anim-stagger > *:nth-child(10) { animation-delay: 1.60s; }

/* ============= 06 STAR FIELD (pontos cintilantes) ============= */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
.starfield { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.starfield .star {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  animation: starTwinkle 3s ease-in-out infinite;
}

/* ============= 07 ORBIT (anel girante) ============= */
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbitReverse { to { transform: rotate(-360deg); } }
.anim-orbit         { animation: orbit 22s linear infinite; transform-origin: center; }
.anim-orbit-reverse { animation: orbitReverse 18s linear infinite; transform-origin: center; }
.anim-orbit-fast    { animation: orbit 9s linear infinite; transform-origin: center; }

/* ============= 08 MOSAIC REVEAL (para o reveal do nome) ============= */
@keyframes mosaicIn {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.anim-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 8px;
}
.anim-mosaic > div {
  border-radius: 12px;
  opacity: 0;
}
.is-active .anim-mosaic > div { animation: mosaicIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ============= 09 LINE DRAW HORIZONTAL ============= */
@keyframes lineDrawX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.anim-line-draw {
  transform-origin: left center;
  transform: scaleX(0);
}
.is-active .anim-line-draw { animation: lineDrawX 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards; }

/* ============= 10 SHIMMER (brilho deslizante) ============= */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.anim-shimmer {
  background: linear-gradient(
    90deg,
    var(--white) 0%,
    var(--orange-300) 25%,
    var(--white) 50%,
    var(--orange-300) 75%,
    var(--white) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* ============= 11 FLOAT (suspensão suave) ============= */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.anim-float { animation: float 4s ease-in-out infinite; }

/* ============= 12 BLACKOUT TEASER ============= */
@keyframes teaserPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.anim-teaser { animation: teaserPulse 2.4s ease-in-out infinite; }

/* ============= 13 TIMELINE DOT PULSE ============= */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6); }
  50%      { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
}
.anim-dot-pulse { animation: dotPulse 2.4s ease-out infinite; }

/* ============= 14 COUNT UP (S10 hora) ============= */
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 0 0 6px rgba(249,115,22,0.8), 0 0 18px rgba(249,115,22,0.6);
    opacity: 1;
  }
  20%, 24%, 55% { text-shadow: none; opacity: 0.85; }
}
.anim-flicker { animation: flicker 5s linear infinite 1s; }

/* ============= 15 GLYPH (suspense — antes do reveal) ============= */
@keyframes glyphDraw {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}
.anim-glyph .glyph-stroke {
  stroke: var(--orange-400);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.is-active .anim-glyph .glyph-stroke {
  animation: glyphDraw 3.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}