/* ============================
   KING'S CAVE — SCISSORS LOADER
   Círculo estático + color alterna
   Progreso sincronizado con tijeras
   ============================ */
* {
  font-family: "Lora" !important;
  font-optical-sizing: auto;
}
/* Overlay pantalla completa */
.kc-loaderOverlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;

  /* Ajusta a tu estética (oscuro elegante) */
  background: rgba(17, 66, 46, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.kc-loaderOverlay.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Tamaños/tiempos principales aquí */
.kc-loader{
  --size: 12rem;

  /* Duración vuelta completa (tijera + progreso) */
  --dur: 2.8s;

  /* Snip (abrir/cerrar) */
  --durSnip: 0.12s;
  --snipDeg: 10deg;

  /* r=41 en viewBox 100 => 41% del tamaño */
  --orbitR: calc(var(--size) * 0.41);

  /* Circunferencia aprox para r=41: 2πr ≈ 257.6 */
  --C: 258;

  /* Ajuste fino de fase */
  --phase: 0deg;

  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* ARO (NO gira) */
.kc-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;

  transform: rotate(calc(-90deg + var(--phase)));
  transform-origin: 50% 50%;
}

/* Punteado común */
.kc-dots{
  fill:none;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 2.0 4.8;
  opacity: 1;
}

/* Colores */
.kc-gold{ stroke:#D6B15D; }
.kc-gray{ stroke: rgba(140,140,140,.80); }

/* Máscaras (trazo sólido, NO punteado) */
.kc-maskStroke,
.kc-maskStrokeInv{
  fill:none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 0 var(--C);
  stroke-dashoffset: 0;
  animation: kc-progress var(--dur) linear infinite;
}

.kc-maskStroke{ stroke: white; }
.kc-maskStrokeInv{ stroke: black; }

/* Alternancia por vueltas (2 * dur) */
.kc-phase{
  opacity: 0;
  animation: kc-phaseToggle calc(var(--dur) * 2) steps(1, end) infinite;
}
.kc-phase--a{ animation-delay: 0s; }
.kc-phase--b{ animation-delay: var(--dur); }

@keyframes kc-phaseToggle{
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes kc-progress{
  from{
    stroke-dasharray: 0 var(--C);
    stroke-dashoffset: 0;
  }
  to{
    stroke-dasharray: var(--C) 0;
    stroke-dashoffset: calc(var(--C) * -1);
  }
}

/* TIJERAS */
.kc-orbit{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:3;
  animation: kc-rotate var(--dur) linear infinite;
}

.kc-scissors{
  position:absolute;
  width: 5.6rem;
  height: 5.6rem;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
             translateY(calc(-1 * var(--orbitR)))
             rotate(90deg);

  filter: drop-shadow(0 14px 16px rgba(0,0,0,.18));
}

@keyframes kc-rotate{
  to{ transform: rotate(360deg); }
}

.kc-path{
  fill: url(#kcGold);
  stroke: rgba(0,0,0,.40);
  stroke-width: 120;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.kc-holeOutline circle{
  fill: none;
  stroke: rgba(0,0,0,.18);
  stroke-width: 70;
  pointer-events:none;
}

.kc-blade{
  transform-origin: 2400px 2624px;
  animation: kc-snip var(--durSnip) ease-in-out infinite;
}
.kc-blade--left{ animation-direction: alternate; }
.kc-blade--right{ animation-direction: alternate-reverse; }

@keyframes kc-snip{
  from{ transform: rotate(var(--snipDeg)); }
  to  { transform: rotate(calc(var(--snipDeg) * -1)); }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .kc-orbit, .kc-maskStroke, .kc-maskStrokeInv, .kc-phase, .kc-blade{
    animation: none !important;
  }
}