/* ==========================================================================
   JULOM — preloader
   One overlay, eight interchangeable travel scenes. Each scene only animates
   the pieces it owns, so adding another is just SVG + a keyframe block.
   ========================================================================== */

html.is-loading, html.is-loading body { overflow: hidden; }

.pl {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #0a4647 0%, #042f30 55%, #02201f 100%);
  opacity: 1; transition: opacity .55s ease, visibility .55s ease;
}
.pl.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.pl__inner { width: min(420px, 82vw); text-align: center; }
.pl__stage { min-height: 150px; display: grid; place-items: center; margin-bottom: 30px; }
.pl-art { width: 100%; max-width: 300px; height: auto; overflow: visible; }

/* ---- brand ---- */
.pl__word {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.2rem);
  letter-spacing: .26em; text-indent: .26em; color: #fff; line-height: 1;
}
.pl__word i { font-style: normal; color: #ffc826; }
.pl__sub {
  display: block; margin-top: 9px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: .64rem; font-weight: 700; letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}

/* ---- progress ---- */
.pl__bar {
  margin: 22px auto 0; width: 180px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .14); overflow: hidden;
}
.pl__bar span {
  display: block; height: 100%; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, #00878a, #ffc826);
  animation: plBar 1.5s cubic-bezier(.65, .05, .36, 1) infinite;
}
@keyframes plBar { 0% { transform: translateX(-110%) } 100% { transform: translateX(360%) } }

.pl__caption {
  margin-top: 14px; font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
  animation: plFade 2.4s ease-in-out infinite;
}
@keyframes plFade { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* ---- shared ink ---- */
.pl-art { --ink: #ffffff; --gold: #ffc826; --teal: #4fd1d4; --dim: rgba(255, 255, 255, .22); }
.pl-ground { stroke: var(--dim); stroke-width: 2; stroke-linecap: round; }
.pl-scenery path { fill: rgba(255, 255, 255, .07); }
.pl-sun { fill: var(--gold); opacity: .9; }

/* ========================= PLANE ========================= */
.pl-route { stroke: var(--dim); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; animation: plDash 1.4s linear infinite; }
@keyframes plDash { to { stroke-dashoffset: -24 } }
.pl--plane .pl-dot { fill: var(--teal); }
.pl--plane .pl-dot--end { fill: var(--gold); }
.pl--plane .pl-clouds ellipse { fill: rgba(255, 255, 255, .1); }
.pl--plane .pl-clouds { animation: plDrift 5s linear infinite; }
@keyframes plDrift { 0% { transform: translateX(10px) } 100% { transform: translateX(-28px) } }
.pl-plane path { fill: var(--ink); }
.pl-plane {
  offset-path: path("M12 92 C 60 92, 96 60, 132 38 S 196 16, 208 14");
  offset-rotate: auto;
  animation: plFly 2.6s cubic-bezier(.5, .05, .5, .95) infinite;
}
@keyframes plFly { 0% { offset-distance: 0%; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
/* fallback for engines without offset-path */
@supports not (offset-path: path("M0 0 L1 1")) {
  .pl-plane { animation: plFlyFallback 2.6s ease-in-out infinite; }
  @keyframes plFlyFallback { 0% { transform: translate(14px, 88px) rotate(-18deg); opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } 100% { transform: translate(196px, 20px) rotate(-18deg); opacity: 0 } }
}

/* ========================= JEEP ========================= */
.pl-jeep rect, .pl-jeep path { fill: var(--ink); }
.pl-jeep .pl-rack { fill: var(--gold); }
.pl-jeep { animation: plBounce .5s ease-in-out infinite; transform-origin: center; }
@keyframes plBounce { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2.5px) } }
.pl-wheel { fill: #02201f; stroke: var(--ink); stroke-width: 3.5; transform-box: fill-box; transform-origin: center; animation: plSpin .7s linear infinite; }
@keyframes plSpin { to { transform: rotate(360deg) } }
.pl-road rect { fill: var(--dim); animation: plRoad .6s linear infinite; }
@keyframes plRoad { to { transform: translateX(-60px) } }

/* ========================= VISA ========================= */
.pl-passport rect { fill: #0a4647; stroke: var(--ink); stroke-width: 2.5; }
.pl-passport .pl-page { fill: #073c3d; }
.pl-line { stroke: var(--dim); stroke-width: 2.5; stroke-linecap: round; }
.pl-stamp { stroke: var(--gold); transform-origin: 118px 61px; animation: plStamp 1.9s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.pl-stamp-text { fill: var(--gold); font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .12em; }
@keyframes plStamp {
  0% { transform: scale(2.4) rotate(-14deg); opacity: 0 }
  28% { transform: scale(1) rotate(-9deg); opacity: 1 }
  70% { transform: scale(1) rotate(-9deg); opacity: 1 }
  100% { transform: scale(1) rotate(-9deg); opacity: 0 }
}

/* ========================= SKYLINE ========================= */
.pl-b { fill: rgba(255, 255, 255, .9); transform-box: fill-box; transform-origin: bottom; animation: plRise 2.2s cubic-bezier(.22, .9, .3, 1) infinite; }
.pl-burj { fill: var(--gold); }
.pl-city .pl-b:nth-child(1) { animation-delay: 0s }
.pl-city .pl-b:nth-child(2) { animation-delay: .1s }
.pl-city .pl-b:nth-child(3) { animation-delay: .2s }
.pl-city .pl-b:nth-child(4) { animation-delay: .3s }
.pl-city .pl-b:nth-child(5) { animation-delay: .4s }
.pl-city .pl-b:nth-child(6) { animation-delay: .5s }
@keyframes plRise { 0% { transform: scaleY(.05) } 45% { transform: scaleY(1) } 85% { transform: scaleY(1) } 100% { transform: scaleY(.05) } }
.pl-windows rect { fill: var(--gold); animation: plBlink 1.6s steps(1, end) infinite; }
.pl-windows rect:nth-child(odd) { animation-delay: .8s }
@keyframes plBlink { 0%, 49% { opacity: .95 } 50%, 100% { opacity: .18 } }

/* ========================= MOUNTAIN ========================= */
.pl-peak { fill: rgba(255, 255, 255, .88); }
.pl-peak--back { fill: rgba(255, 255, 255, .34); }
.pl-snow { fill: #02201f; opacity: .55; }
.pl--mountain .pl-sun { animation: plSunrise 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes plSunrise { 0% { transform: translateY(34px) scale(.75); opacity: 0 } 45% { transform: translateY(0) scale(1); opacity: 1 } 80% { transform: translateY(0) scale(1); opacity: 1 } 100% { transform: translateY(0) scale(1); opacity: 0 } }
.pl-birds path { stroke: rgba(255, 255, 255, .6); stroke-width: 2; stroke-linecap: round; animation: plBirds 3.4s ease-in-out infinite; }
.pl-birds path:nth-child(2) { animation-delay: .5s }
@keyframes plBirds { 0% { transform: translate(-18px, 8px); opacity: 0 } 30% { opacity: 1 } 70% { opacity: 1 } 100% { transform: translate(22px, -10px); opacity: 0 } }

/* ========================= DHOW ========================= */
.pl-boat path { fill: var(--ink); }
.pl-boat .pl-sail-b { fill: var(--gold); }
.pl-boat line { stroke: var(--ink); stroke-linecap: round; }
.pl-boat { animation: plSail 2.8s ease-in-out infinite; transform-origin: 110px 90px; }
@keyframes plSail { 0%, 100% { transform: translateY(0) rotate(-2.5deg) } 50% { transform: translateY(-5px) rotate(2.5deg) } }
.pl-waves path { stroke: rgba(255, 255, 255, .3); stroke-width: 2.5; stroke-linecap: round; animation: plWave 2.2s linear infinite; }
.pl-waves path:nth-child(2) { stroke: rgba(255, 255, 255, .16); animation-duration: 3s; }
@keyframes plWave { to { transform: translateX(-56px) } }

/* ========================= BALLOON ========================= */
.pl-balloon path { fill: var(--ink); }
.pl-balloon .pl-gore { stroke: #ffa627; stroke-width: 2.5; fill: none; }
.pl-balloon .pl-basket { fill: var(--gold); }
.pl-balloon line { stroke: rgba(255, 255, 255, .55); }
.pl-balloon { animation: plFloat 3s ease-in-out infinite; transform-origin: center bottom; }
@keyframes plFloat { 0%, 100% { transform: translateY(6px) rotate(-1.5deg) } 50% { transform: translateY(-8px) rotate(1.5deg) } }

/* ========================= LUGGAGE ========================= */
.pl-case rect { fill: var(--ink); }
.pl-case .pl-handle { stroke: rgba(255, 255, 255, .8); fill: none; }
.pl-case .pl-strap { stroke: var(--gold); stroke-width: 7; }
.pl-case .pl-tag rect { fill: var(--gold); }
.pl-case .pl-tag line { stroke: rgba(255, 255, 255, .7); }
.pl-case .pl-tag { transform-box: fill-box; transform-origin: 0 0; animation: plSwing 1.1s ease-in-out infinite; }
@keyframes plSwing { 0%, 100% { transform: rotate(-11deg) } 50% { transform: rotate(11deg) } }
.pl-case { animation: plBounce .55s ease-in-out infinite; }

/* ---- reduced motion: keep the scene, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  .pl *, .pl *::before, .pl *::after { animation: none !important; transition: none !important; }
  .pl__bar span { width: 100%; }
  .pl-plane { offset-distance: 62%; }
  .pl-stamp { transform: rotate(-9deg); opacity: 1; }
  .pl-b { transform: none; }
}

@media (max-width: 480px) {
  .pl__stage { min-height: 118px; margin-bottom: 24px; }
  .pl-art { max-width: 240px; }
}