@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes softPulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(255, 77, 77, 0.25);
  }
  50% {
    box-shadow: 0 8px 32px rgba(255, 77, 77, 0.55);
  }
}

/* Entrance. fill-mode is "backwards" (not "both"): it should only hold
   the pre-start "from" state during the delay, not keep overriding
   opacity forever after — a lingering animation-held value beats even
   .fading's higher-specificity opacity rule, which broke the reveal. */
.intro-card {
  animation: fadeSlideLeft 0.7s 0.1s var(--ease-smooth) backwards;
}

.videos-grid[data-direction="initial"] .project {
  animation: fadeSlideUp 0.6s var(--ease-smooth) both;
}

.videos-grid[data-direction="next"] .project {
  animation: slideInFromRight 0.5s var(--ease-smooth) both;
}

.videos-grid[data-direction="prev"] .project {
  animation: slideInFromLeft 0.5s var(--ease-smooth) both;
}

.videos-grid .project:nth-child(1) { animation-delay: 0.05s; }
.videos-grid .project:nth-child(2) { animation-delay: 0.1s; }
.videos-grid .project:nth-child(3) { animation-delay: 0.15s; }
.videos-grid .project:nth-child(4) { animation-delay: 0.2s; }

.channel-videos-grid .project {
  animation: fadeSlideUp 0.6s var(--ease-smooth) both;
}

.channel-videos-grid .project:nth-child(1) { animation-delay: 0.05s; }
.channel-videos-grid .project:nth-child(2) { animation-delay: 0.1s; }
.channel-videos-grid .project:nth-child(3) { animation-delay: 0.15s; }
.channel-videos-grid .project:nth-child(4) { animation-delay: 0.2s; }
.channel-videos-grid .project:nth-child(5) { animation-delay: 0.25s; }
.channel-videos-grid .project:nth-child(6) { animation-delay: 0.3s; }

/* Panel / tab switches */
.category-content.active,
.stats-panel.active {
  animation: panelFadeIn 0.5s var(--ease-smooth) both;
}

/* Extra interaction */
.video-container .play-button {
  animation: softPulse 2.4s ease-in-out infinite;
}

.video-container:hover .play-button {
  animation: none;
}

.intro-card {
  position: relative;
  transition: opacity 0.4s ease, transform 0.5s var(--ease-smooth), box-shadow 0.5s var(--ease-smooth);
}

.intro-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255, 122, 122, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-smooth);
  pointer-events: none;
}

.intro-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(255, 77, 77, 0.3);
}

.intro-card:hover::before {
  opacity: 1;
}

.category-btn i,
.stats-tab i {
  transition: transform 0.4s var(--ease-smooth);
}

.category-btn:hover i,
.stats-tab:hover i {
  transform: scale(1.15);
}

.channel-avatar {
  animation: panelFadeIn 0.5s var(--ease-smooth) both;
}