/* =====================================================================
   AkseleraSync — Launch Splash
   ---------------------------------------------------------------------
   Spacing/radius/tipografi/elevasi/durasi memakai token dari
   assets/css/tokens.css (dimuat lebih dulu).

   - --splash-duration disetel dari launch-splash.js (2200ms) agar
     progress bar selesai tepat saat splash keluar. Nilai di bawah hanya
     cadangan bila JS tidak sempat berjalan.
   - Warna aksen dinamai --splash-gold/--splash-mint, bukan --sp-*,
     supaya tidak tertukar dengan skala spacing --sp-1..9.
   - Tidak ada font-size di bawah var(--fs-caption) (12px).
   ===================================================================== */

.launch-splash {
  --splash-duration: 2200ms;
  --splash-gold: #e4b858;
  --splash-mint: #65dfd3;
  --splash-in: var(--motion-slow);
  --splash-in-slow: calc(var(--motion-slow) * 1.5);
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: none;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 8% 18%, rgba(64,111,209,.34), transparent 32rem),
    radial-gradient(circle at 92% 18%, rgba(56,185,148,.22), transparent 29rem),
    radial-gradient(circle at 55% 108%, rgba(228,184,88,.19), transparent 34rem),
    linear-gradient(145deg, #061126 0%, #102753 48%, #063f4c 100%);
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer; /* seluruh layar dapat diketuk untuk melewati */
  transition: opacity var(--motion-slow) var(--motion-ease), visibility var(--motion-slow) ease;
}
.splash-pending,
.splash-pending body { overflow: hidden; }
.splash-pending .launch-splash { display: block; }
.launch-splash.is-leaving { visibility: hidden; opacity: 0; }
.launch-splash:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
  pointer-events: none;
}
.launch-splash:after {
  content: "";
  position: absolute;
  width: min(74vw, 980px);
  aspect-ratio: 1;
  right: -30%;
  top: -62%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.018);
  animation: sp-orbit 12s linear infinite;
  pointer-events: none;
}
.launch-splash__orb {
  position: absolute;
  width: 320px;
  height: 320px;
  left: -130px;
  bottom: -145px;
  border-radius: 50%;
  background: rgba(84,214,208,.18);
  filter: blur(70px);
  animation: sp-breathe 4.6s ease-in-out infinite alternate;
  pointer-events: none;
}
.launch-splash__school-watermark {
  position: absolute;
  z-index: 0;
  width: clamp(190px,24vw,340px);
  height: auto;
  right: clamp(-72px,-3vw,-28px);
  bottom: clamp(34px,8vh,110px);
  opacity: .075;
  filter: grayscale(.18) brightness(1.65) saturate(.75);
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}
.launch-splash__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1380px);
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(var(--sp-6), env(safe-area-inset-top, 0px)) clamp(22px,4vw,64px) max(var(--sp-5), env(safe-area-inset-bottom, 0px));
  transition: transform var(--motion-slow) var(--motion-ease), filter var(--motion-slow) ease;
}
.launch-splash.is-leaving .launch-splash__inner { transform: scale(.985); filter: blur(3px); }
.launch-splash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  animation: sp-reveal var(--splash-in) var(--motion-ease) both;
}
.launch-splash__brand { min-width: 0; display: inline-flex; align-items: center; gap: var(--sp-3); }
.launch-splash__brand-mark {
  width: 50px;
  height: 50px;
  flex: none;
  object-fit: contain;
  padding: var(--sp-1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}
.launch-splash__brand-copy { min-width: 0; display: flex; flex-direction: column; }
.launch-splash__brand-copy strong {
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.launch-splash__brand-copy small {
  margin-top: 2px;
  color: rgba(255,255,255,.7);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

/* Target sentuh tombol lewati dijaga minimal var(--touch-min). */
.launch-splash__skip {
  min-width: 100px;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: .02em;
  white-space: nowrap; /* label harus tetap satu baris di 390 */
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
.launch-splash__skip:hover,
.launch-splash__skip:focus-visible { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.17); }
.launch-splash__skip:active { transform: scale(.96); }
.launch-splash__stage {
  min-height: 0;
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0,1.18fr) minmax(360px,.82fr);
  align-items: center;
  gap: clamp(28px,5vw,78px);
  padding: clamp(28px,5vh,68px) 0 clamp(22px,4vh,46px);
}
.launch-splash__visual {
  position: relative;
  min-width: 0;
  animation: sp-visual var(--splash-in-slow) calc(var(--motion-fast) * .5) var(--motion-ease) both;
}
.launch-splash__visual:before {
  content: "";
  position: absolute;
  inset: 10% -3% -8%;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(84,214,208,.24), rgba(228,184,88,.14));
  filter: blur(32px);
}
.launch-splash__picture {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: clamp(24px,3vw,38px);
  background: rgba(255,250,240,.97);
  box-shadow: 0 35px 80px rgba(0,9,29,.34), inset 0 1px 0 rgba(255,255,255,.9);
}
.launch-splash__picture:before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.54);
  pointer-events: none;
}
.launch-splash__picture img { width: 100%; height: 100%; display: block; object-fit: contain; }
.launch-splash__visual-label {
  position: absolute;
  z-index: 3;
  left: clamp(14px,2vw,24px);
  bottom: clamp(14px,2vw,24px);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: #17325f;
  border: 1px solid rgba(23,50,95,.08);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(10px);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}
.launch-splash__visual-label:before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #38b994;
  box-shadow: 0 0 0 5px rgba(56,185,148,.15);
  animation: sp-dot 1.5s ease-in-out infinite;
}
.launch-splash__copy {
  max-width: 560px;
  animation: sp-reveal var(--splash-in-slow) var(--motion-fast) var(--motion-ease) both;
}
.launch-splash__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  color: #b8f3e7;
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.launch-splash__eyebrow:before {
  content: "";
  width: 32px;
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, var(--splash-gold), var(--splash-mint));
}
.launch-splash h1 {
  max-width: 580px;
  margin: 0;
  color: #fff;
  font-size: clamp(calc(var(--fs-display) * 1.36), 4.4vw, calc(var(--fs-display) * 2.8));
  font-weight: var(--fw-heavy);
  line-height: 1.05;
  letter-spacing: -.05em;
}
.launch-splash h1 span {
  color: transparent;
  background: linear-gradient(98deg, #fff1c7 0%, #e4b858 42%, #78e3d8 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.launch-splash__lead {
  max-width: 510px;
  margin: var(--sp-5) 0 0;
  color: rgba(239,247,255,.74);
  font-size: clamp(var(--fs-small), 1.25vw, calc(var(--fs-small) * 1.31));
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}
.launch-splash__pillars { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.launch-splash__pillar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.055);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.launch-splash__pillar:before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--splash-gold); }
.launch-splash__footer {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  animation: sp-reveal var(--splash-in) calc(var(--motion-fast) * 2) var(--motion-ease) both;
}
.launch-splash__progress-wrap {
  min-width: 0;
  margin-top: clamp(13px,1.5vw,19px);
  padding: 0 clamp(2px,.4vw,5px);
}
.launch-splash__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  color: rgba(255,255,255,.84);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: .045em;
}
.launch-splash__status { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.launch-splash__step { flex: none; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.launch-splash__track {
  height: 8px;
  overflow: hidden;
  padding: 1px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 5px 18px rgba(2,10,29,.2);
}

/* Durasi bar mengikuti --splash-duration yang disetel launch-splash.js. */
.launch-splash__bar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--splash-gold), var(--splash-mint));
  box-shadow: 0 0 22px rgba(84,214,208,.78);
  transform: scaleX(0);
  transform-origin: left;
  animation: sp-progress var(--splash-duration, 2200ms) linear both;
}
.launch-splash__promise {
  max-width: 280px;
  color: rgba(255,255,255,.5);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: .04em;
  text-align: right;
  text-transform: uppercase;
}

/* Petunjuk ketuk-untuk-lewati (disuntik launch-splash.js). */
.launch-splash__tap-hint {
  margin: var(--sp-4) 0 0;
  color: rgba(255,255,255,.5);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-align: center;
  animation: sp-reveal var(--splash-in) calc(var(--motion-fast) * 2.5) var(--motion-ease) both;
}

.portal-buffer {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  background: rgba(6,17,38,.78);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.portal-buffer[hidden] { display: none; }
.portal-buffer__card {
  width: min(76vw,360px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: clamp(20px,5vw,30px);
  background: #fffaf0;
  box-shadow: 0 28px 78px rgba(0,7,24,.48), 0 0 44px rgba(84,214,208,.16);
  animation: portal-buffer-in var(--motion-base) var(--motion-ease) both;
}
.portal-buffer__card img { width: 100%; height: 100%; display: block; object-fit: contain; }

@keyframes sp-progress { to { transform: scaleX(1); } }
@keyframes sp-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sp-visual { from { opacity: 0; transform: translate3d(-22px,16px,0) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes sp-dot { 0%,100% { opacity: .64; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@keyframes sp-breathe { to { transform: translate3d(50px,-24px,0) scale(1.15); opacity: .76; } }
@keyframes sp-orbit { to { transform: rotate(360deg); } }
@keyframes portal-buffer-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 820px) {
  .launch-splash__inner { padding-right: clamp(18px,5vw,34px); padding-left: clamp(18px,5vw,34px); }
  .launch-splash__stage { grid-template-columns: 1fr; align-content: center; gap: var(--sp-6); padding: clamp(22px,4vh,38px) 0; }
  .launch-splash__visual { width: min(100%,640px); justify-self: center; }
  .launch-splash__copy { max-width: 650px; }
  .launch-splash h1 { max-width: 650px; font-size: clamp(calc(var(--fs-display) * 1.32), 7vw, calc(var(--fs-display) * 2.16)); }
}
@media (max-width: 520px) {
  .launch-splash__inner { padding-top: max(var(--sp-4),env(safe-area-inset-top,0px)); padding-bottom: max(var(--sp-4),env(safe-area-inset-bottom,0px)); }
  .launch-splash__brand { gap: var(--sp-2); }
  .launch-splash__brand-mark { width: 42px; height: 42px; border-radius: var(--r-md); }
  .launch-splash__brand-copy strong { font-size: var(--fs-body); }
  .launch-splash__brand-copy small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-caption); }
  .launch-splash__skip { min-width: 92px; padding-inline: var(--sp-3); }
  .launch-splash__stage { gap: clamp(18px,2.7vh,24px); padding: clamp(18px,3vh,28px) 0; }
  .launch-splash__picture { border-radius: var(--r-xl); }
  .launch-splash__visual-label { left: var(--sp-3); bottom: var(--sp-3); padding: var(--sp-1) var(--sp-2); }
  .launch-splash__eyebrow { margin-bottom: var(--sp-3); }
  .launch-splash h1 { font-size: clamp(calc(var(--fs-display) * 1.12), 8.4vw, calc(var(--fs-display) * 1.72)); }
  .launch-splash__lead { margin-top: var(--sp-3); font-size: var(--fs-caption); line-height: var(--lh-normal); }
  .launch-splash__pillars { gap: var(--sp-1); margin-top: var(--sp-4); }
  .launch-splash__pillar { padding: var(--sp-1) var(--sp-2); }
  .launch-splash__track { height: 7px; }
  .launch-splash__status-row { margin-bottom: var(--sp-2); }
  .launch-splash__promise { display: none; }
  .launch-splash__tap-hint { margin-top: var(--sp-3); }
}
@media (max-width: 380px), (max-height: 700px) {
  .launch-splash__stage { gap: var(--sp-4); padding: var(--sp-4) 0; }
  .launch-splash__visual { width: min(88%,500px); }
  .launch-splash__eyebrow { margin-bottom: var(--sp-2); }
  .launch-splash h1 { font-size: clamp(var(--fs-display), 7.6vw, calc(var(--fs-display) * 1.52)); }
  .launch-splash__lead { margin-top: var(--sp-2); font-size: var(--fs-caption); }
  .launch-splash__pillars { margin-top: var(--sp-3); }
}

/* Gerak dikurangi: launch-splash.js langsung menutup splash tanpa animasi.
   Aturan ini menjadi jaring pengaman bila JS belum sempat berjalan. */
@media (prefers-reduced-motion: reduce) {
  .launch-splash,
  .launch-splash__inner,
  .launch-splash *,
  .launch-splash *:before,
  .launch-splash *:after,
  .portal-buffer__card {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}