/* ==========================================================================
   HasanWebs page loader (2026-10-09). Markup/JS: inc/page-loader.php.
   Static HW mark + static orange track + one rotating orange segment. No text.
   Visibility is driven by html.hw-loading (critical rules are inlined in <head>).
   Dark Mode = html[data-theme="dark"], same switch as dark-mode.css.
   ========================================================================== */

.hw-loader {
  --hw-ring: clamp(82px, 76px + 1.6vw, 90px);
  --hw-icon: clamp(52px, 47px + 1vw, 58px);
  --hw-track: 3px;
  --hw-orange: #C15113;
  --hw-track-color: rgba(193, 81, 19, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
/* Light-mode Blog / archive / article pages use a white canvas; everything else uses the cream canvas. */
body:is(.blog, .category, .tag, .search, .author, .date, .single-post) .hw-loader { background: #FFFFFF; }
html[data-theme="dark"] body .hw-loader {
  background: #1A1915;
  --hw-track-color: rgba(193, 81, 19, .30);
}

/* Static track (does not move). */
.hw-loader__ring {
  position: relative;
  display: block;
  box-sizing: border-box;
  flex: none;
  width: var(--hw-ring);
  height: var(--hw-ring);
  border: var(--hw-track) solid var(--hw-track-color);
  border-radius: 50%;
}
/* The only moving part: a uniform-thickness arc laid exactly over the track, rotating clockwise. */
.hw-loader__ring::after {
  content: "";
  position: absolute;
  inset: calc(var(--hw-track) * -1);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 250deg, var(--hw-orange) 250deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--hw-track)), #000 calc(100% - var(--hw-track)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--hw-track)), #000 calc(100% - var(--hw-track)));
  animation: hw-loader-spin .9s linear infinite;
  will-change: transform;
}
@keyframes hw-loader-spin { to { transform: rotate(360deg); } }

/* Light Mode mark: the approved original HW icon (media ID 318, 452x512), centred and static. */
.hw-loader__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  height: calc(var(--hw-icon) * 512 / 505);
  width: calc(var(--hw-icon) * 452 / 505);
  background: url("/wp-content/uploads/2026/09/hasanwebs-hw-icon-concept-12.png") center / 100% 100% no-repeat;
}
/* Dark Mode mark: only the HW mark of the approved white logo (media ID 321, 800x165; mark = x 2-145, y 2-162).
   Window is x 0-147 of the source (the wordmark starts at x 172), scaled so the mark is --hw-icon tall. */
html[data-theme="dark"] .hw-loader__mark {
  height: calc(var(--hw-icon) * 165 / 161);
  width: calc(var(--hw-icon) * 147 / 161);
  background: url("/wp-content/uploads/2026/10/hasanwebs-logo-horizontal-white-concept-12.png") 0 0 / calc(var(--hw-icon) * 800 / 161) calc(var(--hw-icon) * 165 / 161) no-repeat;
}

/* Tablet 768-1023 */
@media (min-width: 768px) {
  .hw-loader {
    --hw-ring: clamp(98px, 90px + 1vw, 106px);
    --hw-icon: clamp(62px, 56px + .8vw, 68px);
  }
}
/* Laptop 1024-1439 */
@media (min-width: 1024px) {
  .hw-loader {
    --hw-ring: clamp(116px, 108px + .8vw, 124px);
    --hw-icon: clamp(72px, 66px + .6vw, 78px);
    --hw-track: 4px;
  }
}
/* Large desktop 1440+ */
@media (min-width: 1440px) {
  .hw-loader {
    --hw-ring: clamp(132px, 122px + .8vw, 140px);
    --hw-icon: clamp(82px, 76px + .6vw, 88px);
  }
}

/* Reduced motion: no rotation; the track plus a static orange arc remain as the loading indication. */
@media (prefers-reduced-motion: reduce) {
  .hw-loader__ring::after { animation: none; will-change: auto; }
}
@media print { .hw-loader { display: none !important; } }