/* =====================================================================
   HIPMI DEPOK — Intro Preloader "Gold Dawn" (warna HIPMI navy/gold)
   Gradasi fajar + partikel emas + sapuan cahaya + teks "New Era" merakit
   (font futuristik Orbitron). Terisolasi. Tanpa aset berat.
   ===================================================================== */
#intro-preloader{
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:
    radial-gradient(ellipse 82% 48% at 50% 116%, rgba(240,209,135,.42), rgba(201,151,43,.16) 32%, transparent 60%),
    linear-gradient(180deg,#0b2b52 0%,#164272 40%,#1f5088 66%,#2a5c92 86%,#356690 100%);
  will-change:transform,opacity;
}
#intro-preloader::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 130% 85% at 50% -12%, rgba(3,10,22,.55), transparent 52%)}
#intro-preloader .intro-dust{position:absolute;inset:0;pointer-events:none}
#intro-preloader .intro-frame{position:absolute;inset:22px;border:1px solid rgba(231,185,78,.28);border-radius:10px;pointer-events:none}
#intro-preloader .intro-glow{position:absolute;left:50%;top:44%;width:min(60vw,620px);height:min(60vw,620px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(240,209,135,.18),rgba(201,151,43,.05) 42%,transparent 66%)}
#intro-preloader .intro-sweep{position:absolute;inset:-30% -60%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(240,209,135,.16) 50%,transparent 62%);background-size:250% 100%;
  animation:introSweep 7.2s ease-in-out infinite}
#intro-preloader .intro-flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5;
  background:radial-gradient(ellipse at 50% 60%,rgba(240,209,135,.9),rgba(255,255,255,.5) 40%,transparent 72%)}

#intro-preloader .intro-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;text-align:center}
#intro-preloader .intro-logo{height:78px;width:auto;background:#fff;border-radius:14px;padding:10px 18px;box-shadow:0 18px 50px rgba(0,0,0,.4);
  opacity:0;transform:scale(.9);animation:introLogo 1s cubic-bezier(.2,.7,.2,1) .15s forwards}
/* teks futuristik "New Era" yang merakit diri (huruf digerakkan JS) */
#intro-preloader .intro-newera{font-family:'Orbitron','Archivo',sans-serif;font-weight:600;letter-spacing:.22em;font-size:1.05rem;color:#e7b94e;min-height:1.3em;padding-left:.22em}
#intro-preloader .intro-newera .nchar{display:inline-block;will-change:transform,opacity;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease,filter .5s ease}
#intro-preloader .intro-newera .nsp{display:inline-block;width:.42em}
#intro-preloader .intro-hourglass{color:#e7b94e;line-height:0;opacity:0;animation:introFade .8s ease .95s forwards}
#intro-preloader .intro-hourglass svg{display:block;transform-origin:50% 50%;animation:introHourglass 1.8s cubic-bezier(.7,0,.3,1) 1.2s infinite}
#intro-preloader .intro-bar{position:relative;width:min(240px,58vw);height:3px;border-radius:99px;background:rgba(231,185,78,.16);overflow:hidden;opacity:0;animation:introFade .8s ease .55s forwards}
#intro-preloader .intro-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#C9972B,#e7b94e,#f0d187);box-shadow:0 0 14px rgba(231,185,78,.55);transition:width .3s cubic-bezier(.4,0,.2,1)}

/* Reveal: kilau + wipe halus ke atas + fade */
#intro-preloader.intro-hide{transform:translateY(-100%);opacity:0;transition:transform 1s cubic-bezier(.76,0,.24,1),opacity .7s ease .1s;pointer-events:none}

@keyframes introLogo{to{opacity:1;transform:scale(1)}}
@keyframes introFade{to{opacity:1}}
@keyframes introHourglass{0%,12%{transform:rotate(0)}50%,62%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes introSweep{0%{background-position:180% 0}100%{background-position:-80% 0}}

@media(max-width:520px){
  #intro-preloader .intro-logo{height:60px;padding:8px 14px}
  #intro-preloader .intro-newera{font-size:.9rem;letter-spacing:.16em}
}
@media(prefers-reduced-motion:reduce){
  #intro-preloader .intro-logo,#intro-preloader .intro-hourglass,#intro-preloader .intro-bar{animation:introFade .4s ease forwards}
  #intro-preloader .intro-hourglass svg,#intro-preloader .intro-sweep{animation:none}
  #intro-preloader .intro-newera .nchar{transition:none}
  #intro-preloader.intro-hide{transition:opacity .4s ease;transform:none}
}