/* Private prototype. Not installed in Wix. Pair with the isolated JS file.
   No Harmony internal classes or router assumptions are used. */
:root {
  --aether-stone: #f6dfc1;
  --aether-ink: #16101b;
  --aether-plum: #542637;
  --aether-crimson: #87273c;
  --aether-orange: #da783d;
  --aether-violet: #8b4eaa;
}
html.aether-global-effects {
  scrollbar-color: var(--aether-crimson) var(--aether-stone);
  scrollbar-width: auto;
}
html.aether-global-effects body { isolation: isolate; background: #32142e; }
html.aether-global-effects::-webkit-scrollbar { width: 16px; height: 16px; }
html.aether-global-effects::-webkit-scrollbar-track {
  background: var(--aether-stone);
  border-left: 2px solid var(--aether-plum);
}
html.aether-global-effects::-webkit-scrollbar-thumb {
  border: 3px solid var(--aether-stone);
  border-radius: 0;
  background: repeating-linear-gradient(0deg, var(--aether-crimson) 0 12px,
    var(--aether-plum) 12px 16px, var(--aether-crimson) 16px 24px);
  box-shadow: inset 2px 0 0 #b24c51;
}
html.aether-global-effects::-webkit-scrollbar-corner { background: var(--aether-stone); }
/* Standard scrollbar colors override WebKit detail in some Chromium releases.
   Use the detailed shape only where that selector is implemented. */
@supports selector(::-webkit-scrollbar) {
  html.aether-global-effects { scrollbar-color: auto; scrollbar-width: auto; }
}
#aether-global-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden; background: #32142e;
  contain: strict;
}
.aether-holo-lattice, .aether-holo-packets { position: absolute; inset: 0; }
.aether-holo-lattice {
  opacity: .065;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h64v2H0ZM0 0h2v64H0ZM30 30h4v4h-4Z' fill='%23542637'/%3E%3C/svg%3E");
  background-size: 64px 64px;
}
.aether-holo-packets {
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192' shape-rendering='crispEdges'%3E%3Cpath d='M28 28h12v4H28ZM32 24h4v12h-4ZM124 92h12v4h-12ZM128 88h4v12h-4Z' fill='%238b4eaa'/%3E%3Cpath d='M92 156h20v4H92ZM96 152h4v12h-4Z' fill='%23da783d'/%3E%3C/svg%3E");
  background-size: 192px 192px;
  animation: aether-holo-breathe 16s steps(8, end) infinite;
}
@keyframes aether-holo-breathe {
  0%, 100% { opacity: .035; }
  25%, 75% { opacity: .075; }
  50% { opacity: .12; }
}

.aether-two-tone { color: var(--aether-ink); }
@supports (background-clip: text) {
  .aether-two-tone {
    background: linear-gradient(to bottom, var(--aether-ink) 0 56%, var(--aether-crimson) 56% 100%);
    background-clip: text; -webkit-background-clip: text;
    color: transparent;
  }
}

/* Opt-in transition styling only; JS enables cross-document navigation after
   explicit configuration. No Wix SPA navigation is intercepted or delayed. */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: aether-pixel-reveal 180ms steps(6,end) both; }
@keyframes aether-pixel-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .aether-holo-packets { animation: none !important; opacity: .035; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media (forced-colors: active) {
  .aether-two-tone { background: none; color: CanvasText; }
  #aether-global-backdrop { display: none; }
  html.aether-global-effects { scrollbar-color: auto; }
}

/* Background sound belongs in the page footer; it never pauses the artwork. */
.background-sound{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:100%;}
.background-sound button{min-height:44px;max-width:100%;padding:10px 12px;border:2px solid #da783d;border-radius:0;background:#542637;color:#f6dfc1;font:10px/1.6 'Aether Pixel',monospace;cursor:pointer;}
.background-sound button:disabled{cursor:default;opacity:1;border-color:#8b4eaa;}
.background-sound-status{font-size:10px;line-height:1.5;color:#f6dfc1;}
.background-sound-volume{width:100%;accent-color:#da783d;min-height:44px;}
.background-sound [hidden]{display:none!important;}
@media(max-width:600px){.background-sound{width:100%;}.background-sound button{font-size:10px;}}