/* CoreCipher loader: the star spins in 3D inside a tilted orbiting ring.
   Inline:  <div class="cc-loader" role="status">...</div>
   Overlay: wrap it in <div class="cc-overlay"> and toggle .show */

.cc-loader{display:flex;flex-direction:column;align-items:center;gap:22px}
.cc-loader-stage{position:relative;width:92px;height:92px;perspective:520px;transform-style:preserve-3d}
.cc-loader-star{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 0 16px rgba(212,168,75,.45));
  animation:cc-spin 2.6s cubic-bezier(.45,.05,.55,.95) infinite;will-change:transform}
.cc-loader-ring{position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(212,168,75,.5);
  animation:cc-orbit 3.4s linear infinite;will-change:transform}
.cc-loader-ring::after{content:'';position:absolute;top:-3.5px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:#F1D68C;box-shadow:0 0 10px 2px rgba(212,168,75,.8)}
.cc-loader-text{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;letter-spacing:.02em;color:rgba(245,240,232,.7);margin:0;text-align:center}

/* A full turn around the vertical axis while turning a quarter in the plane.
   The star repeats every 90 degrees, so the loop is seamless. */
@keyframes cc-spin{
  0%{transform:rotateX(14deg) rotateY(0deg) rotateZ(0deg)}
  100%{transform:rotateX(14deg) rotateY(360deg) rotateZ(90deg)}
}
@keyframes cc-orbit{
  from{transform:rotateX(72deg) rotateZ(0deg)}
  to{transform:rotateX(72deg) rotateZ(360deg)}
}

.cc-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(9,9,28,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.cc-overlay.show{opacity:1;visibility:visible;transition:opacity .35s ease}

@media (prefers-reduced-motion:reduce){
  .cc-loader-star{animation:cc-breathe 2.4s ease-in-out infinite}
  .cc-loader-ring{animation:none;transform:rotateX(72deg)}
  @keyframes cc-breathe{50%{opacity:.55}}
}
