/* SacredLoader — Цветок Жизни, золото, deep violet-blue, Kirti Dass Kaur */
.sacred-loader {
  --bg-1: #070b22;
  --bg-2: #151737;
  --bg-3: #2a1c3f;
  --bg-4: #4a2848;
  --loader-size: min(72vw, 420px);

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(125, 114, 209, 0.20) 0%, rgba(125, 114, 209, 0) 58%),
    radial-gradient(36% 30% at 16% 100%, rgba(237, 117, 206, 0.18) 0%, rgba(237, 117, 206, 0) 72%),
    radial-gradient(36% 30% at 84% 100%, rgba(255, 146, 214, 0.16) 0%, rgba(255, 146, 214, 0) 72%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 42%, var(--bg-3) 74%, var(--bg-4) 100%);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.sacred-loader::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 231, 180, 0.045), transparent 22%),
    radial-gradient(circle at 50% 85%, rgba(255, 165, 230, 0.07), transparent 36%);
  pointer-events: none;
}
.sacred-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sl-shell {
  position: relative;
  width: var(--loader-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.sl-ambient {
  position: absolute;
  inset: 4% 12% 18% 12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 222, 162, 0.18) 0%,
    rgba(255, 222, 162, 0.04) 38%,
    rgba(255, 222, 162, 0) 68%
  );
  filter: blur(26px);
  opacity: 0.55;
  animation: slHaloPulse 4.8s ease-in-out infinite 2.1s;
  pointer-events: none;
}
.sl-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 0 8px rgba(244, 211, 131, 0.20))
    drop-shadow(0 0 24px rgba(244, 211, 131, 0.10));
}
.sl-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: slBreathe 4.8s ease-in-out infinite 2.35s;
}
.sl-line {
  fill: none;
  stroke: url(#slGoldStroke);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0;
  animation:
    slShow 0.01s linear forwards var(--d),
    slDraw 1.75s cubic-bezier(0.65, 0, 0.35, 1) forwards var(--d),
    slShimmer 4.8s ease-in-out infinite calc(2.35s + var(--d));
}
.sl-ring { stroke-width: 1.15; }
.sl-spark {
  fill: #ffe8ab;
  opacity: 0;
  filter: url(#slTinyGlow);
  animation: slSparkIn 0.7s ease forwards calc(1.95s + var(--d));
}
.sl-fade { opacity: 0.14; }
.sl-signature {
  position: relative;
  z-index: 3;
  margin-top: -2px;
  white-space: nowrap;
  pointer-events: none;
  font-family: "Great Vibes", cursive;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.015em;
  background: linear-gradient(
    180deg,
    #fff6dc 0%,
    #f1d58a 34%,
    #d6a047 68%,
    #b87a28 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter:
    drop-shadow(0 0 4px rgba(255, 224, 150, 0.16))
    drop-shadow(0 0 12px rgba(226, 184, 103, 0.10));
  animation:
    slSigIn 1.4s ease forwards 2.2s,
    slSigGlow 4.8s ease-in-out infinite 3.6s;
}

@keyframes slShow { to { opacity: 0.96; } }
@keyframes slDraw { to { stroke-dashoffset: 0; } }
@keyframes slShimmer { 0%,100% { opacity: 0.88; } 50% { opacity: 1; } }
@keyframes slBreathe {
  0%,100% { transform: scale(1); opacity: 0.98; }
  50%     { transform: scale(1.028); opacity: 1; }
}
@keyframes slHaloPulse {
  0%,100% { opacity: 0.48; transform: scale(0.98); }
  50%     { opacity: 0.72; transform: scale(1.05); }
}
@keyframes slSparkIn {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0.95; transform: scale(1); }
}
@keyframes slSigIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.985);
         filter: drop-shadow(0 0 0 rgba(255, 224, 150, 0)) drop-shadow(0 0 0 rgba(226, 184, 103, 0)); }
  100% { opacity: 1; transform: translateY(0) scale(1);
         filter: drop-shadow(0 0 4px rgba(255, 224, 150, 0.16)) drop-shadow(0 0 12px rgba(226, 184, 103, 0.10)); }
}
@keyframes slSigGlow {
  0%,100% { opacity: 0.88; filter: drop-shadow(0 0 4px rgba(255, 224, 150, 0.14)) drop-shadow(0 0 12px rgba(226, 184, 103, 0.09)); }
  50%     { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 234, 182, 0.22)) drop-shadow(0 0 16px rgba(226, 184, 103, 0.14)); }
}

@media (max-width: 640px) {
  .sacred-loader { --loader-size: min(78vw, 340px); }
  .sl-shell { gap: 14px; }
  .sl-line { stroke-width: 1.2; }
  .sl-ring { stroke-width: 1.05; }
  .sl-signature { margin-top: -4px; font-size: clamp(23px, 5.6vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-line, .sl-core, .sl-ambient, .sl-spark, .sl-signature {
    animation: none; opacity: 1; stroke-dashoffset: 0;
  }
}