:root {
  --gold: #f4d49a;
  --gold-soft: #d59f59;
  --progress: 0;
}

* { box-sizing: border-box; }

/* Demo standalone (index.html) */
html.alhambra-loader-demo,
html.alhambra-loader-demo body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html.alhambra-loader-demo body { min-height: 100svh; }

.alhambra-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  color: var(--gold);
  overflow: hidden;
  isolation: isolate;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.background-glow {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(232, 180, 101, 0.09), transparent 18%),
    radial-gradient(circle at center, rgba(232, 180, 101, 0.04), transparent 34%);
  filter: blur(26px);
}

.loader-card {
  position: relative;
  width: min(92vw, 760px);
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2vh, 26px);
  padding: max(16px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
}

.medallion-wrap {
  position: relative;
  width: min(76vw, 62svh, 620px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.medallion-image,
.outer-orbit,
.progress-layer {
  position: absolute;
  inset: 0;
}

.medallion-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  filter:
    saturate(0.96)
    contrast(1.08)
    drop-shadow(0 0 8px rgba(240, 195, 120, 0.08))
    drop-shadow(0 0 20px rgba(183, 119, 48, 0.08));
}

.outer-orbit,
.progress-layer {
  pointer-events: none;
  mix-blend-mode: screen;
}

.outer-orbit {
  inset: -10%;
}

.outer-orbit-svg,
.progress-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.outer-orbit-svg { transform: rotate(-34deg); }
.progress-svg { transform: rotate(-88deg); }

.orbit-arc {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.orbit-arc-1 {
  stroke: rgba(243, 204, 138, 0.38);
  stroke-width: 0.42;
  stroke-dasharray: 24 76;
  filter: drop-shadow(0 0 8px rgba(255, 214, 139, 0.32));
  animation: orbitRotate 18s linear infinite;
}
.orbit-arc-2 {
  stroke: rgba(243, 204, 138, 0.22);
  stroke-width: 0.24;
  stroke-dasharray: 10 90;
  stroke-dashoffset: 58;
  animation: orbitRotateReverse 14s linear infinite;
}
.orbit-arc-3 {
  stroke: rgba(243, 204, 138, 0.16);
  stroke-width: 0.18;
  stroke-dasharray: 14 86;
  stroke-dashoffset: 22;
  animation: orbitRotate 12s linear infinite reverse;
}

.orbit-dot,
.inner-dot {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.orbit-dot::before,
.inner-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.orbit-dot::before {
  top: 3.5%;
  width: clamp(7px, 0.9vw, 14px);
  height: clamp(7px, 0.9vw, 14px);
  background: radial-gradient(circle, #fff8df 0 18%, #ffd48a 45%, rgba(255, 212, 138, 0.22) 70%, transparent 74%);
  box-shadow: 0 0 10px rgba(255, 226, 170, 0.82), 0 0 24px rgba(202, 139, 67, 0.5);
}
.inner-dot::before {
  top: 4%;
  width: clamp(6px, 0.75vw, 12px);
  height: clamp(6px, 0.75vw, 12px);
  background: radial-gradient(circle, #fff9e7 0 15%, #ffd68d 42%, rgba(255, 214, 138, 0.2) 70%, transparent 74%);
  box-shadow: 0 0 8px rgba(255, 229, 179, 0.8), 0 0 18px rgba(205, 145, 73, 0.5);
}
.orbit-dot-a { animation: orbitDotA 8.4s linear infinite; }
.orbit-dot-b { opacity: 0.7; animation: orbitDotB 11.8s linear infinite reverse; }
.inner-dot-a { animation: innerDotA 4.8s linear infinite; }
.inner-dot-b { opacity: 0.68; animation: innerDotB 6.2s linear infinite reverse; }
.inner-dot-b::before { top: 96%; width: clamp(4px, 0.55vw, 8px); height: clamp(4px, 0.55vw, 8px); }

.progress-base,
.progress-track,
.progress-ring,
.progress-sweep {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.progress-base {
  stroke: rgba(246, 208, 151, 0.08);
  stroke-width: 0.52;
}
.progress-track {
  stroke: rgba(246, 208, 151, 0.18);
  stroke-width: 0.74;
}
.progress-ring {
  stroke-width: 1.22;
  stroke-linecap: round;
  stroke-dasharray: var(--progress) 100;
  transition: stroke-dasharray 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-sweep {
  stroke: rgba(255, 240, 209, 0.96);
  stroke-width: 0.78;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  filter: drop-shadow(0 0 8px rgba(255, 230, 181, 0.9)) drop-shadow(0 0 18px rgba(204, 142, 68, 0.62));
  animation: sweepRotate 3s linear infinite;
}

.loader-copy {
  width: min(100%, 440px);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  letter-spacing: 0.045em;
  text-shadow: 0 0 12px rgba(246, 205, 139, 0.3), 0 0 22px rgba(180, 119, 54, 0.14);
}
.loader-title {
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1;
  font-weight: 300;
  color: #f2d2a0;
}
.dot-flow span { display: inline-block; animation: dotPulse 1.2s ease-in-out infinite; }
.dot-flow span:nth-child(2) { animation-delay: 0.16s; }
.dot-flow span:nth-child(3) { animation-delay: 0.32s; }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(240px, 74vw);
  gap: clamp(8px, 1vw, 14px);
  opacity: 0.96;
}
.ornament span {
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, rgba(242, 207, 147, 0.82), rgba(242, 207, 147, 0.28));
}
.ornament span:last-child {
  background: linear-gradient(90deg, rgba(242, 207, 147, 0.28), rgba(242, 207, 147, 0.82), transparent);
}
.nazari-star {
  width: clamp(20px, 1.8vw, 28px);
  height: clamp(20px, 1.8vw, 28px);
  flex: 0 0 auto;
  overflow: visible;
  animation: starBreath 3.4s ease-in-out infinite;
}
.nazari-star path {
  fill: none;
  stroke: #edcb91;
  stroke-width: 2.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(239, 191, 115, 0.42));
}
.loader-percent {
  font-size: clamp(1.15rem, 1.7vw, 1.8rem);
  font-weight: 300;
  color: #f1d4a5;
}
.alhambra-loader.is-complete .loader-title,
.alhambra-loader.is-complete .loader-percent { color: #ffe6bf; }
.alhambra-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

@media (max-width: 767px) {
  .loader-card {
    width: min(96vw, 540px);
    gap: 12px;
    padding-inline: 10px;
  }
  .medallion-wrap { width: min(88vw, 56svh, 470px); }
  .outer-orbit { inset: -8%; }
}
@media (max-width: 430px) {
  .medallion-wrap { width: min(90vw, 52svh, 410px); }
  .loader-title { font-size: clamp(1.2rem, 5vw, 1.5rem); }
  .loader-percent { font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
}
@media (max-height: 690px) {
  .medallion-wrap { width: min(80vw, 48svh, 430px); }
  .loader-card { gap: 10px; }
}

@keyframes sweepRotate { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes orbitRotate { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes orbitRotateReverse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
@keyframes orbitDotA { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitDotB { from { transform: rotate(25deg); } to { transform: rotate(385deg); } }
@keyframes innerDotA { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes innerDotB { from { transform: rotate(18deg); } to { transform: rotate(378deg); } }
@keyframes dotPulse { 0%, 100% { opacity: 0.2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-1px); } }
@keyframes starBreath { 0%, 100% { transform: scale(1); opacity: 0.84; } 50% { transform: scale(1.08); opacity: 1; } }