/*
Theme Name: Metuah Jaya Grup Rentcar
Theme URI: https://metuahjayagrup.com
Author: gufriends
Author URI: https://gufriends.me
Description: Tema custom rental mobil Indonesia, gaya BeLeasing 2. Siap Tailwind CSS.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custom-bang-acil
*/

/* Base & critical only. Styling utama dari Tailwind (assets/css/main.css). */

/* Hero background slider (disimpan di sini supaya tidak hilang saat Tailwind build ulang) */
.hero-bg-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity, transform;
  /* Animasi Fade & Ken Burns (Zoom-in perlahan) */
  /* Total 24 detik untuk 3 slide = 8 detik per slide */
  animation:
    heroBgFade 24s infinite,
    kenBurns 24s infinite;
}

/* Gambar placeholder – silakan ganti ke foto mobil sendiri */
.hero-bg-slide--1 {
  background-image: url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80");
  animation-delay: 0s;
}

.hero-bg-slide--2 {
  background-image: url("https://images.unsplash.com/photo-1494976388531-d1058494cdd8?auto=format&fit=crop&w=1600&q=80");
  animation-delay: 8s;
}

.hero-bg-slide--3 {
  /* SUV – tipe mobil rental populer (Fortuner/Innova) */
  background-image: url("https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1600&q=80");
  animation-delay: 16s;
}

/* Keyframes untuk transisi antar slide pada 3 slide (Total 100%)
   0-33%: Slide 1
   33-66%: Slide 2
   66-100%: Slide 3
*/
@keyframes heroBgFade {

  0%,
  100% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  /* Muncul halus */
  28% {
    opacity: 1;
  }

  /* Bertahan */
  38% {
    opacity: 0;
  }

  /* Hilang halus saat slide berikutnya masuk */
}

/* Efek Ken Burns (Zoom-in perlahan) */
@keyframes kenBurns {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}