/* loader.css — the site's loading overlay.
   Pairs with loader.js, which injects the markup. See that file for the why.

   The look: a gold ring spinning around the DT mark, on the page's own background.
   Nothing here is page-specific, so any page can adopt it by linking both files. */

#dt-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(var(--acc-deep-rgb,244,165,0),.10), transparent 62%),
    #0e1015;
  /* starts hidden: loader.js only reveals it if loading actually takes a while, so a
     fast page never shows a flash of spinner. See DELAY in loader.js. */
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, visibility 0s linear .28s;
}
#dt-loader.on{
  opacity:1;
  visibility:visible;
  transition:opacity .18s ease, visibility 0s;
}

/* the ring + mark share one box so the ring is always concentric with the logo */
#dt-loader .dt-ring{
  position:relative;
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
}
/* the track: a faint full circle so the gap in the spinner reads as motion, not damage */
#dt-loader .dt-ring::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid rgba(var(--acc-rgb,255,216,74),.13);
}
/* the sweep: one lit arc, rotating */
#dt-loader .dt-ring::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:var(--acc,#FFD84A);
  border-right-color:rgba(var(--acc-rgb,255,216,74),.45);
  animation:dt-spin .85s linear infinite;
  filter:drop-shadow(0 0 6px rgba(var(--acc-deep-rgb,244,165,0),.55));
}
#dt-loader .dt-mark{
  width:78px;
  height:78px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 14px rgba(var(--acc-deep-rgb,244,165,0),.45));
  animation:dt-pulse 1.9s ease-in-out infinite;
}
#dt-loader .dt-label{
  font-family:'Oswald',sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#8B92A3;
}

@keyframes dt-spin{ to{ transform:rotate(360deg); } }
@keyframes dt-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }

/* A spinner is decoration; someone who asked for less motion should not get a
   permanently rotating element. The ring stays as a static lit arc instead. */
@media (prefers-reduced-motion:reduce){
  #dt-loader .dt-ring::after{ animation:none; }
  #dt-loader .dt-mark{ animation:none; }
}