:root {
--shadow-yellow-35: color-mix(in srgb, var(--color-yellow-primary) 35%, transparent);
  --shadow-yellow-20: color-mix(in srgb, var(--color-yellow-primary) 20%, transparent);
}

@layer utilities {
  /* Keyframes */
  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(22px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fade-down {
    from {
      opacity: 0;
      transform: translateY(-22px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slide-right {
    from {
      opacity: 0;
      transform: translateX(-28px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slide-left {
    from {
      opacity: 0;
      transform: translateX(28px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes zoom-in {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes tilt-in {
    0% {
      opacity: 0;
      transform: perspective(800px) rotateX(-10deg) translateY(16px) scale(0.98);
    }
    100% {
      opacity: 1;
      transform: perspective(800px) rotateX(0) translateY(0) scale(1);
    }
  }
  @keyframes float-in {
    0% {
      opacity: 0;
      transform: translateY(18px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  /* Base state sebelum terlihat */
  .pre-animate {
    opacity: 0;
    will-change: transform, opacity;
    transform: translateY(16px);
  }

  /* Var animasi & delay (pakai CSS vars, isi via JS/data-attrs) */
  .animate-fade-up {
    animation: fade-up var(--dur, 0.7s) cubic-bezier(0.22, 0.61, 0.36, 1)
      var(--del, 0ms) both;
  }
  .animate-fade-down {
    animation: fade-down var(--dur, 0.7s) cubic-bezier(0.22, 0.61, 0.36, 1)
      var(--del, 0ms) both;
  }
  .animate-slide-right {
    animation: slide-right var(--dur, 0.7s) cubic-bezier(0.22, 0.61, 0.36, 1)
      var(--del, 0ms) both;
  }
  .animate-slide-left {
    animation: slide-left var(--dur, 0.7s) cubic-bezier(0.22, 0.61, 0.36, 1)
      var(--del, 0ms) both;
  }
  .animate-zoom-in {
    animation: zoom-in var(--dur, 0.65s) cubic-bezier(0.22, 0.61, 0.36, 1)
      var(--del, 0ms) both;
  }
  .animate-tilt-in {
    animation: tilt-in var(--dur, 0.75s) cubic-bezier(0.2, 0.7, 0.3, 1)
      var(--del, 0ms) both;
  }
  .animate-float-in {
    animation: float-in var(--dur, 0.8s) ease-out var(--del, 0ms) both;
  }

  /* Shimmer border (opsional, untuk CTA / tombol) */
  .shimmer {
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 40%,
      rgba(255, 255, 255, 0) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
.card-fx {
  background: #fff;
  border-radius: 12px;

  box-shadow: 0 8px 24px var(--shadow-yellow-20);
  transition: transform .25s ease, box-shadow .25s ease;
  transform: translateZ(0);
}


.card-fx:hover {
  box-shadow: 0 12px 28px var(--shadow-yellow-35);
  transform: scale(1.02);
}


@supports not (color: color-mix(in srgb, black, white)) {
  .card-fx {
    box-shadow: 0 8px 24px rgba(255, 195, 68, .20); /* ~20% */
  }
  .card-fx:hover {
    box-shadow: 0 12px 28px rgba(255, 195, 68, .35); /* ~35% */
  }
}