/* Character Level - shared decorative effects (Astro Crown theme). Decorative only; content never depends on these rules. */
:root {
  --ac-midnight: #080B20;
  --ac-violet: #7556FF;
  --ac-cyan: #55DDF5;
  --ac-gold: #E8BB54;
  --ac-white: #FFFFFF;
}

/* Host element needs position: relative; isolation: isolate is recommended. */
.ac-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* Static star points: six tiled gradient layers, no extra DOM, no canvas. */
.ac-starfield {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 68% 42%, rgba(255, 255, 255, 0.85) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 37% 76%, rgba(85, 221, 245, 0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 86% 88%, rgba(255, 255, 255, 0.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 9%, rgba(117, 86, 255, 0.9) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 24% 61%, rgba(232, 187, 84, 0.8) 50%, transparent 100%);
  background-size: 157px 157px, 211px 211px, 263px 263px, 331px 331px, 389px 389px, 547px 547px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 45%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 45%, transparent 85%);
}

/* One elliptical orbit + glowing bead. Tune via --ac-orbit-size, --ac-orbit-tilt, --ac-orbit-x, --ac-orbit-y. */
.ac-orbit {
  position: absolute;
  top: var(--ac-orbit-y, 50%);
  left: var(--ac-orbit-x, 50%);
  width: var(--ac-orbit-size, min(82vw, 560px));
  aspect-ratio: 2.6 / 1;
  translate: -50% -50%;
  rotate: var(--ac-orbit-tilt, -14deg);
  border: 1px solid rgba(117, 86, 255, 0.5);
  border-top-color: rgba(85, 221, 245, 0.4);
  border-bottom-color: rgba(117, 86, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(117, 86, 255, 0.16), inset 0 0 16px rgba(85, 221, 245, 0.07);
}
.ac-orbit::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -4px;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ac-cyan);
  box-shadow: 0 0 6px 2px rgba(85, 221, 245, 0.6), 0 0 16px 4px rgba(117, 86, 255, 0.32);
}
/* Animation attaches only once JS runs and stays paused unless motion is on (no snap on pause). */
html[data-ac-ready] .ac-orbit {
  animation: ac-orbit-turn 120s linear infinite paused;
}
html.ac-motion .ac-orbit { animation-play-state: running; }
@keyframes ac-orbit-turn {
  from { rotate: var(--ac-orbit-tilt, -14deg); }
  to { rotate: calc(var(--ac-orbit-tilt, -14deg) + 360deg); }
}
/* Paused offscreen (.ac-idle) or while the tab is hidden (html.ac-hidden). */
html.ac-hidden .ac-scene *,
.ac-scene.ac-idle * {
  animation-play-state: paused !important;
}

.ac-gold {
  color: var(--ac-gold);
  text-shadow: 0 0 18px rgba(232, 187, 84, 0.22);
}
.ac-crest-glow {
  filter: drop-shadow(0 0 8px rgba(232, 187, 84, 0.35)) drop-shadow(0 0 26px rgba(117, 86, 255, 0.28));
}

/* Reveal: visible by default; JS adds html.ac-reveal-on only after the observer is live. */
html.ac-reveal-on .ac-reveal {
  transition: opacity 0.7s ease-out, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.ac-reveal-on .ac-reveal:not(.ac-in) {
  opacity: 0;
  translate: 0 14px;
}
@media (prefers-reduced-motion: reduce) {
  html.ac-reveal-on .ac-reveal:not(.ac-in) { translate: none; }
}

.ac-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(8, 11, 32, 0.72);
  color: var(--ac-white);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}
.ac-motion-toggle[hidden] { display: none; }
.ac-motion-toggle::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ac-cyan);
  border-radius: 50%;
}
.ac-motion-toggle[aria-pressed=true]::before {
  background: var(--ac-cyan);
  box-shadow: 0 0 8px rgba(85, 221, 245, 0.6);
}
.ac-motion-toggle:hover { border-color: rgba(117, 86, 255, 0.75); }
.ac-motion-toggle:focus-visible { outline: 2px solid var(--ac-cyan); outline-offset: 3px; }

@media (forced-colors: active) {
  .ac-scene { display: none; }
  .ac-motion-toggle::before { border-color: ButtonText; }
  .ac-motion-toggle[aria-pressed=true]::before { background: ButtonText; }
}
@media print {
  .ac-scene, .ac-motion-toggle { display: none; }
}

@media print{html.ac-reveal-on .ac-reveal:not(.ac-in){opacity:1;translate:none}}

/* Visible, bounded decorative motion; no animation under reading surfaces. */
html.ac-motion .ac-starfield{animation:ac-stars-breathe 4s ease-in-out infinite alternate}
html[data-ac-ready] .ac-orbit{animation-duration:24s}
@keyframes ac-stars-breathe{from{opacity:.25;transform:translateY(0)}to{opacity:.85;transform:translateY(-7px)}}
.ac-motion-toggle:disabled{cursor:default;opacity:.8}
@media(prefers-reduced-motion:reduce){.ac-starfield,.ac-orbit{animation:none!important}}