/* ============================================================
   CTR SUITE — SPLASH / BOOT SCREEN
   Selaras dengan identitas ops-terminal login.php & register.php
   (navy/blue/mint, grid ambient, Sora + JetBrains Mono)
   ============================================================ */

.app-splash{
  --ink:#080D1F;
  --navy:#0E1730;
  --navy-2:#141F42;
  --line:rgba(150,163,224,0.16);
  --line-strong:rgba(150,163,224,0.3);
  --blue:#3D74F4;
  --blue-soft:rgba(61,116,244,0.14);
  --mint:#2FE3A6;
  --mint-soft:rgba(47,227,166,0.14);
  --paper:#EEF1FB;
  --mute:#8B95B7;
  --mute-2:#5C6690;
  --display:'Sora',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  position:fixed;
  inset:0;
  background:var(--ink);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999999;
  overflow:hidden;
  padding:24px;
}

/* ---- ambient grid, sama motif dengan halaman login ---- */
.app-splash::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:0.35;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 45%, black 0%, transparent 75%);
  pointer-events:none;
}

.splash-bg{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 35%, rgba(61,116,244,0.20) 0%, transparent 55%),
    radial-gradient(circle at 72% 65%, rgba(47,227,166,0.16) 0%, transparent 55%);
  filter:blur(70px);
  animation:bgMove 9s ease-in-out infinite;
  pointer-events:none;
}

/* ---- panel kaca, senada preview-card di login ---- */
.splash-content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:360px;
  text-align:center;
  padding:44px 36px 36px;
  border-radius:24px;
  background:rgba(20,31,66,0.55);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.65);
  overflow:hidden;
  animation:fadeUp .7s cubic-bezier(.2,.8,.2,1);
}

/* garis aksen gradien di tepi atas panel, motif sama dgn .login-container::before */
.splash-content::before{
  content:'';
  position:absolute;inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, var(--blue), var(--mint));
}

.splash-logo{
  width:88px;
  height:auto;
  margin:0 auto 20px;
  filter:drop-shadow(0 0 28px rgba(61,116,244,.4));
  animation:logoPop .8s cubic-bezier(.2,.8,.2,1);
}

.splash-content h1{
  color:var(--paper);
  font-family:var(--display);
  font-size:26px;
  font-weight:700;
  letter-spacing:0.06em;
  margin-bottom:8px;
}

.splash-content p{
  color:var(--mute);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* ---- progress + persentase ---- */
.loading-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:28px 0 12px;
}

.loading{
  flex:1;
  height:4px;
  background:var(--navy-2);
  border-radius:100px;
  overflow:hidden;
  position:relative;
}

.loading span{
  display:block;
  height:100%;
  width:0%;
  border-radius:100px;
  background:linear-gradient(90deg, var(--blue), var(--mint));
  transition:width .15s linear;
}

.loading-percent{
  font-family:var(--mono);
  font-size:12px;
  color:var(--mute-2);
  min-width:34px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---- boot-log status: signature element ---- */
.splash-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--mute);
  letter-spacing:0.02em;
  min-height:16px;
}

.splash-status .status-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 3px var(--mint-soft);
  flex:0 0 auto;
  animation:pulseDot 1.4s ease-in-out infinite;
}

.splash-status .status-text{
  animation:statusIn .28s ease;
}

/* ---- exit ---- */
.hideSplash{
  opacity:0;
  transition:opacity .5s ease, transform .5s ease, filter .5s ease;
  transform:scale(1.03);
  filter:blur(6px);
  pointer-events:none;
}

.hideSplash .splash-content{
  transition:transform .5s cubic-bezier(.3,.7,.3,1);
  transform:translateY(-8px) scale(0.98);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes logoPop{
  from{ transform:scale(.75); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

@keyframes fadeUp{
  from{ transform:translateY(20px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

@keyframes bgMove{
  0%,100%{ transform:translate(-20px,-10px) scale(1); }
  50%{ transform:translate(20px,10px) scale(1.08); }
}

@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 3px var(--mint-soft); }
  50%{ box-shadow:0 0 0 6px rgba(47,227,166,0.06); }
}

@keyframes statusIn{
  from{ opacity:0; transform:translateY(3px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   REDUCED MOTION — hormati preferensi pengguna
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .splash-bg{ animation:none; }
  .splash-content,
  .splash-logo,
  .splash-status .status-text{ animation:none; opacity:1; transform:none; }
  .status-dot{ animation:none; }
  .hideSplash,
  .hideSplash .splash-content{ transition-duration:.2s; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:420px){
  .splash-content{ padding:36px 24px 28px; border-radius:20px; }
  .splash-logo{ width:72px; }
  .splash-content h1{ font-size:22px; }
}