:root{ --mint:#9decd6; --teal:#016672; }

/* ================= Overlay (with 0.15s fade) ================= */
.global-page-loader{
  position: fixed; inset: 0; z-index: 99999;
  /* keep mounted so opacity can animate */
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.86);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
.global-page-loader.is-active{
  opacity: 1; visibility: visible; pointer-events: all;
  transition: opacity .15s ease, visibility 0s;
}

/* ================= Loader base & helpers ================= */
.loader{ --size:128px; width:var(--size); height:var(--size); position:relative }
.ring-mask{
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 10px), #000 calc(100% - 10px));
          mask: radial-gradient(farthest-side,#0000 calc(100% - 10px), #000 calc(100% - 10px));
}

/* Keyframes */
@keyframes spin   { to { transform: rotate(360deg) } }
@keyframes spinccw{ to { transform: rotate(-360deg) } }
@keyframes iris{
  0%,100%{ transform: rotate(0turn) scaleX(.15) translateY(-50%) }
  50%    { transform: rotate(.35turn) scaleX(1) translateY(-50%) }
}
@keyframes cardfan{
  0%,100%{ rotate: var(--tilt,-8deg) }
  50%    { rotate: calc(var(--tilt,-8deg) + var(--angle,0deg)) }
}

/* ================= Sweep Arc + Ghost ================= */
.loader--sweepghost{
  border-radius:50%;
  box-shadow:0 0 0 2px var(--teal) inset;
  background:
    conic-gradient(from 0deg, var(--mint) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from -16deg, rgba(157,236,214,.55) 0 90deg, transparent 90deg 360deg),
    conic-gradient(from -32deg, rgba(157,236,214,.25) 0 90deg, transparent 90deg 360deg);
  animation: spin 1.2s linear infinite;
}

/* ================= Clock Sweep ================= */
.loader--clock{
  position:relative; border-radius:50%;
  background: repeating-conic-gradient(var(--teal) 0 2deg, transparent 2deg 30deg);
}
.loader--clock::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(var(--mint) 0 24deg, transparent 24deg 360deg);
  animation: spin 1.2s linear infinite;
}
.loader--clock,
.loader--clock::after{
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 10px), #000 calc(100% - 10px));
          mask: radial-gradient(farthest-side,#0000 calc(100% - 10px), #000 calc(100% - 10px));
}

/* ================= Tri-Star Kaleido ================= */
.loader--tristar{ position:relative; }
.loader--tristar::before,
.loader--tristar::after{
  content:""; position:absolute; inset:18px; border:2px solid var(--teal);
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
  background:var(--mint); border-radius:8px;
  animation: spin 1.4s linear infinite;
}
.loader--tristar::after{
  inset:26px; filter:brightness(.92); animation-direction: reverse;
}

/* ================= Shutter Blades ================= */
.loader--shutter{
  border-radius:50%; box-shadow:0 0 0 2px var(--teal) inset; overflow:hidden;
}
.loader--shutter .blade{
  position:absolute; left:50%; top:50%; width:60%; height:60%;
  transform-origin:0% 50%;
  clip-path:polygon(0% 50%, 100% 5%, 100% 95%);
  background:var(--mint); border:2px solid var(--teal); border-radius:8px;
  translate:0 -50%; animation: iris 1.2s ease-in-out infinite;
}
.loader--shutter .blade:nth-child(1){ rotate:0deg }
.loader--shutter .blade:nth-child(2){ rotate:60deg }
.loader--shutter .blade:nth-child(3){ rotate:120deg }
.loader--shutter .blade:nth-child(4){ rotate:180deg }
.loader--shutter .blade:nth-child(5){ rotate:240deg }
.loader--shutter .blade:nth-child(6){ rotate:300deg }

/* ================= Orbit Duo (two counter-rotating dots) ================= */
.loader--orbit{ border-radius:50% }
.loader--orbit::before,
.loader--orbit::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  animation: spin 1.4s linear infinite;
}
.loader--orbit::before{
  background: radial-gradient(circle 7px at 50% 8px, var(--mint) 95%, transparent 96%) center/100% 100% no-repeat;
}
.loader--orbit::after{
  background: radial-gradient(circle 7px at 50% calc(100% - 8px), var(--teal) 95%, transparent 96%) center/100% 100% no-repeat;
  animation-direction: reverse;
}

/* ================= Card Fan ================= */
.loader--cardfan{ --tilt:-8deg; }
.loader--cardfan .card{
  position:absolute; left:50%; top:52%;
  width:86px; height:16px; translate:0 -50%;
  transform-origin:left center;
  background:var(--mint); border:2px solid var(--teal); border-radius:10px;
  animation: cardfan 1.2s cubic-bezier(.34,1.56,.64,1) infinite;
}
.loader--cardfan .card:nth-child(odd){ background: rgba(157,236,214,.82) }

/* ================= Accessibility ================= */
@media (prefers-reduced-motion: reduce){
  .loader, .loader * { animation: none !important }
}
body.woocommerce-checkout #page-loader,
body.woocommerce-checkout .global-page-loader {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}