/* ═══════════════════════════════════════════════════════
   LUTHFRAME — cinematic preloader
   ═══════════════════════════════════════════════════════ */

html.lf-loading,
html.lf-loading body {
  overflow: hidden;
  height: 100%;
}

.lf-preloader {
  --lf-preloader-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000000;
  isolation: isolate;
  transition: transform 1.05s var(--lf-preloader-ease), visibility 1.05s;
}

.lf-preloader.is-exiting {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 1.05s var(--lf-preloader-ease), visibility 1.05s;
}

.lf-preloader.is-exiting .lf-preloader__center {
  transform: scale(1.04);
  opacity: 0;
  transition: transform 0.55s var(--lf-preloader-ease), opacity 0.45s ease;
}

/* ── Texture layers ─────────────────────────────────── */
.lf-preloader__noise {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.055;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: lf-preloader-grain 0.45s steps(1) infinite;
}

.lf-preloader__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.004) 3px,
    rgba(255, 255, 255, 0.004) 4px
  );
}

.lf-preloader__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 55%);
}

/* ── Corner brackets ────────────────────────────────── */
.lf-preloader__corner {
  position: absolute;
  width: 36px;
  height: 36px;
  opacity: 0;
  transition: opacity 0.6s ease 0.15s, transform 0.7s var(--lf-preloader-ease) 0.15s;
}

.lf-preloader.is-ready .lf-preloader__corner {
  opacity: 1;
  transform: translate(0, 0);
}

.lf-preloader__corner--tl {
  top: max(28px, calc(50vh - 280px));
  left: max(28px, calc(50vw - 320px));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  transform: translate(-8px, -8px);
}

.lf-preloader__corner--tr {
  top: max(28px, calc(50vh - 280px));
  right: max(28px, calc(50vw - 320px));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  transform: translate(8px, -8px);
}

.lf-preloader__corner--bl {
  bottom: max(28px, calc(50vh - 280px));
  left: max(28px, calc(50vw - 320px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  transform: translate(-8px, 8px);
}

.lf-preloader__corner--br {
  bottom: max(28px, calc(50vh - 280px));
  right: max(28px, calc(50vw - 320px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  transform: translate(8px, 8px);
}

/* ── HUD readouts ───────────────────────────────────── */
.lf-preloader__hud {
  position: absolute;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  line-height: 1.9;
  user-select: none;
  opacity: 0;
  transition: opacity 0.7s ease 0.35s;
}

.lf-preloader.is-ready .lf-preloader__hud {
  opacity: 1;
}

.lf-preloader__hud--tl {
  top: max(44px, calc(50vh - 264px));
  left: max(44px, calc(50vw - 304px));
}

.lf-preloader__hud--tr {
  top: max(44px, calc(50vh - 264px));
  right: max(44px, calc(50vw - 304px));
  text-align: right;
  color: rgba(255, 255, 255, 0.42);
}

.lf-preloader__hud--bl {
  bottom: max(44px, calc(50vh - 264px));
  left: max(44px, calc(50vw - 304px));
}

.lf-preloader__hud--br {
  bottom: max(44px, calc(50vh - 264px));
  right: max(44px, calc(50vw - 304px));
  text-align: right;
}

.lf-preloader__rec-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  margin-right: 5px;
  vertical-align: middle;
  animation: lf-preloader-rec 1.5s ease-in-out infinite;
}

/* ── Center mark ────────────────────────────────────── */
.lf-preloader__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform 0.85s var(--lf-preloader-ease), opacity 0.7s ease;
}

.lf-preloader__logo-wrap {
  position: relative;
  width: 56px;
  height: 56px;
}

.lf-preloader__logo {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.lf-preloader__logo-piece {
  fill: #ffffff;
  opacity: 0;
  transform-origin: 16px 16px;
}

.lf-preloader.is-ready .lf-preloader__logo-piece--a {
  animation: lf-preloader-logo-a 0.9s var(--lf-preloader-ease) 0.1s forwards;
}

.lf-preloader.is-ready .lf-preloader__logo-piece--b {
  animation: lf-preloader-logo-b 0.9s var(--lf-preloader-ease) 0.22s forwards;
}

.lf-preloader__logo-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%);
  opacity: 0;
  animation: lf-preloader-glow 2.4s ease-in-out infinite 0.5s;
}

.lf-preloader.is-ready .lf-preloader__logo-glow {
  opacity: 1;
}

.lf-preloader__brand {
  font-size: clamp(0.72rem, 1.2vw + 0.4rem, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease 0.45s, transform 0.7s var(--lf-preloader-ease) 0.45s;
}

.lf-preloader.is-ready .lf-preloader__brand {
  opacity: 1;
  transform: translateY(0);
}

.lf-preloader__reg {
  font-size: 0.55em;
  vertical-align: super;
  letter-spacing: 0;
  text-indent: 0;
  opacity: 0.7;
}

.lf-preloader__tag {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease 0.58s, transform 0.7s var(--lf-preloader-ease) 0.58s;
}

.lf-preloader.is-ready .lf-preloader__tag {
  opacity: 1;
  transform: translateY(0);
}

/* ── Progress ───────────────────────────────────────── */
.lf-preloader__progress-wrap {
  position: absolute;
  bottom: max(72px, calc(50vh - 236px));
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 72vw);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease 0.5s;
}

.lf-preloader.is-ready .lf-preloader__progress-wrap {
  opacity: 1;
}

.lf-preloader__progress-track {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.lf-preloader__progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0%, #ffffff 100%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
  transition: width 0.12s linear;
}

.lf-preloader__pct {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lf-preloader__status {
  position: absolute;
  bottom: max(48px, calc(50vh - 260px));
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease 0.62s;
}

.lf-preloader.is-ready .lf-preloader__status {
  opacity: 1;
}

/* ── Keyframes ──────────────────────────────────────── */
@keyframes lf-preloader-grain {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2%, -3%); }
  50% { transform: translate(3%, 1%); }
  75% { transform: translate(-1%, 4%); }
}

@keyframes lf-preloader-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

@keyframes lf-preloader-logo-a {
  0% { opacity: 0; transform: translate(-6px, -6px) scale(0.85); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes lf-preloader-logo-b {
  0% { opacity: 0; transform: translate(-10px, 0) scale(0.9); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes lf-preloader-glow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lf-preloader,
  .lf-preloader__center,
  .lf-preloader__corner,
  .lf-preloader__hud,
  .lf-preloader__brand,
  .lf-preloader__tag,
  .lf-preloader__progress-wrap,
  .lf-preloader__status {
    transition: none !important;
    animation: none !important;
  }

  .lf-preloader__noise { animation: none; }
  .lf-preloader__rec-dot { animation: none; }

  /* Tanpa ini elemen tetap opacity:0 karena animasi dimatikan */
  .lf-preloader.is-ready .lf-preloader__logo-piece,
  .lf-preloader.is-ready .lf-preloader__logo-piece--a,
  .lf-preloader.is-ready .lf-preloader__logo-piece--b {
    opacity: 1;
    transform: none;
  }

  .lf-preloader.is-ready .lf-preloader__corner {
    opacity: 1;
    transform: none;
  }

  .lf-preloader.is-ready .lf-preloader__hud,
  .lf-preloader.is-ready .lf-preloader__brand,
  .lf-preloader.is-ready .lf-preloader__tag,
  .lf-preloader.is-ready .lf-preloader__progress-wrap,
  .lf-preloader.is-ready .lf-preloader__status {
    opacity: 1;
    transform: none;
  }

  .lf-preloader.is-ready .lf-preloader__logo-glow {
    opacity: 0.6;
  }
}

@media (max-width: 600px) {
  .lf-preloader__corner,
  .lf-preloader__hud {
    display: none;
  }

  .lf-preloader__progress-wrap {
    bottom: 56px;
    width: min(240px, 80vw);
  }

  .lf-preloader__status {
    bottom: 32px;
  }
}