/* --- PRESERVED EXACT STYLES (Plus Fade) --- */
#loader { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:#070E1B; background-image:radial-gradient(ellipse at top,#0F1A2A 0%,#070E1B 60%); transition:opacity 0.5s ease; overflow:hidden; }
#loader.hide { animation:loaderFade 0.5s ease forwards; pointer-events:none; }
@keyframes loaderFade { to{opacity:0; visibility:hidden} }

.loader-inner { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.glow1, .glow2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; }
.glow1 { width:280px; height:280px; background:radial-gradient(circle,rgba(0,136,204,.42) 0%,transparent 70%); filter:blur(28px); animation:breathe 2s ease-in-out infinite; }
.glow2 { width:420px; height:420px; background:radial-gradient(circle,rgba(0,136,204,.22) 0%,transparent 70%); filter:blur(52px); animation:breathe 2.8s ease-in-out infinite .4s; }
#ton-logo { width:180px; height:180px; position:relative; z-index:2; animation:logoBreathe 2.4s ease-in-out infinite, logoGlow 1.2s ease forwards; }

@keyframes draw { 0%{stroke-dashoffset:42} 40%{stroke-dashoffset:0} 60%{stroke-dashoffset:0} 100%{stroke-dashoffset:42} }
@keyframes drawBar { 0%{stroke-dashoffset:10} 40%{stroke-dashoffset:0} 60%{stroke-dashoffset:0} 100%{stroke-dashoffset:10} }
@keyframes breathe { 0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.75} 50%{transform:translate(-50%,-50%) scale(1.1);opacity:1} }
@keyframes logoBreathe { 0%,100%{transform:scale(0.98)} 50%{transform:scale(1.04)} }
@keyframes logoGlow { to{filter:drop-shadow(0 0 22px rgba(0,136,204,.85)) drop-shadow(0 0 44px rgba(0,136,204,.4))} }

@media (max-width:480px) { #ton-logo{width:140px;height:140px} .glow1{width:200px;height:200px} .glow2{width:300px;height:300px} }

/* --- NEW SURROUNDING EFFECTS --- */
.loader-grid {
    position: absolute; inset: -100%; z-index: 0; pointer-events: none;
    background-image: 
        linear-gradient(rgba(0, 136, 204, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 136, 204, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: loaderGridPan 15s linear infinite;
}
@keyframes loaderGridPan { 0% { transform: translateY(0); } 100% { transform: translateY(40px); } }

.loader-network { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.loader-network svg { width: 100%; height: 100%; }

.loader-particles {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: loaderParticleDrift 20s linear infinite;
    opacity: 0.5;
}
@keyframes loaderParticleDrift { to { background-position: 200px 200px; } }

.loader-text-container {
    position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%);
    text-align: center; z-index: 5; display: flex; flex-direction: column; gap: 8px; width: 100%;
}
#loader-percent {
    font-family: 'JetBrains Mono', monospace, system-ui; font-size: 32px; font-weight: 800;
    color: #00D1FF; text-shadow: 0 0 15px rgba(0, 209, 255, 0.4); font-variant-numeric: tabular-nums;
}
#loader-status {
    font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase; letter-spacing: 2px; font-family: 'Manrope', system-ui;
    animation: pulseText 1.5s infinite alternate;
}
@keyframes pulseText { 0% { opacity: 0.4; } 100% { opacity: 1; } }