/* ============================================================
   RAWDAH TRAVEL — animations.css
   GSAP-assisted reveal initial states & ambient animations.
   Initial hidden states apply only when JS is active (html.js)
   so content is never lost without JavaScript.
   ============================================================ */

/* ---------- Ken Burns / ambient ---------- */
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---------- Preloader helpers ---------- */
.preloader { transition: visibility 0.6s; }
.preloader.done { visibility: hidden; }

/* ---------- GSAP initial states (JS-only) ---------- */
html.js [data-animate="fade-up"] { opacity: 0; }
html.js [data-animate="fade-in"] { opacity: 0; }
html.js [data-animate="fade-left"] { opacity: 0; }
html.js [data-animate="fade-right"] { opacity: 0; }
html.js [data-animate="scale"] { opacity: 0; }
html.js [data-clip] { clip-path: inset(0 0 100% 0); }
html.js [data-clip="left"] { clip-path: inset(0 100% 0 0); }
html.js [data-clip="top"] { clip-path: inset(100% 0 0 0); }
html.js [data-img-zoom] img { transform: scale(1.18); }
html.js [data-line] { transform: scaleX(0); transform-origin: left; }
html.js .char, html.js .word { display: inline-block; will-change: transform; }

/* Split heading masks */
.split-line-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.word-nowrap { display: inline-block; white-space: nowrap; }

/* Hero entrance handled by GSAP; guard against FOUC */
html.js .hero-anim { opacity: 0; }
html.js .page-hero-anim > * { opacity: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-animate], html.js [data-clip], html.js [data-img-zoom] img,
  html.js .char, html.js .word, html.js .hero-anim, html.js .page-hero-anim > * {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  .marquee-track { animation: none !important; }
  .swiper-slide-active .kenburns { animation: none !important; }
  .hero-scroll::after { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Swiper a11y/visual polish ---------- */
.swiper-notification { display: none; }
.fleet-swiper .swiper-slide { width: auto; }

/* ---------- Smooth hover polish ---------- */
.card, .vehicle-card, .value-card, .site-card, .route-card, .dest-card { will-change: transform; }

/* ---------- Noise overlay (subtle premium texture) ---------- */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- Gold shimmer for divider lines ---------- */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  background-size: 200% 100%;
  animation: shimmer 4.5s linear infinite;
}