/* ============================================
   PIXOSWIFTRC INVESTIGATIONS — ANIMATIONS.CSS
   Noir Motion System
   joycornerpilot.guru
   ============================================ */

/* ============================================
   CORE ANIMATION KEYFRAMES
   ============================================ */

/* Rain */
@keyframes rainFall {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}

/* Fog drift */
@keyframes fogDrift {
  0% {
    transform: translateX(-20%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Pulse dot */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

/* Window flicker */
@keyframes windowFlicker {
  0%, 100% {
    opacity: 0.15;
    background: rgba(79, 163, 255, 0.03);
  }
  15% {
    opacity: 0.4;
    background: rgba(79, 163, 255, 0.07);
  }
  30% {
    opacity: 0.1;
    background: rgba(79, 163, 255, 0.02);
  }
  45% {
    opacity: 0.35;
    background: rgba(79, 163, 255, 0.06);
  }
  60% {
    opacity: 0.2;
    background: rgba(79, 163, 255, 0.04);
  }
  75% {
    opacity: 0.45;
    background: rgba(79, 163, 255, 0.08);
  }
}

/* Scanner line */
@keyframes scanLine {
  0% {
    top: 0;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Pulse dot animation */
@keyframes pulseDot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 163, 255, 0.4);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(79, 163, 255, 0);
    opacity: 0.7;
  }
}

/* Fade in up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade in right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Reel spin */
@keyframes reelSpin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-200%); }
}

/* Glow pulse on game frame */
@keyframes framePulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(79, 163, 255, 0.15), 0 16px 64px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 36px rgba(79, 163, 255, 0.25), 0 16px 64px rgba(0, 0, 0, 0.6);
  }
}

/* Sticky note sway */
@keyframes noteSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-1deg); }
}

/* Scan line pulse */
@keyframes scanPulse {
  0% { opacity: 0.3; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0.3; transform: scaleX(0.8); }
}

/* ============================================
   SCROLL-TRIGGERED ANIMATION CLASSES
   ============================================ */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.7s ease forwards;
  animation-delay: var(--delay, 0.1s);
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: var(--delay, 0.1s);
}

.fade-in-right {
  opacity: 0;
  animation: fadeInRight 0.8s ease forwards;
  animation-delay: var(--delay, 0.15s);
}

/* When JavaScript handles intersection, these reset */
.js-fade-pending {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-fade-pending.js-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-fade-pending-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-fade-pending-right.js-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================
   ELEMENT-SPECIFIC ANIMATIONS
   ============================================ */

/* Pulse dot */
.pulse-dot {
  animation: pulseDot 2s ease infinite;
}

/* Game frame ambient pulse */
.game-evidence-board {
  animation: framePulse 6s ease-in-out infinite;
}

/* Sticky notes sway */
.sticky-note-1 {
  animation: noteSway 5s ease-in-out infinite;
}

.sticky-note-2 {
  animation: noteSway 7s ease-in-out infinite reverse;
}

/* Scanner line animation (defined above in keyframes) */
.game-scanner-line {
  animation: scanLine 4s ease-in-out infinite;
}

/* Header glow on scroll */
.site-header.scrolled {
  box-shadow: 0 2px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(79, 163, 255, 0.1);
}

/* ============================================
   HOVER INTERACTIONS
   ============================================ */

/* Feature cards */
.feature-card,
.value-card,
.team-card,
.responsible-card {
  transition:
    transform var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

/* Buttons ripple effect */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  border-radius: inherit;
}

.btn:active::after {
  opacity: 1;
}

/* Nav link underline */
.nav-link::after {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */
body {
  animation: fadeIn 0.5s ease;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rain-drop,
  .fog-layer,
  .window-flicker,
  .game-scanner-line,
  .pulse-dot,
  .sticky-note-1,
  .sticky-note-2 {
    display: none;
  }

  .game-evidence-board {
    animation: none;
  }

  .fade-in,
  .fade-in-up,
  .fade-in-right {
    opacity: 1;
    transform: none;
    animation: none;
  }
}