/* ============================================================
   aCo Loader — shared loading indicator for the aCo family sites
   The aCo logo sits still in the center; a crest-pink ring arc revolves
   around it, with small stars looping the same orbit. Usage: see README.md in this folder.
   ============================================================ */

:root {
  --aco-loader-size: 72px;          /* overall size of the mark; scale freely */
  --aco-loader-ring: #FF66C4;       /* crest pink — the revolving arc */
  --aco-loader-track: #22364a;      /* slate — the faint full circle behind */
  --aco-loader-bg: #131c2f;         /* family page background */
  --aco-loader-speed: 1.1s;         /* one revolution */
}

.aco-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aco-loader-bg);
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Overlay inside a container instead of the whole page
   (the container needs position: relative). */
.aco-loader--contained {
  position: absolute;
}

.aco-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.aco-loader__mark {
  position: relative;
  width: var(--aco-loader-size);
  height: var(--aco-loader-size);
  flex: 0 0 auto;
}

.aco-loader__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: aco-loader-spin var(--aco-loader-speed) linear infinite;
}

.aco-loader__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: 58%;
  object-fit: contain;
}

/* Soft pink glow breathing behind the crest */
.aco-loader__glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 102, 196, 0.38) 0%, rgba(255, 102, 196, 0.12) 45%, transparent 70%);
  animation: aco-loader-glow 2.2s ease-in-out infinite alternate;
}

/* Stars ride the same orbit as the ring arc */
.aco-loader__orbit {
  position: absolute;
  inset: 0;
  animation: aco-loader-spin var(--aco-loader-speed) linear infinite;
}

.aco-loader__star {
  position: absolute;
  inset: 0;
  transform: rotate(var(--aco-star-angle, 0deg));
}

/* Star orbit angles + twinkle delays by position — class rules, so the
   loader markup (baked into pages and built by loader.js) carries NO
   inline styles. Four stars, 90° apart, delays staggered to match. */
.aco-loader__star:nth-child(1) { --aco-star-angle: 0deg; }
.aco-loader__star:nth-child(2) { --aco-star-angle: 90deg; }
.aco-loader__star:nth-child(3) { --aco-star-angle: 180deg; }
.aco-loader__star:nth-child(4) { --aco-star-angle: 270deg; }
.aco-loader__star:nth-child(1) .aco-loader__spark { --aco-star-delay: 0s; }
.aco-loader__star:nth-child(2) .aco-loader__spark { --aco-star-delay: 0.45s; }
.aco-loader__star:nth-child(3) .aco-loader__spark { --aco-star-delay: 0.9s; }
.aco-loader__star:nth-child(4) .aco-loader__spark { --aco-star-delay: 1.35s; }

/* Counter-rotation keeps each star upright while it orbits */
.aco-loader__steady {
  position: absolute;
  inset: 0;
  animation: aco-loader-spin-rev var(--aco-loader-speed) linear infinite;
}

.aco-loader__spark {
  --aco-star-size: calc(var(--aco-loader-size) * 0.17);
  position: absolute;
  width: var(--aco-star-size);
  height: var(--aco-star-size);
  left: calc(50% - var(--aco-star-size) / 2);
  top: calc(var(--aco-loader-size) * 0.04 - var(--aco-star-size) / 2);
  background: #ffc7e6;
  clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  filter: drop-shadow(0 0 3px rgba(255, 102, 196, 0.8));
  animation: aco-loader-twinkle 1.7s ease-in-out infinite alternate;
  animation-delay: var(--aco-star-delay, 0s);
}

@keyframes aco-loader-spin-rev {
  to { transform: rotate(-360deg); }
}

@keyframes aco-loader-twinkle {
  from { transform: scale(0.65); opacity: 0.5; }
  to { transform: scale(1.1); opacity: 1; }
}

@keyframes aco-loader-glow {
  from { opacity: 0.55; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.05); }
}


@keyframes aco-loader-spin {
  to { transform: rotate(360deg); }
}

.aco-loader__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* Reduced motion: no spinning, no fade — a static ring + logo. */
@media (prefers-reduced-motion: reduce) {
  .aco-loader__ring,
  .aco-loader__orbit,
  .aco-loader__steady,
  .aco-loader__spark,
  .aco-loader__glow {
    animation: none;
  }
  .aco-loader {
    transition: none;
  }
}