/* ============================================================
   PAC RESORT — animations
   ============================================================ */

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; background: var(--clr-primary-dark); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; transition: opacity 0.6s var(--ease), visibility 0.6s; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__logo { font-family: var(--font-display); font-size: 3rem; font-weight: 800; color: var(--clr-white); letter-spacing: 0.1em; }
.preloader__logo span { color: var(--clr-accent); }
.preloader__bar { width: 180px; height: 3px; background: rgba(255, 255, 255, 0.15); border-radius: 999px; overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--clr-accent); animation: load 1.4s var(--ease) forwards; }
@keyframes load { to { width: 100%; } }

/* ---------- Keyframes ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.16); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero__bg img { animation: kenburns 22s ease-in-out infinite alternate; }
.float { animation: floatY 5s ease-in-out infinite; }

/* ---------- Hero content entrance ---------- */
.hero__content > * { opacity: 0; animation: fadeUp 0.9s var(--ease) forwards; }
.hero__content > *:nth-child(1) { animation-delay: 0.15s; }
.hero__content > *:nth-child(2) { animation-delay: 0.3s; }
.hero__content > *:nth-child(3) { animation-delay: 0.45s; }
.hero__content > *:nth-child(4) { animation-delay: 0.6s; }
.hero__content > *:nth-child(5) { animation-delay: 0.75s; }
.hero__content > *:nth-child(6) { animation-delay: 0.9s; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-46px); }
.reveal--right { transform: translateX(46px); }
.reveal--zoom { transform: scale(0.92); }
.reveal--left.is-visible, .reveal--right.is-visible, .reveal--zoom.is-visible { transform: none; }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ---------- Marquee strip ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 56px; padding-right: 56px; animation: marquee 28s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-muted); display: inline-flex; align-items: center; gap: 28px; }
.marquee__track span i { color: var(--clr-accent); font-size: 0.55rem; }

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--clr-cream); }
::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: 999px; border: 3px solid var(--clr-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary-soft); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal, .hero__content > * { opacity: 1 !important; transform: none !important; }
}
