/* ==========================================
   ULTRAKIT PRELOADER
   ========================================== */
.ultrakit-prl-wrapper { --prl-bg: #0f0f23; --prl-a: #a29bfe; --prl-b: #00cec9; --prl-tx: #ffffff; --prl-s: 64px; --prl-z: 999999; --prl-fail: 9s; }
.ultrakit-prl-wrapper *, .ultrakit-prl-wrapper *::before, .ultrakit-prl-wrapper *::after { box-sizing: border-box; }

.ultrakit-prl-overlay { position: fixed; inset: 0; z-index: var(--prl-z); display: flex; align-items: center; justify-content: center; background: var(--prl-bg); color: var(--prl-tx); font-family: inherit; overflow: hidden; opacity: 1; visibility: visible; animation: ukPrlFailsafe 0.4s ease var(--prl-fail) forwards; }
@keyframes ukPrlFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.ultrakit-prl-wrapper.is-js .ultrakit-prl-overlay { animation: none; }
.ultrakit-prl-half { display: none; }
.ultrakit-prl-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 20px; }
.ultrakit-prl-logo { display: block; height: auto; max-width: 70vw; animation: ukPrlLogo 1.8s ease-in-out infinite; }
@keyframes ukPrlLogo { 50% { transform: scale(1.08); opacity: 0.85; } }
.ultrakit-prl-brand { font-size: 22px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.ultrakit-prl-tagline { font-size: 13.5px; font-weight: 600; letter-spacing: 0.5px; opacity: 0.7; }
.ultrakit-prl-pct { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; }
.ultrakit-prl-pct .ultrakit-prl-num { display: inline-block; min-width: 1.7ch; text-align: right; }

/* ---- loaders ---- */
.ultrakit-prl-l { position: relative; display: inline-block; width: var(--prl-s); height: var(--prl-s); }
.ultrakit-prl-l i, .ultrakit-prl-l b { display: block; }
.l-ring i { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--prl-s) / 10) solid color-mix(in srgb, var(--prl-a) 20%, transparent); border-top-color: var(--prl-a); animation: ukPrlSpin 0.9s linear infinite; }
.l-dual i { position: absolute; border-radius: 50%; border: calc(var(--prl-s) / 12) solid transparent; }
.l-dual i:nth-child(1) { inset: 0; border-top-color: var(--prl-a); border-bottom-color: var(--prl-a); animation: ukPrlSpin 1.2s linear infinite; }
.l-dual i:nth-child(2) { inset: 22%; border-left-color: var(--prl-b); border-right-color: var(--prl-b); animation: ukPrlSpin 0.8s linear infinite reverse; }
.l-dots { width: calc(var(--prl-s) * 1.3); height: calc(var(--prl-s) / 3); display: flex; justify-content: space-between; align-items: center; }
.l-dots i { width: calc(var(--prl-s) / 3.4); height: calc(var(--prl-s) / 3.4); border-radius: 50%; background: var(--prl-a); animation: ukPrlBounce 0.9s ease-in-out infinite; }
.l-dots i:nth-child(2) { background: color-mix(in srgb, var(--prl-a), var(--prl-b)); animation-delay: 0.15s; }
.l-dots i:nth-child(3) { background: var(--prl-b); animation-delay: 0.3s; }
.l-bars { display: flex; align-items: center; justify-content: space-between; width: var(--prl-s); }
.l-bars i { width: calc(var(--prl-s) / 8); height: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--prl-a), var(--prl-b)); animation: ukPrlBar 1s ease-in-out infinite; }
.l-bars i:nth-child(2) { animation-delay: 0.1s; } .l-bars i:nth-child(3) { animation-delay: 0.2s; } .l-bars i:nth-child(4) { animation-delay: 0.3s; } .l-bars i:nth-child(5) { animation-delay: 0.4s; }
.l-pulse i { position: absolute; inset: 0; border-radius: 50%; background: var(--prl-a); opacity: 0.7; animation: ukPrlPulse 1.6s ease-out infinite; }
.l-pulse i:nth-child(2) { background: var(--prl-b); animation-delay: 0.8s; }
.l-orbit b { position: absolute; inset: 34%; border-radius: 50%; background: linear-gradient(135deg, var(--prl-a), var(--prl-b)); box-shadow: 0 0 22px var(--prl-a); }
.l-orbit i { position: absolute; inset: 0; animation: ukPrlSpin 1.6s linear infinite; }
.l-orbit i::after { content: ""; position: absolute; top: 0; left: 50%; width: calc(var(--prl-s) / 6); height: calc(var(--prl-s) / 6); margin-left: calc(var(--prl-s) / -12); border-radius: 50%; background: var(--prl-a); }
.l-orbit i:nth-child(3) { animation-duration: 2.4s; animation-direction: reverse; inset: 10%; }
.l-orbit i:nth-child(3)::after { background: var(--prl-b); }
.l-orbit i:nth-child(4) { animation-duration: 3.2s; inset: -8%; }
.l-orbit i:nth-child(4)::after { background: color-mix(in srgb, var(--prl-a), #ffffff 50%); width: calc(var(--prl-s) / 9); height: calc(var(--prl-s) / 9); }
.l-flip i { position: absolute; inset: 12%; border-radius: 12%; background: linear-gradient(135deg, var(--prl-a), var(--prl-b)); animation: ukPrlFlip 1.4s ease-in-out infinite; }
.l-progress { width: min(340px, 70vw); height: auto; }
.ultrakit-prl-track { display: block; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--prl-tx) 15%, transparent); overflow: hidden; }
.ultrakit-prl-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--prl-a), var(--prl-b)); box-shadow: 0 0 14px var(--prl-a); transition: width 0.25s ease-out; }
.l-text { display: flex; width: auto; height: auto; font-size: calc(var(--prl-s) * 0.75); font-weight: 900; letter-spacing: 4px; line-height: 1; }
.l-text i { font-style: normal; background: linear-gradient(135deg, var(--prl-a), var(--prl-b)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(40%); animation: ukPrlLetter 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.09s); }

@keyframes ukPrlSpin { to { transform: rotate(360deg); } }
@keyframes ukPrlBounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-140%) scale(1.15); } }
@keyframes ukPrlBar { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes ukPrlPulse { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ukPrlFlip { 0% { transform: perspective(160px) rotateX(0) rotateY(0); } 50% { transform: perspective(160px) rotateX(-180deg) rotateY(0); } 100% { transform: perspective(160px) rotateX(-180deg) rotateY(-180deg); } }
@keyframes ukPrlLetter { 0%, 100% { opacity: 0; transform: translateY(40%); } 30%, 70% { opacity: 1; transform: none; } }

/* ---- exit effects ---- */
.ultrakit-prl-overlay { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.77,0,.18,1), clip-path 0.9s cubic-bezier(.77,0,.18,1), visibility 0s linear 0.9s; }
.ultrakit-prl-wrapper.is-done .ultrakit-prl-overlay { opacity: 0; visibility: hidden; pointer-events: none; }
.prl-exit-up.is-done .ultrakit-prl-overlay { opacity: 1; transform: translateY(-100%); }
.prl-exit-down.is-done .ultrakit-prl-overlay { opacity: 1; transform: translateY(100%); }
.prl-exit-zoom.is-done .ultrakit-prl-overlay { transform: scale(1.6); }
.prl-exit-circle .ultrakit-prl-overlay { clip-path: circle(150% at 50% 50%); }
.prl-exit-circle.is-done .ultrakit-prl-overlay { opacity: 1; clip-path: circle(0% at 50% 50%); }
/* curtain: two halves slide apart */
.prl-exit-curtain .ultrakit-prl-overlay { background: transparent; }
.prl-exit-curtain .ultrakit-prl-half { display: block; position: absolute; left: 0; right: 0; height: 50.5%; background: var(--prl-bg); transition: transform 0.9s cubic-bezier(.77,0,.18,1); }
.prl-exit-curtain .ultrakit-prl-half.is-top { top: 0; }
.prl-exit-curtain .ultrakit-prl-half.is-bottom { bottom: 0; }
.prl-exit-curtain.is-done .ultrakit-prl-overlay { opacity: 1; }
.prl-exit-curtain.is-done .ultrakit-prl-half.is-top { transform: translateY(-101%); }
.prl-exit-curtain.is-done .ultrakit-prl-half.is-bottom { transform: translateY(101%); }
.prl-exit-curtain.is-done .ultrakit-prl-center { opacity: 0; transition: opacity 0.35s ease; }
.ultrakit-prl-wrapper.is-removed { display: none; }

/* ---- editor ---- */
.prl-editor .ultrakit-prl-overlay { display: none; }
.prl-editor.is-previewing .ultrakit-prl-overlay { display: flex; }
.ultrakit-prl-editorcard { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px; border-radius: 16px; background: linear-gradient(135deg, var(--prl-bg), #1b1b40); color: var(--prl-tx); text-align: center; font-size: 13px; }
.ultrakit-prl-editorcard strong { font-size: 17px; }
.ultrakit-prl-preview { padding: 10px 20px !important; box-sizing: border-box; background: linear-gradient(135deg, var(--prl-a), var(--prl-b)); color: #0f0f23 !important; border: 0; border-radius: 40px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.prl-editor .ultrakit-prl-overlay { animation: none; }

html.ultrakit-prl-lock, html.ultrakit-prl-lock body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .ultrakit-prl-l *, .ultrakit-prl-logo { animation-duration: 3s !important; } }
