/* ================================================================
 * ORION LOADING OVERLAY (Tech / IT theme, ported from PKBM v13 toga)
 * ================================================================
 * Animasi loading dengan motif ROKET ORBIT + CHIP TUMPUK.
 * Auto-hide setelah window.load + minimum display time (configurable
 * via window.ORION_LOADING_MIN_MS, default 350ms).
 *
 * Dipakai:
 * 1. Fullscreen overlay (#orionLoadingOverlay) - dipasang di landing,
 * dashboard, dll. yang assetnya berat.
 * 2. Inline placeholder (.orion-asset-placeholder) - shimmer untuk
 * Drive image yang loading di galeri/pengumuman.
 * ================================================================ */

#orionLoadingOverlay {
 position: fixed;
 inset: 0;
 z-index: 2147483646;
 /* Ikut customizer theme, fallback ke navy gradient */
 background: var(--app-grad-main, linear-gradient(135deg, #0a2540 0%, #1a4a7a 60%, #1976d2 100%));
 --orion-accent: var(--app-primary, #f5a623);
 --orion-accent-soft: var(--app-primary-soft, rgba(245, 166, 35, .18));
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 transition: opacity .35s ease, visibility .35s ease;
 opacity: 1;
 visibility: visible;
 overflow: hidden;
}
#orionLoadingOverlay.hide,
#orionLoadingOverlay.hidden {
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
 #orionLoadingOverlay,
 #orionLoadingOverlay * { animation-duration: .01ms !important; transition: none !important; }
}

#orionLoadingOverlay::before {
 /* Soft moving glow di background */
 content: '';
 position: absolute;
 width: 600px;
 height: 600px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--orion-accent-soft, rgba(245,166,35,.18)) 0%, transparent 70%);
 animation: orionGlowFloat 4s ease-in-out infinite alternate;
 filter: blur(40px);
}
@keyframes orionGlowFloat {
 0% { transform: translate(-15%, -10%); }
 100% { transform: translate(15%, 10%); }
}

.orion-loading-box {
 position: relative;
 text-align: center;
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
}

/* ORBITAL IT TECH WRAP, logo center + multi-ring spinning */
.orion-rocket-wrap {
 width: 180px;
 height: 180px;
 min-height: 180px;
 margin: 0 auto 28px;
 position: relative;
 display: block;
 flex-shrink: 0;
 box-sizing: content-box;
}
.orion-ring-svg {
 position: absolute;
 top: 0; left: 0;
 width: 100%;
 height: 100%;
 overflow: visible;
 pointer-events: none;
}

/* Ring rotations, beda arah & speed buat efek orbital */
.orion-ring-svg .orion-ring-1 { transform-origin: 80px 80px; animation: orionSpinCW 6s linear infinite; }
.orion-ring-svg .orion-ring-2,
.orion-ring-svg .orion-ring-2-cw { transform-origin: 80px 80px; animation: orionSpinCCW 8s linear infinite; }
.orion-ring-svg .orion-ring-3 { transform-origin: 80px 80px; animation: orionSpinCW 3.5s linear infinite; }

@keyframes orionSpinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orionSpinCCW { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

/* PROGRESS BAR + LABEL */
.orion-loading-label {
 font-size: 1.1rem;
 font-weight: 800;
 letter-spacing: .6px;
 margin: 0 0 6px;
 text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.orion-loading-sub {
 font-size: .82rem;
 opacity: .85;
 margin: 0 0 18px;
 font-weight: 400;
}
.orion-loading-bar {
 width: 220px;
 height: 6px;
 background: rgba(255,255,255,.18);
 border-radius: 999px;
 overflow: hidden;
 margin: 0 auto;
 position: relative;
}
.orion-loading-bar::before {
 content: '';
 position: absolute;
 inset: 0;
 width: 40%;
 background: linear-gradient(90deg, var(--orion-accent, #f5a623), #fff, var(--orion-accent, #5cb3ff));
 border-radius: 999px;
 animation: orionBarSlide 1.4s ease-in-out infinite;
}
@keyframes orionBarSlide {
 0% { transform: translateX(-100%); }
 100% { transform: translateX(350%); }
}

/* LOGO di tengah orbital, fixed centered ABSOLUTE supaya tepat di tengah wrap 180×180 */
.orion-loading-logo {
 position: absolute !important;
 top: 50% !important; left: 50% !important;
 transform: translate(-50%, -50%);
 width: 90px !important;
 height: 90px !important;
 object-fit: contain;
 border-radius: 50%;
 background: #fff;
 padding: 10px;
 box-sizing: border-box;
 box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 3px rgba(245,166,35,.25);
 animation: orion-logo-pulse 2.2s ease-in-out infinite;
 z-index: 2;
 pointer-events: none;
}
.orion-loading-logo-fallback {
 display: flex; align-items: center; justify-content: center;
 font-family: 'Segoe UI', Arial, sans-serif;
 font-weight: 900; font-size: 2.4rem;
 color: var(--orion-accent, #f5a623);
}
@keyframes orion-logo-pulse {
 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 3px rgba(245,166,35,.25); }
 50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 6px rgba(245,166,35,.35); }
}

/* LEGACY backward compat, page lama yang masih pakai .orion-tech-anim */
.orion-tech-anim { width: 140px; height: 140px; margin: 0 auto 18px; position: relative; }
.orion-tech-anim svg { width: 100%; height: 100%; }

/* INLINE PLACEHOLDER (shimmer + spinner untuk image Drive) */
.orion-asset-placeholder {
 position: relative;
 background: linear-gradient(110deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
 background-size: 200% 100%;
 animation: orionShimmer 1.4s linear infinite;
 border-radius: 8px;
 overflow: hidden;
 min-height: 120px;
}
.orion-asset-placeholder::after {
 content: '';
 position: absolute; top: 50%; left: 50%;
 width: 36px; height: 36px;
 margin: -18px 0 0 -18px;
 border-radius: 50%;
 border: 3px solid rgba(10,37,64,.15);
 border-top-color: #0a2540;
 animation: orionSpin .9s linear infinite;
}
@keyframes orionShimmer {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
}
@keyframes orionSpin {
 to { transform: rotate(360deg); }
}
.orion-asset-placeholder.loaded {
 animation: none;
 background: transparent;
}
.orion-asset-placeholder.loaded::after {
 display: none;
}

/* DARK THEME COMPAT */
[data-theme="dark"] .orion-asset-placeholder {
 background: linear-gradient(110deg, #1e293b 25%, #334155 50%, #1e293b 75%);
}
[data-theme="dark"] .orion-asset-placeholder::after {
 border-color: rgba(255,255,255,.2);
 border-top-color: #f5a623;
}

/* MOBILE TWEAKS */
@media (max-width: 480px) {
 .orion-rocket-wrap { width: 140px !important; height: 140px !important; min-height: 140px !important; margin: 0 auto 24px !important; }
 .orion-loading-logo { width: 70px !important; height: 70px !important; padding: 8px !important; }
 .orion-loading-label { font-size: 1rem; }
 .orion-loading-sub { font-size: .76rem; }
 .orion-loading-bar { width: 180px; }
}