/* Shared by every page on opalmpai.com: the colour and font tokens, and the site
   header (brand "Opal" and the main nav), so the header looks the same everywhere.
   styles.css (the home page) builds on these tokens. Themed pages add a sub-menu
   (.site-subnav) for their own sections under the header. */

:root {
  --night: #0B0C24;
  --night-2: #12123A;
  --indigo: #221A5C;
  --tile: #14163A;
  --tile-hover: #1E2156;
  --opal-teal: #4FD8CB;
  --opal-violet: #A08BFA;
  --opal: linear-gradient(100deg, var(--opal-teal), var(--opal-violet));
  --text: #FFFFFF;
  --text-soft: #C9CDEA;
  --card: #FFFFFF;
  --card-ink: #0B0C24;
  --radius: 24px;
  --wrap: 1200px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Unbounded", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --script: "Caveat", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
}

/* Site header. Its rules carry their own font, sizing and focus ring, so the
   header looks the same on a page that does not load styles.css. */
.site-header {
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
  color: var(--text); -webkit-font-smoothing: antialiased;
}
.site-header, .site-header *, .site-subnav, .site-subnav * { box-sizing: border-box; }
.site-header .header-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 18px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px;
}
.site-header .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  color: var(--text); text-decoration: none;
}
/* The opal stone left of the brand (the stone from /disco/'s first header):
   a slow revolve, about 14 s a turn, and a pulse with a teal-violet glow every
   2.4 s. 32px stays inside the brand's 33px line, so the header keeps its height. */
.site-header .brand-stone {
  display: block; width: 32px; height: 32px; border-radius: 50%;
  box-shadow: 0 0 14px rgba(143, 243, 224, 0.4);
  animation: stone-turn 14s linear infinite, stone-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes stone-turn { to { rotate: 360deg; } }
@keyframes stone-pulse {
  from { scale: 1; box-shadow: 0 0 14px rgba(143, 243, 224, 0.4); }
  to { scale: 1.06; box-shadow: 0 0 22px rgba(143, 243, 224, 0.6), 0 0 34px rgba(160, 139, 250, 0.45); }
}
@keyframes stone-glow {
  from { box-shadow: 0 0 14px rgba(143, 243, 224, 0.4); }
  to { box-shadow: 0 0 20px rgba(143, 243, 224, 0.55), 0 0 28px rgba(160, 139, 250, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-stone { animation: stone-glow 2.4s ease-in-out infinite alternate; }
}
.site-header .brand:hover { color: var(--text); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 0.95rem; }
.site-header nav a { color: var(--text-soft); text-decoration: none; font-weight: 600; text-underline-offset: 3px; }
.site-header nav a:hover { color: var(--text); text-decoration: underline; }
.site-header nav a[aria-current="page"] {
  color: var(--text);
  background: var(--opal) 0 100% / 100% 2px no-repeat;
}
.site-header a:focus-visible, .site-subnav a:focus-visible {
  outline: 3px solid var(--opal-teal); outline-offset: 3px;
}

/* Sub-menu: a themed page's own sections, a slim bar under the header. One row
   that scrolls sideways inside itself on a narrow screen. */
.site-subnav {
  font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased;
  border-top: 1px solid rgba(201, 205, 234, 0.12);
}
.site-subnav-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  display: flex; gap: 22px; overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; font-size: 0.85rem;
}
.site-subnav-inner::-webkit-scrollbar { display: none; }
.site-subnav a {
  flex: none; padding: 8px 0; color: var(--text-soft); opacity: 0.85;
  text-decoration: none; font-weight: 600;
  background: var(--opal) 0 100% / 0 2px no-repeat;
  transition: background-size 0.2s, color 0.2s, opacity 0.2s;
}
.site-subnav a:hover, .site-subnav a:focus-visible {
  color: var(--text); opacity: 1; background-size: 100% 2px;
}

/* Over a full-screen stage (/arrival/): fixed at the top, transparent, above the
   stage; only the links take clicks, so the rest of the strip passes them through. */
.site-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none; }
.site-overlay a { pointer-events: auto; }