@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    background-color: #F5F2EB;
    font-family: 'Inter', sans-serif;
  }
  
  h1, h2, h3, h4, nav a {
    color: #1C355E;
  }
}

/* ==========================================================================
   Infinite Loop Marquee Custom CSS
   ========================================================================== */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Menggeser sejauh satu track penuh, lalu melompat ke 0 instan tanpa jeda visual */
    transform: translateX(calc(-100% - 1.5rem)); 
  }
}

.animate-marquee {
  /* Durasi perputaran lambat (35 detik). Sesuaikan jika ingin lebih lambat (40s+) atau cepat (25s) */
  animation: marquee 35s linear infinite; 
}

/* Mencegah flexbox meremas ukuran card saat duplikasi track menempel di sampingnya */
.marquee-track {
  display: flex;
  gap: 1.5rem; /* Setara dengan gap-6 bawaan Tailwind */
}

/* Menghentikan guliran otomatis secara halus saat kursor diarahkan ke kotak artikel */
.marquee-wrapper:hover .animate-marquee {
  animation-play-state: paused;
}

/* Efek shadow gradasi warna Oatmeal Cream di batas terluar kanan & kiri */
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #F5F2EB 15%, transparent);
}
.marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #F5F2EB 15%, transparent);
}

/* ==========================================================================
   Animasi Elemen Lembut Halaman (Intersection Observer)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-200 {
    transition-delay: 0.15s;
}