:root {
  --app-bg: #1e1e2f;
  --loader-hold: 1500ms;
  --loader-fade: 420ms;
}

html {
  background: var(--app-bg);
}

body {
  background: var(--app-bg);
  min-height: 100vh;
}

/* cegah flash/select/highlight aneh */
* {
  -webkit-tap-highlight-color: transparent;
}

img,
video {
  max-width: 100%;
  display: block;
}

.seamless-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--loader-fade) ease,
    visibility 0s linear var(--loader-fade);
  overflow: hidden;
  will-change: opacity;
}

.seamless-loader.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition:
    opacity var(--loader-fade) ease,
    visibility 0s linear 0s;
}

.loader-blob-wrap {
  position: relative;
  width: 110px;
  height: 72px;
  transform: translateZ(0);
  will-change: transform;
}

.loader-blob {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #7eb2ff;
  box-shadow:
    0 0 18px rgba(126, 178, 255, 0.32),
    0 0 34px rgba(126, 178, 255, 0.18);
  top: 50%;
  left: 50%;
  transform-origin: center;
}

.loader-blob.blob-1 {
  animation: blobOne 1.5s ease-in-out infinite;
}

.loader-blob.blob-2 {
  animation: blobTwo 1.5s ease-in-out infinite;
}

.loader-blob.blob-3 {
  animation: blobThree 1.5s ease-in-out infinite;
}

@keyframes blobOne {
  0%,
  100% {
    transform: translate(-42px, -50%) scale(0.92);
  }
  50% {
    transform: translate(-10px, -50%) scale(1.08);
  }
}

@keyframes blobTwo {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1.08);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes blobThree {
  0%,
  100% {
    transform: translate(8px, -50%) scale(0.92);
  }
  50% {
    transform: translate(-24px, -50%) scale(1.08);
  }
}

/* optional: sembunyiin konten sebelum halaman siap kalau datang dari transisi */
html.is-transitioning body {
  overflow: hidden;
}