/* PetaPajak: motion and the few things Tailwind classes cannot express. Colours come from the Tailwind config in includes/head.php. */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.tabular { font-variant-numeric: tabular-nums; }

/* Page background: the map picture, fixed behind everything. Blur by page: landing 12px, login 6px, logged in 2px.
   The yellow glow of the landing page and the login is drawn above the picture (::after). */
.bg-map { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-map::before {
  content: '';
  position: absolute;
  inset: -24px; /* bleed, so the blur leaves no pale edge */
  background: url('../img/bg-map.webp') center / cover no-repeat;
  filter: blur(var(--bg-blur, 2px));
}
.bg-map::after { content: ''; position: absolute; inset: 0; }
.bg-map--soft { --bg-blur: 12px; }
.bg-map--mid { --bg-blur: 6px; }
.bg-map--light { --bg-blur: 2px; }
.bg-map--soft::after { background: radial-gradient(700px 420px at 8% 0%, #fff1c2 0%, rgba(255, 241, 194, 0) 70%); }
.bg-map--mid::after { background: radial-gradient(600px 400px at 10% 100%, #fff1c2 0%, rgba(255, 241, 194, 0) 70%); }

/* Cards fade up with a short stagger: set style="--i:N" on each. */
.fade-up {
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up .6s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* Soft hover lift on cards and buttons. */
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15, 27, 61, .10); }

/* Landing cards float slowly. */
.float-slow { animation: float 7s ease-in-out infinite; }
.float-slow-2 { animation: float 8s ease-in-out -3s infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* A wrong password shakes the login card once. */
.shake-once { animation: shake .5s cubic-bezier(.36, .07, .19, .97) 1; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Skeleton shimmer while AJAX tables load. */
.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, rgb(236 239 244) 25%, rgb(246 248 251) 50%, rgb(236 239 244) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Dropdown: slides and fades. */
.pop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.pop[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Phone drawer. */
.drawer-panel { transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.drawer-backdrop { opacity: 0; transition: opacity .28s ease; }
#drawer[data-open="true"] .drawer-panel { transform: none; }
#drawer[data-open="true"] .drawer-backdrop { opacity: 1; }
#drawer[data-open="false"] { visibility: hidden; transition: visibility 0s linear .28s; }

/* The active menu pill slides between items. It stays hidden and unanimated until app.js has placed it,
   so it never grows in from the left (the Dashboard slot) on a page load. */
.nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
}
.nav-pill.is-ready { opacity: 1; }
.nav-pill.is-animated {
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), width .3s cubic-bezier(.2, .7, .2, 1);
}
.has-pill a[aria-current="page"] { background: transparent; }

/* Map markers drop in softly (the inner wrapper moves, not the element Leaflet positions). */
.pp-drop { animation: pp-drop .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pp-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Leaflet popup as a card. */
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 27, 61, .18); color: #0f1b3d; }
.leaflet-popup-content { margin: 16px; font-family: "Plus Jakarta Sans", sans-serif; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .fade-up { opacity: 1; transform: none; }
}