/* The authored north tip is at (350,157), above its (350,290) pivot.
   Bearings stay fixed; the Home needle seeks north and settles exactly upright. */
.compass-dial { animation: none !important; transform: none !important; }
.compass-needle { animation: none; transform: none; }
.compass-chain { animation: ethera-chain-drift 16s ease-in-out infinite; }
.compass-orbit { animation: none; }
.hosting-hero .compass-art > svg .compass-chain {
  transform-box: view-box;
  transform-origin: 350px 290px;
  animation: ethera-hero-chain-turn 36s linear infinite;
}
.hosting-hero .compass-art > svg .compass-needle {
  transform-box: view-box;
  transform-origin: 350px 290px;
  animation: ethera-hero-north-seek 8.4s ease-in-out infinite;
}
.hosting-hero .compass-art > svg.ethera-compass-offscreen * {
  animation-play-state: paused !important;
}
@keyframes ethera-hero-chain-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ethera-hero-north-seek {
  0%, 76%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(12deg); }
  36% { transform: rotate(-7deg); }
  52% { transform: rotate(3deg); }
  64% { transform: rotate(-1deg); }
}
@keyframes ethera-chain-drift {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

/* Elements receive these classes only after the motion module initializes. */
.ethera-motion-ready .ethera-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms ease, transform 480ms cubic-bezier(.2,.7,.2,1);
}
.ethera-motion-ready .ethera-reveal.ethera-revealed {
  opacity: 1;
  transform: none;
}
.ethera-motion-ready dialog[open] { animation: ethera-dialog-in 220ms ease-out both; }
.ethera-motion-ready .chat:not([hidden]) { animation: ethera-chat-in 240ms ease-out both; }
.ethera-motion-ready .creator-orb { animation: ethera-orb-float 6s ease-in-out infinite; }

@keyframes ethera-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes ethera-chat-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes ethera-orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.ethera-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #75603b66;
  border-radius: 18px;
  background: #bd934b0a;
  color: #c9b27f;
  white-space: nowrap;
  font-size: 10px;
}
.ethera-motion-toggle span { width: 10px; text-align: center; font-size: 11px; }
.ethera-motion-toggle:hover { border-color: #b08a46; background: #bd934b14; }
.ethera-motion-toggle:disabled { opacity: .8; cursor: default; }
.ethera-back-to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 11;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #8e723d;
  background: #171d31ee;
  color: #d3b16d;
  font-size: 22px;
  box-shadow: 0 5px 24px #0004;
  transition: background 180ms ease, transform 180ms ease;
}
.ethera-back-to-top:hover { background: #293047; transform: translateY(-2px); }
@media (max-width: 700px) {
  .ethera-back-to-top { left: 15px; bottom: 15px; }
}

/* The user control pauses existing effects as well as this module's effects. */
html.ethera-motion-paused,
html.ethera-motion-paused *,
html.ethera-motion-paused *::before,
html.ethera-motion-paused *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.ethera-motion-paused .ethera-reveal { opacity: 1; transform: none; }
html.ethera-motion-paused .primary:hover,
html.ethera-motion-paused .game-card:hover,
html.ethera-motion-paused .game-card:hover img,
html.ethera-motion-paused .ethera-back-to-top:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ethera-motion-ready .ethera-reveal { opacity: 1; transform: none; }
  .primary:hover, .game-card:hover, .game-card:hover img, .ethera-back-to-top:hover { transform: none; }
}

/* Stagger has a short ceiling, even when the catalog shows 100 items. */
.ethera-motion-ready .ethera-reveal {
  transition-delay: var(--ethera-reveal-delay, 0ms);
}
.ethera-motion-ready .ethera-reveal:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}
.ethera-motion-ready .game-card.ethera-reveal,
.ethera-motion-ready .guide-card.ethera-reveal,
.ethera-motion-ready .application-family.ethera-reveal,
.ethera-motion-ready .customer-review-grid > .ethera-reveal {
  transition-duration: 420ms;
}
.ethera-motion-ready .game-card,
.ethera-motion-ready .guide-card,
.ethera-motion-ready .application-family,
.ethera-motion-ready .customer-review-grid > article {
  transition-property: opacity, transform, border-color, box-shadow;
}
@media (hover: hover) and (pointer: fine) {
  .ethera-motion-ready .game-card.ethera-revealed:hover {
    transform: translateY(-4px);
    transition-delay: 0ms;
  }
  .ethera-motion-ready .guide-card.ethera-revealed:hover,
  .ethera-motion-ready .application-family.ethera-revealed:hover {
    transform: translateY(-3px);
    border-color: #ba965955;
    box-shadow: 0 10px 26px #050a182e;
    transition-delay: 0ms;
  }
}

.ethera-reading-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #795a2e, #c6a35d 75%, #ead394);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  box-shadow: 0 0 8px #c6a35d40;
}
.ethera-reading-progress[hidden], .ethera-back-to-top[hidden] { display: none !important; }
.ethera-back-to-top { border-color: #8e723d40; }
.ethera-back-to-top svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1.5;
  transform: rotate(-90deg);
  pointer-events: none;
}
.ethera-progress-track { stroke: #8e723d40; }
.ethera-progress-ring { stroke: #d0ae68; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.ethera-back-to-top:focus-visible, .ethera-motion-toggle:focus-visible {
  outline: 2px solid #d8ba7d;
  outline-offset: 4px;
}

/* Inactive tabs spend no work on decorative loops, including the compass/map. */
html.ethera-document-hidden *,
html.ethera-document-hidden *::before,
html.ethera-document-hidden *::after { animation-play-state: paused !important; }
html.ethera-motion-paused .game-card.ethera-revealed:hover,
html.ethera-motion-paused .guide-card:hover,
html.ethera-motion-paused .application-family:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ethera-motion-ready .game-card.ethera-revealed:hover,
  .ethera-motion-ready .guide-card:hover,
  .ethera-motion-ready .application-family:hover { transform: none !important; }
}

/* Original Ethera compass, repeated as a quiet wayfinding detail. */
.ethera-compass-heading { position: relative; padding-right: 180px; }
.ethera-compass-accent {
  position: absolute;
  top: 50%;
  right: 5px;
  display: block;
  width: 155px;
  height: auto;
  aspect-ratio: 700 / 580;
  transform: translateY(-50%);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.ethera-compass-accent > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ethera-compass-accent .compass-chain { opacity: .4; }
.ethera-compass-accent .compass-aura { opacity: .6; }
.ethera-compass-accent .compass-orbit { animation-duration: 150s; }
.page-head.ethera-compass-heading > .ethera-compass-accent { top: 115px; transform: none; }
.ethera-compass-heading > :not(.ethera-compass-accent) { position: relative; }
.ethera-compass-heading > .service-actions { flex-wrap: wrap; }
@media (max-width: 1000px) {
  .ethera-compass-heading { padding-right: 105px; }
  .ethera-compass-accent { width: 95px; right: 0; opacity: .48; }
  .page-head.ethera-compass-heading > .ethera-compass-accent { top: 80px; }
}
@media (max-width: 700px) {
  .ethera-compass-heading { padding-right: 0; }
  .ethera-compass-heading > .ethera-compass-accent,
  .page-head.ethera-compass-heading > .ethera-compass-accent {
    position: static;
    width: 72px;
    height: auto;
    margin: 0 0 14px -7px;
    opacity: .68;
    transform: none;
  }
  .section-head.ethera-compass-heading { display: block; }
}

/* A brief welcome, never a loading screen. Its lifetime is capped in JavaScript. */
.ethera-introduction {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #223b50 0, #121c30 38%, #0b1020 76%);
  animation: ethera-intro-reveal 2100ms cubic-bezier(.2,.65,.2,1) both;
}
.ethera-introduction::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid #b9985833;
  border-radius: 2px;
  pointer-events: none;
}
.ethera-intro-skip {
  position: absolute;
  top: max(40px, env(safe-area-inset-top));
  right: 42px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid #b995575e;
  border-radius: 6px;
  background: #172237;
  color: #dfc48f;
  font-size: 12px;
}
.ethera-intro-skip:hover { background: #243047; border-color: #d0ad69; }
.ethera-intro-skip:focus-visible { outline: 2px solid #edd399; outline-offset: 4px; }
.ethera-intro-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(500px, 88vw);
  text-align: center;
  padding: 26px 0;
}
.ethera-intro-compass {
  width: min(360px, 61vw, 44vh);
  aspect-ratio: 700 / 580;
  margin: 0 0 5px;
  animation: ethera-intro-compass-in 1350ms cubic-bezier(.16,.7,.2,1) both;
}
.ethera-intro-compass svg { display: block; width: 100%; height: auto; overflow: visible; }
.ethera-intro-compass .compass-chain { animation: none; opacity: .55; }
.ethera-intro-compass .compass-orbit { animation: none; }
.ethera-intro-compass .compass-needle { animation: none; transform: none; }
.ethera-intro-wordmark {
  color: #d1b070;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .32em;
  padding-left: .32em;
  animation: ethera-intro-type-in 650ms 180ms ease-out both;
}
.ethera-intro-caption {
  margin: 16px 0 22px;
  color: #b3c1cd;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 2.2vw, 22px);
  letter-spacing: .035em;
  animation: ethera-intro-type-in 650ms 330ms ease-out both;
}
.ethera-intro-line {
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4b577, transparent);
  animation: ethera-intro-line-in 800ms 430ms ease-out both;
}
@keyframes ethera-intro-reveal {
  0%, 68% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ethera-intro-compass-in {
  from { opacity: 0; transform: translateY(13px) scale(.88); }
  to { opacity: 1; transform: none; }
}
@keyframes ethera-intro-type-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ethera-intro-line-in {
  from { opacity: 0; transform: scaleX(.3); }
  to { opacity: 1; transform: scaleX(1); }
}
@media (max-width: 600px) {
  .ethera-introduction::before { inset: 14px; }
  .ethera-intro-skip { top: max(28px, env(safe-area-inset-top)); right: 28px; font-size: 11px; gap: 12px; }
  .ethera-intro-scene { padding-top: 52px; }
}
html.ethera-motion-paused .ethera-introduction { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ethera-introduction { display: none !important; }
}

.hero-intro-link { display: inline-flex; padding: 12px 0; margin-top: 13px; font-size: 11px; letter-spacing: .3px; color: #b89b63; }
html.ethera-motion-paused .hero-intro-link { display: none; }
@media(prefers-reduced-motion:reduce) { .hero-intro-link { display: none; } }

/* A compact status indicator while the app prepares its first view. */
.ethera-page-loader[hidden]{display:none!important}
.ethera-page-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none}
.ethera-page-loader-mark{display:grid;justify-items:center;gap:12px;padding:22px 26px;border:1px solid #ddbd7538;border-radius:18px;background:#0b182af2;box-shadow:0 12px 48px #0004;color:#f0e7d2;font:500 12px/1.4 system-ui,sans-serif;letter-spacing:.04em}
.ethera-page-loader img{display:block;width:76px;height:76px;animation:ethera-compass-loading 1.8s linear infinite;filter:drop-shadow(0 0 12px #75d8e430)}
@keyframes ethera-compass-loading{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ethera-page-loader img{animation:none}}
html.ethera-motion-paused .ethera-page-loader img{animation:none}