/* ==========================================================================
   DGTechQA — Status bar, bigger + animated aurora background (desktop)
   Loaded after the older status-bar styles in index.html so it overrides them.
   To revert: remove the <link> to statusbar-premium.css in index.html.
   ========================================================================== */
@property --sb2-ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes sb2Aurora { 0%{ background-position:0% 0%, 100% 0%, 50% 100%, 0 0; } 50%{ background-position:60% 40%, 40% 60%, 20% 30%, 24px 0; } 100%{ background-position:100% 0%, 0% 100%, 80% 70%, 48px 0; } }
@keyframes sb2Rise   { 0%{ transform:translateY(8px); opacity:0; } 20%{ opacity:.9; } 100%{ transform:translateY(-60px); opacity:0; } }
@keyframes sb2Scan   { 0%,40%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
@keyframes sb2Float  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes sb2Spin   { to{ --sb2-ang:360deg; } }
@keyframes sb2Beat   { 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.35); } 28%{ transform:scale(1); } 42%{ transform:scale(1.2); } }
@keyframes sb2Bar    { 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

html body .statusbar{
  position:relative; overflow:hidden; border-bottom:0 !important;
  background:
    radial-gradient(40% 140% at 12% 20%, rgba(228,37,39,.38), transparent 70%),
    radial-gradient(40% 140% at 88% 30%, rgba(34,109,180,.46), transparent 70%),
    radial-gradient(36% 130% at 50% 110%, rgba(13,148,136,.36), transparent 70%),
    linear-gradient(90deg,#070b18 0%,#0d1730 50%,#070b18 100%) !important;
  background-size:160% 160%, 160% 160%, 160% 160%, 100% 100% !important;
  animation:sb2Aurora 14s ease-in-out infinite alternate;
  box-shadow:0 10px 30px -14px rgba(8,16,40,.7);
}
/* faint moving tech grid over the aurora */
html body .statusbar .container::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:24px 24px; animation:sb2Aurora 14s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
}
/* rising glow particles */
html body .statusbar .container::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:100%; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1.5px,transparent 2.5px) 6% 90%/90px 60px no-repeat,
    radial-gradient(circle,rgba(124,196,255,.9) 0 1.5px,transparent 2.5px) 22% 80%/110px 60px no-repeat,
    radial-gradient(circle,rgba(255,200,61,.9) 0 2px,transparent 3px) 41% 92%/120px 60px no-repeat,
    radial-gradient(circle,rgba(255,255,255,.8) 0 1.5px,transparent 2.5px) 58% 84%/100px 60px no-repeat,
    radial-gradient(circle,rgba(255,110,110,.9) 0 2px,transparent 3px) 74% 94%/120px 60px no-repeat,
    radial-gradient(circle,rgba(110,231,214,.9) 0 1.5px,transparent 2.5px) 90% 86%/90px 60px no-repeat;
  animation:sb2Rise 5.5s ease-out infinite;
}
/* moving light scan */
html body .statusbar::before{
  content:""; position:absolute; inset:0; left:0 !important; top:0; width:100% !important; height:100%; transform:none; z-index:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%); animation:sb2Scan 6s ease-in-out infinite;
}
/* flowing rainbow line at the bottom (thicker) */
html body .statusbar::after{ height:3px !important; opacity:1; background-size:250% 100% !important; animation:sbFlow 5s linear infinite; z-index:2; }

/* bigger bar */
html body .statusbar .container{ position:relative; min-height:56px !important; padding-top:8px !important; padding-bottom:8px !important; }
html body .statusbar .container > *{ position:relative; z-index:1; }
html body .status-left{ gap:14px !important; }
html body .status-left::before{ font-size:20px !important; margin-right:6px !important; color:#ff5558 !important; }

/* bigger glass pills */
html body .statusbar .status-left .status-item{
  position:relative; overflow:hidden; gap:11px !important; padding:9px 20px 9px 16px !important; border-radius:999px !important;
  font-size:14px !important; font-weight:700 !important; color:rgba(226,232,240,.95) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -8px var(--sb-c);
  animation:sbIn .6s cubic-bezier(.22,1,.36,1) both, sb2Float 4s ease-in-out infinite;
}
html body .statusbar .status-left .status-item:nth-child(2){ animation-delay:.25s, .4s; }
html body .statusbar .status-left .status-item:nth-child(3){ animation-delay:.4s, .8s; }
html body .statusbar .status-left .status-item::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transition:left .6s ease;
}
html body .statusbar .status-left .status-item:hover::after{ left:130%; }
html body .statusbar .status-left .status-item:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 0 22px -2px var(--sb-c), inset 0 1px 0 rgba(255,255,255,.3); }
html body .statusbar .status-item span[id]{ font-size:19px !important; font-weight:800 !important; color:#fff !important; text-shadow:0 0 14px var(--sb-c); }
html body .statusbar .dot, html body .statusbar .dot.amber{ width:10px !important; height:10px !important; animation:sb2Beat 2.2s ease-in-out infinite !important; }
html body .statusbar .dot::after{ animation-duration:1.6s; }

/* big live clock with spinning gradient ring + equaliser bars */
html body #clock{
  position:relative; gap:12px !important; padding:9px 22px 9px 18px !important; font-size:18px !important; font-weight:800 !important; letter-spacing:.07em !important;
  border-radius:999px !important; border:2px solid transparent !important; color:#fff !important; text-shadow:0 0 14px rgba(124,196,255,.7);
  background:linear-gradient(#0b1328,#0b1328) padding-box, conic-gradient(from var(--sb2-ang),#e42527,#f9b21d,#0d9488,#226db4,#e42527) border-box !important;
  animation:sb2Spin 4s linear infinite !important; box-shadow:0 0 24px -6px rgba(34,109,180,.9);
}
html body #clock::before{ width:9px !important; height:9px !important; }
html body #clock::after{
  content:""; width:18px; height:16px; margin-left:2px; flex:none;
  background:
    linear-gradient(#7cc4ff,#7cc4ff) 0 100%/3px 100% no-repeat,
    linear-gradient(#f9b21d,#f9b21d) 5px 100%/3px 100% no-repeat,
    linear-gradient(#ff5558,#ff5558) 10px 100%/3px 100% no-repeat,
    linear-gradient(#6ee7d6,#6ee7d6) 15px 100%/3px 100% no-repeat;
  transform-origin:bottom; animation:sb2Bar 1.1s ease-in-out infinite;
}

@media (max-width:1100px){
  html body .statusbar .status-left .status-item{ padding:8px 15px 8px 13px !important; font-size:13px !important; }
  html body .statusbar .status-item span[id]{ font-size:17px !important; }
  html body #clock{ font-size:16px !important; }
}
@media (max-width:768px){
  html body .statusbar .container{ min-height:48px !important; }
  html body #clock::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  html body .statusbar, html body .statusbar *, html body .statusbar::before, html body .statusbar .container::after, html body #clock, html body #clock::after{ animation:none !important; }
}