/* ================================================================
   Jadoogaran — Page Loader
   All colors via CSS custom properties. No raw values.
   Supports [data-theme=dark] (default) and [data-theme=light].
   ================================================================ */

/* ── Loader-scoped tokens ── */
#arcane-loader {
  --loader-bg:        var(--theme-color-bg-deep);
  --loader-gold:      var(--theme-color-accent);
  --loader-gold-dim:  var(--gold-700);
  --loader-purple:    var(--theme-color-accent-2);
  --loader-surface:   var(--theme-color-surface);
  --loader-text:      var(--theme-color-accent);
  --loader-text-sub:  var(--text-muted, var(--gold-300));
  --loader-blob-1:    color-mix(in srgb, var(--theme-color-accent-2) 18%, transparent);
  --loader-blob-2:    color-mix(in srgb, var(--theme-color-accent) 12%, transparent);
  --loader-particle:  var(--theme-color-accent);
  --loader-ring:      var(--theme-color-accent);

  font-family: "Vazirmatn", "Vazir", Tahoma, Arial, sans-serif;
}

/* Light mode overrides */
:root[data-theme=light] #arcane-loader {
  --loader-bg:       var(--theme-color-bg-deep);
  --loader-gold:     var(--theme-color-accent);
  --loader-gold-dim: var(--gold-900);
  --loader-text:     var(--theme-color-accent);
  --loader-text-sub: var(--gold-900);
  --loader-blob-1:   color-mix(in srgb, var(--theme-color-accent-2) 22%, transparent);
  --loader-blob-2:   color-mix(in srgb, var(--theme-color-accent) 16%, transparent);
}

/* ── Overlay ── */
#arcane-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(
    ellipse 70% 60% at 50% 45%,
    color-mix(in srgb, var(--theme-color-surface) 8%, var(--loader-bg)),
    var(--loader-bg)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

#arcane-loader.arcane-loader--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Scene ── */
.arcane-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  transform: translateY(-3vh);
}

/* ── Ambient blobs ── */
.arcane-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  will-change: transform;
}

.arcane-blob--1 {
  width: 340px;
  height: 340px;
  top: 20%;
  left: 15%;
  background: var(--loader-blob-1);
  animation: blobFloat1 9s ease-in-out infinite;
}

.arcane-blob--2 {
  width: 260px;
  height: 260px;
  bottom: 22%;
  right: 12%;
  background: var(--loader-blob-2);
  animation: blobFloat2 11s ease-in-out infinite;
}

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(24px, -18px) scale(1.06); }
  66%       { transform: translate(-16px, 14px) scale(0.96); }
}

@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-20px, 20px) scale(1.08); }
  75%       { transform: translate(18px, -12px) scale(0.94); }
}

/* ── Magic circle container ── */
.arcane-circle {
  position: relative;
  width: 200px;
  height: 200px;
}

/* ── Rings ── */
.arcane-ring {
  position: absolute;
  inset: 0;
  color: var(--loader-ring);
}

.arcane-ring__svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

.arcane-ring--outer {
  opacity: 0.75;
  animation: ringRotateCW 18s linear infinite;
}

.arcane-ring--mid {
  inset: 7px;
  opacity: 0.55;
  animation: ringRotateCCW 12s linear infinite;
}

.arcane-ring--inner {
  inset: 16px;
  opacity: 0.35;
  animation: ringRotateCW 7s linear infinite;
}

@keyframes ringRotateCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ringRotateCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── Central core ── */
.arcane-core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arcane-star {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  color: var(--loader-gold);
  animation: starPulse 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--loader-gold) 70%, transparent));
}

.arcane-star svg {
  width: 100%;
  height: 100%;
}

@keyframes starPulse {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: 1; }
  50%       { transform: scale(1.12) rotate(18deg); opacity: 0.82; }
}

.arcane-pulse {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--loader-gold) 40%, transparent);
  animation: pulseRing 2.8s ease-out infinite;
}

@keyframes pulseRing {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Floating particles ── */
.arcane-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--loader-particle);
  opacity: 0;
  will-change: transform, opacity;
}

/* Place particles around the circle edge */
.arcane-particle--1 { top: 2px;  left: 50%;  animation: particleFloat 4.2s 0.0s ease-in-out infinite; }
.arcane-particle--2 { top: 50%;  right: 2px; animation: particleFloat 4.2s 0.7s ease-in-out infinite; }
.arcane-particle--3 { bottom: 2px; left: 50%; animation: particleFloat 4.2s 1.4s ease-in-out infinite; }
.arcane-particle--4 { top: 50%;  left: 2px;  animation: particleFloat 4.2s 2.1s ease-in-out infinite; }
.arcane-particle--5 { top: 14px; right: 18px; animation: particleFloat 4.2s 2.8s ease-in-out infinite; }
.arcane-particle--6 { bottom: 14px; left: 18px; animation: particleFloat 4.2s 3.5s ease-in-out infinite; }

@keyframes particleFloat {
  0%   { transform: translate(0, 0)     scale(0.6); opacity: 0; }
  20%  { opacity: 0.9; }
  60%  { opacity: 0.7; }
  100% { transform: translate(0, -28px) scale(0.3); opacity: 0; }
}

/* ── Text ── */
.arcane-text {
  text-align: center;
}

.arcane-text__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--loader-text);
  letter-spacing: 0.03em;
  animation: textGlow 2.8s ease-in-out infinite;
}

.arcane-text__sub {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--loader-text-sub);
  opacity: 0.78;
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%       { text-shadow: 0 0 14px color-mix(in srgb, var(--loader-gold) 45%, transparent); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .arcane-blob,
  .arcane-ring--outer,
  .arcane-ring--mid,
  .arcane-ring--inner,
  .arcane-star,
  .arcane-pulse,
  .arcane-particle {
    animation: none;
  }
  .arcane-star { opacity: 1; }
  .arcane-pulse { display: none; }
  .arcane-particle { opacity: 0.6; }
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .arcane-scene {
    gap: 1.5rem;
    transform: translateY(-2vh) scale(0.9);
  }

  .arcane-blob--1 { width: 220px; height: 220px; }
  .arcane-blob--2 { width: 180px; height: 180px; }

  .arcane-text__title { font-size: 0.95rem; }
  .arcane-text__sub   { font-size: 0.78rem; }
}