/* ============================================================
   CYPHER INTELLIGENCE — ANIMATIONS
   keyframes · scroll-reveal · transitions · micro-interactions
   ============================================================ */

/* — Scroll-reveal base ————————————————————————— */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.reveal--up { transform: translateY(40px); }
.reveal--down { transform: translateY(-24px); }
.reveal--left { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.96); }
.reveal--blur { filter: blur(8px); }

.reveal--up.is-visible,
.reveal--down.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible {
  transform: translate(0, 0);
}
.reveal--scale.is-visible { transform: scale(1); }
.reveal--blur.is-visible { filter: blur(0); }

/* Staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* — Word reveal (split text) ———————————————— */
.word-reveal { display: inline-block; overflow: hidden; vertical-align: top; }
.word-reveal .w {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 700ms var(--ease-out);
}
.word-reveal.is-visible .w { transform: translateY(0); }
.word-reveal .w:nth-child(1) { transition-delay: 0ms; }
.word-reveal .w:nth-child(2) { transition-delay: 60ms; }
.word-reveal .w:nth-child(3) { transition-delay: 120ms; }
.word-reveal .w:nth-child(4) { transition-delay: 180ms; }
.word-reveal .w:nth-child(5) { transition-delay: 240ms; }
.word-reveal .w:nth-child(6) { transition-delay: 300ms; }
.word-reveal .w:nth-child(7) { transition-delay: 360ms; }
.word-reveal .w:nth-child(8) { transition-delay: 420ms; }
.word-reveal .w:nth-child(9) { transition-delay: 480ms; }
.word-reveal .w:nth-child(10) { transition-delay: 540ms; }

/* — Decrypt / scramble effect ——————————————— */
.decrypt {
  font-family: var(--font-mono);
}
.decrypt.is-decrypting { color: var(--accent-bright); }

/* — Number counter ——————————————————————————— */
.count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* — Magnetic ————————————————————————————————— */
.magnetic {
  display: inline-flex;
  will-change: transform;
  transition: transform 280ms var(--ease-out);
}

/* — Keyframes ——————————————————————————————— */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

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

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; box-shadow: 0 0 12px rgba(63, 184, 255, 0.28); }
}

@keyframes scrollDown {
  0% { top: -100%; }
  100% { top: 200%; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.5; }
  94% { opacity: 1; }
  96% { opacity: 0.8; }
  97% { opacity: 1; }
}

@keyframes scanline {
  0%   { top: -2px;  opacity: 0; }
  6%   { opacity: 0.55; }
  94%  { opacity: 0.55; }
  100% { top: 100%;  opacity: 0; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* — Scanline overlay — runs through every full-width section.
   Width: 100% of the section, NOT the viewport. Each section gets a
   different delay so they never feel synced. — */
.hero,
.section,
.narsil,
.contact {
  position: relative;
  overflow: hidden;
}

.hero::after,
.section::after,
.narsil::after,
.contact::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(63, 184, 255, 0.45),
    transparent
  );
  pointer-events: none;
  z-index: 6;
  animation: scanline 9s linear infinite;
  will-change: top, opacity;
}

/* Stagger the start so adjacent sections don't fire together. */
.hero::after            { animation-duration: 8s;  animation-delay: 0s; }
.manifesto::after       { animation-delay: -1.4s; }
.eco::after             { animation-delay: -3.1s; }
.caps::after            { animation-delay: -5.6s; animation-duration: 11s; }
.narsil::after          { animation-delay: -2.2s; animation-duration: 10s; }
.team::after            { animation-delay: -4.7s; }
.diff::after            { animation-delay: -6.3s; animation-duration: 11s; }
.contact::after         { animation-delay: -7.1s; }

/* — Boot/loading state for hero canvas — */
.hero__canvas.is-loading {
  opacity: 0;
}
.hero__canvas.is-ready {
  animation: fadeIn 1.2s var(--ease-out) both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* — Link underline animation ————————————————— */
.link-anim {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
.link-anim::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 360ms var(--ease-out);
}
.link-anim:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* — Border draw on hover ——————————————————— */
.border-draw {
  position: relative;
}
.border-draw::before,
.border-draw::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 480ms var(--ease-out);
}
.border-draw::before {
  top: 0; left: 0;
  width: 100%; height: 1px;
  transform: scaleX(0);
  transform-origin: left;
}
.border-draw::after {
  bottom: 0; right: 0;
  width: 100%; height: 1px;
  transform: scaleX(0);
  transform-origin: right;
}
.border-draw:hover::before { transform: scaleX(1); }
.border-draw:hover::after { transform: scaleX(1); }

/* — Loading shimmer ————————————————————————— */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--ink-bg-2) 0%,
    var(--ink-panel) 50%,
    var(--ink-bg-2) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}

/* — Disable animations for reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .word-reveal .w {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  /* Equipo: tira de película detenida con movimiento reducido */
  .film__track {
    animation: none !important;
  }
  .hero::after,
  .section::after,
  .narsil::after,
  .contact::after,
  .narsil__seal img,
  .narsil__seal::after,
  .narsil__seal .ring--1,
  .narsil__seal .ring--2,
  .narsil__seal .ring--3,
  .hero__visual-fallback img,
  .narsil__seal::before {
    animation: none !important;
  }
}