@view-transition { navigation: auto; }
::view-transition-old(root) { animation: loader-page-out .65s cubic-bezier(.65,0,.35,1) both; }
::view-transition-new(root) { animation: store-page-in .85s cubic-bezier(.18,.72,.2,1) both; }
::view-transition-group(root) { animation-duration: .85s; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; }
html { background: #0b0e17; }
body { overflow: hidden; background: #0b0e17; color: #f4efff; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.loader-screen { position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; background: transparent; opacity: 1; transform: scale(1); filter: blur(0); transition: opacity .92s cubic-bezier(.22,.72,.2,1), transform 1.05s cubic-bezier(.22,.72,.2,1), filter .92s ease; animation: loader-page-in .85s cubic-bezier(.18,.72,.2,1) both; }
.loader-video-background { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0b0e17; pointer-events: none; }
.loader-video-background video { position: absolute; inset: -5%; width: 110%; height: 110%; object-fit: cover; filter: blur(2px) brightness(.28) saturate(.7); opacity: .65; }
.loader-video-background span { position: absolute; inset: 0; background: rgba(5,7,14,.46); }
.loader-screen::after { position: absolute; z-index: 2; inset: -20%; background: radial-gradient(ellipse at center, #4c279438 0%, #20365c22 28%, transparent 66%); opacity: 0; transform: scale(.72); filter: blur(22px); transition: opacity .88s ease, transform 1.05s cubic-bezier(.18,.72,.2,1), filter .92s ease; content: ""; pointer-events: none; }
.loader-screen.is-exiting { opacity: 0; transform: scale(1.045); filter: blur(5px); pointer-events: none; }
.loader-screen.is-exiting::after { opacity: 1; transform: scale(1.12); filter: blur(36px); }
.loader-particles { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.loader-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(440px, calc(100% - 34px)); padding: 14px 0; text-align: center; animation: loader-arrive .95s .06s cubic-bezier(.2,.7,.2,1) both; transition: opacity .62s ease, transform .88s cubic-bezier(.2,.72,.2,1), filter .72s ease; }
.loader-screen.is-exiting .loader-content { opacity: 0; transform: translateY(-12px) scale(.965); filter: blur(4px); }
.loader-logo-orbit { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto 10px; transition: transform .24s ease, filter .24s ease; }
.loader-logo-orbit:hover { transform: translateY(-4px); filter:drop-shadow(0 0 12px #64abf799); }
.loader-logo { position: relative; z-index: 2; width: 78px; height: 78px; object-fit: cover; border: 1px solid #7840b488; border-radius: 50%; box-shadow: 0 0 24px #8e35ff48, 0 0 54px #5916a628; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; animation: logo-float 3s ease-in-out infinite; }
.loader-logo:hover { transform: scale(1.04); border-color:#64abf7; box-shadow:0 0 20px #64abf7aa, 0 0 48px #64abf766; }
.loader-ring { position: absolute; inset: 15px; border: 1px solid #a9b8d13b; border-radius: 50%; box-shadow: 0 0 10px #789de211; animation: ring-spin 10s linear infinite; }
.loader-ring-two { inset: 23px; border-color: #b2a1db30; border-style: solid; animation-direction: reverse; animation-duration: 14s; }
.loader-logo-orbit:hover .loader-ring { border-color:#90c3f9; box-shadow:0 0 20px #64abf788; }
.loader-orbit-dot { position: absolute; z-index: 3; top: 50%; left: 50%; width: 6px; height: 6px; border: 1px solid #ffffff; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#fff,#e9f2ff 68%,#b7c9e8); box-shadow: 0 0 4px 1px #fff, 0 0 11px 3px #d8e8ff88; transform: translate(-50%,-50%) rotate(0deg) translateX(54px); animation: dot-circle 2.8s linear infinite; pointer-events: none; }
.loader-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 25px; padding: 6px 13px; border: 1px solid #562b78a8; border-radius: 30px; background: #120e1bcc; color: #e0d6f2; font: 800 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.loader-badge i { width: 7px; height: 7px; border-radius: 50%; background: #00d59b; box-shadow: 0 0 10px #00d59b; animation: online-pulse 1.6s ease-in-out infinite; }
.loader-badge b { color: #a46aff; }
.loader-title { margin: 14px 0 0; color: #f5f0ff; font-size: clamp(33px, 6vw, 43px); font-weight: 950; line-height: 1; letter-spacing: .045em; text-shadow: 0 0 24px #9238ff44; }
.loader-title span { background: linear-gradient(95deg, #c9a3ff, #a342ff 58%, #7733ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.loader-subtitle { margin: 8px 0 23px; color: #a9a1b7; font: 800 9px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .28em; }
.loader-panel { width: min(300px, 100%); padding: 15px 16px 13px; border: 1px solid #302a3a; border-radius: 16px; background: rgba(15,14,21,.94); box-shadow: 0 16px 42px #0006, inset 0 1px #ffffff08; }
.loader-panel-head { display: flex; justify-content: space-between; align-items: center; color: #d0c8da; font: 800 8px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.loader-panel-head b { margin-right: 6px; color: #a145ff; font-size: 12px; }
.loader-panel-head strong { color: #ba78ff; font-size: 9px; }
.loader-track { position: relative; height: 9px; margin: 10px 0 11px; overflow: visible; border: 1px solid #38323e; border-radius: 10px; background: #09090d; cursor: pointer; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; }
.loader-track:hover { transform: translateY(-4px); border-color:#64abf7; box-shadow:0 0 18px #64abf7bb, 0 8px 20px #64abf735; }
.loader-progress { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7318e8, #be31ff 62%, #ef3be9); box-shadow: 0 0 13px #a32aff99; will-change: width; transition: width .025s linear; }
.loader-progress-orb { position: absolute; top: 50%; left: var(--progress-position, 0%); width: 8px; height: 8px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px #e9c8ff; pointer-events: none; }
.loader-detail { margin: 0; color: #988ca9; font: italic 8px/1.4 ui-monospace, Consolas, monospace; }
.loader-status-chips { display: flex; flex-wrap: nowrap; justify-content: center; gap: 7px; width: 100%; margin-top: 21px; }
.loader-status-chips span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 83px; padding: 9px 8px; border: 1px solid #302a3a; border-radius: 13px; background: #111016d9; color: #c8c0d2; font: 800 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .025em; }
.loader-status-chips i { font-size: 10px; font-style: normal; }.chip-purple { color: #b35eff; }.chip-green { color: #00dda2; }.chip-blue { color: #35caff; }.chip-pink { color: #ff608c; }
.loader-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 19px; min-width: 170px; margin: 15px auto 0; padding: 11px 19px; overflow: hidden; border: 1px solid #7644a7a8; border-radius: 10px; background: linear-gradient(100deg, #31164e, #542181); color: #fff; font: 900 9px/1 Inter, system-ui, sans-serif; letter-spacing: .13em; box-shadow: 0 7px 24px #7924c22b; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease; animation: button-pulse 2s ease-in-out infinite; }
.loader-button::before { position: absolute; top: -60%; left: -45%; width: 30%; height: 220%; transform: rotate(24deg); background: linear-gradient(90deg, transparent, #ffffff55, transparent); content: ""; animation: button-shine 2.8s ease-in-out infinite; }
.loader-button:disabled { cursor: wait; }.loader-button:not(:disabled) { cursor: pointer; }.loader-button:hover { transform: translateY(-4px); border-color:#64abf7; filter:brightness(1.08); box-shadow:0 0 22px #64abf7bb, 0 10px 30px #64abf755; }.loader-button span { position: relative; }
@keyframes ring-spin { to { transform: rotate(360deg); } }@keyframes orbit-pulse { 0%,100% { transform: scale(.78); opacity:.38; } 50% { transform: scale(1.14); opacity:.92; } }@keyframes logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }@keyframes dot-circle { from { transform: translate(-50%,-50%) rotate(0deg) translateX(54px); } to { transform: translate(-50%,-50%) rotate(360deg) translateX(54px); } }@keyframes loader-arrive { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }@keyframes button-pulse { 0%,100% { box-shadow: 0 7px 22px #7924c22b; } 50% { box-shadow: 0 0 20px #a342ff66, 0 8px 30px #7924c255; } }@keyframes button-shine { 0%,62% { left: -45%; } 100% { left: 125%; } }@keyframes loader-page-in { from { opacity: 0; transform: scale(1.025); filter: blur(5px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }@keyframes loader-page-out { to { opacity: 0; transform: scale(1.035); filter: blur(7px); } }@keyframes store-page-in { from { opacity: 0; transform: scale(.985); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }@keyframes online-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (max-width: 480px) { .loader-logo-orbit { width: 122px; height: 122px; }.loader-logo { width: 72px; height: 72px; }.loader-title { font-size: clamp(30px,8vw,37px); }.loader-status-chips { gap: 5px; }.loader-status-chips span { min-width: 0; flex: 1; padding: 8px 5px; font-size: 6px; }.loader-button { margin-top: 13px; } }
@media (max-height: 630px) { .loader-content { transform: scale(.86); padding: 6px 0; }.loader-logo-orbit { width: 108px; height: 108px; margin-bottom: 7px; }.loader-logo { width: 68px; height: 68px; }.loader-title { margin-top: 10px; }.loader-subtitle { margin-bottom: 14px; }.loader-status-chips { margin-top: 13px; } }
@media (prefers-reduced-motion: reduce) { .loader-content,.loader-logo,.loader-ring,.loader-button,.loader-button::before,.loader-badge i { animation: none; }.loader-screen,.loader-screen::after,.loader-screen.is-exiting,.loader-content,.loader-button,.loader-track { transition: none; } ::view-transition-old(root),::view-transition-new(root) { animation-duration: .01ms; } }
/* Hover response for the initialization badge and status chips. */
.loader-badge,.loader-status-chips span { position: relative; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.loader-badge:hover,.loader-status-chips span:hover { transform: translateY(-4px); border-color:#64abf7; background: linear-gradient(120deg,#211b28,#2a2119); box-shadow:0 0 16px #64abf799, 0 7px 18px #64abf735; }
.loader-status-chips span:hover i { filter:drop-shadow(0 0 5px #64abf7); }
.loader-progress-orb { transition: left .025s linear; }

/* Red lightning palette and a clearer thunder backdrop. */
.loader-video-background video { filter: blur(2px) brightness(.5) saturate(1.15); opacity: .82; }
.loader-video-background span { background: rgba(5,7,14,.28); }
.loader-screen::after { background: radial-gradient(ellipse at center, #8b142538 0%, #36101c22 28%, transparent 66%); }
.loader-logo { border-color: #a72a3d88; box-shadow: 0 0 24px #ff304848, 0 0 54px #c5122828; }
.loader-ring { border-color: #ff647433; box-shadow: 0 0 10px #ff304022; }
.loader-ring-two { border-color: #ff53652e; }
.loader-orbit-dot { border-color: #ffb2ba; background: radial-gradient(circle at 35% 30%,#fff1f2,#ff6376 68%,#d31835); box-shadow: 0 0 5px 2px #ff5365, 0 0 15px 5px #ff203eaa; }
.loader-badge { border-color: #923244a8; }
.loader-badge b,.loader-panel-head b,.loader-panel-head strong { color: #ff697b; }
.loader-title { text-shadow: 0 0 24px #ff344644; }
.loader-title span { background: linear-gradient(95deg,#ffb6bf,#ff4d64 58%,#d71935); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.loader-track:hover { border-color:#61aaf7; box-shadow:0 0 18px #3a94f588, 0 8px 20px #3a94f530; }
.loader-progress { background: linear-gradient(90deg,#760b1b,#d51b36 62%,#ff687b); box-shadow: 0 0 13px #ff304e99; }
.loader-progress-orb { box-shadow: 0 0 8px 2px #ff9ba8; }
.chip-purple { color: #ff8492; }
.loader-button { border-color: #c33449aa; background: linear-gradient(100deg,#700b1b,#d3243e); box-shadow: 0 7px 24px #d3243e3b; }
.loader-button:hover { border-color:#78b6f8; box-shadow:0 0 22px #459af588, 0 10px 30px #2382e84f; }
@keyframes button-pulse { 0%,100% { box-shadow: 0 7px 22px #d3243e38; } 50% { box-shadow: 0 0 20px #ff425c88, 0 8px 30px #d3243e66; } }

/* Final loading-window tune: sharper thunder, maroon action button, blue hover glow. */
.loader-video-background video { filter: blur(.4px) brightness(.58) contrast(1.15) saturate(1.2); opacity: .88; }
.loader-video-background span { background: rgba(5,7,14,.22); }
.loader-button { border-color:#9c263d!important;background:linear-gradient(100deg,#4a0a19,#76152b)!important;box-shadow:0 7px 24px #76152b55!important; }
.loader-button:hover { border-color:#68b8ff!important;box-shadow:0 0 22px #369cffaa,0 10px 30px #248bff66!important; }
.loader-title span{background:none!important;color:#681329!important;-webkit-text-fill-color:#681329!important;text-shadow:none!important;filter:none!important}