/* ================================================
   I HATE MEDIA* — BRUTAL & BOLD
   Animations
   ================================================ */

/* --- FADE IN (Scroll-triggered) --- */
.fade-in {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

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

.fade-delay-1 { transition-delay: 0.15s; }
.fade-delay-2 { transition-delay: 0.3s; }
.fade-delay-3 { transition-delay: 0.45s; }

/* --- MARQUEE --- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* --- ROTATE SLOW --- */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate-slow {
  animation: rotateSlow 12s linear infinite;
}

/* --- SCROLL LINE PULSE --- */
@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.8;
    transform: scaleY(1.3);
  }
}

/* --- FLOAT --- */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(3deg); }
  66% { transform: translateY(8px) rotate(-2deg); }
}

/* --- STAGGER CHILDREN (for grids) --- */
.services-grid .service-card:nth-child(1) .fade-in,
.services-grid .fade-in:nth-child(1) { transition-delay: 0s; }
.services-grid .service-card:nth-child(2) .fade-in,
.services-grid .fade-in:nth-child(2) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(3) .fade-in,
.services-grid .fade-in:nth-child(3) { transition-delay: 0.2s; }
.services-grid .service-card:nth-child(4) .fade-in,
.services-grid .fade-in:nth-child(4) { transition-delay: 0.3s; }

.cases-grid .fade-in:nth-child(1) { transition-delay: 0s; }
.cases-grid .fade-in:nth-child(2) { transition-delay: 0.15s; }
.cases-grid .fade-in:nth-child(3) { transition-delay: 0.3s; }

/* --- GRAPH BAR GROW --- */
.case-card.visible .graph-bar {
  animation: growBar 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes growBar {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

/* --- GLITCH TEXT (subtle, on hover) --- */
@keyframes glitchShift {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 2px); }
}

.hero-headline:hover {
  animation: glitchShift 0.3s ease forwards;
}

/* --- RED FLASH on hero text --- */
.hero-headline .text-red {
  position: relative;
}

.hero-headline .text-red::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--red);
  opacity: 0.3;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-headline.visible .text-red::after {
  transform: scaleX(1);
}

/* --- NOISE FLICKER --- */
@keyframes noiseFlicker {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.06; }
}

.hero-noise {
  animation: noiseFlicker 0.5s steps(2) infinite;
}

/* --- SERVICE CARD BORDER GLOW --- */
.service-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  transition: border-color 0.4s ease;
  pointer-events: none;
}

.service-card:hover::after {
  border-color: rgba(251, 13, 27, 0.15);
}

/* --- CONTACT SECTION PULSE --- */
@keyframes contactPulse {
  0%, 100% { box-shadow: inset 0 0 80px rgba(0, 0, 0, 0); }
  50% { box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.1); }
}

.contact {
  animation: contactPulse 4s ease-in-out infinite;
}

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

  .fade-in {
    opacity: 1;
    transform: none;
  }

  .marquee-content {
    animation: none;
  }
}