/* ===============================
   Base Animasi Reveal
================================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(5px);
  transition:
    opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ===============================
   Delay Stagger
================================= */
.delay-100 {
  transition-delay: 0.1s;
}
.delay-200 {
  transition-delay: 0.2s;
}
.delay-300 {
  transition-delay: 0.3s;
}
.delay-500 {
  transition-delay: 0.5s;
}

/* ===============================
   Base Styling
================================= */
body {
  font-family: var(--font-montserrat);
  background-color: var(--color-brand-bg);
}

/* ===============================
   Masonry Video Hover
================================= */
.video-container:hover .play-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* ===============================
   FIX MOBILE TAP
================================= */
@media (hover: none) {
  .group:active .group-hover\:grayscale-0 {
    filter: grayscale(0) !important;
  }

  .group:active .group-hover\:scale-105 {
    transform: scale(1.05) !important;
  }

  .group:active .group-hover\:opacity-100 {
    opacity: 1 !important;
  }

  .hover\:shadow-none:active {
    box-shadow: none !important;
    transform: translate(2px, 2px) !important;
  }
}