/* Shared studio navigation and decorative ambience, loaded only by Home and Atlas. */
@font-face { font-family: 'PixelSound UI'; src: url('../assets/fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PixelSound UI'; src: url('../assets/fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:is(.pixelsound-home, .feature-atlas) .site-header {
  --header-height: 68px;
  --studio-sans: 'PixelSound UI', 'Segoe UI', sans-serif;
  --site-header-font: var(--studio-sans);
  --pixelsound-wordmark-color: #f7faf5;
  --site-header-background: linear-gradient(135deg, #10272bf2, #09171cf5);
  --site-header-shadow: inset 0 1px #bcf5ed17, 0 8px 32px #0005;
  --site-header-current-line: #d5b27b;
  --site-header-hover: #8df7ee;
  --text: #f5eee0;
  --ink: #eaf3f1;
  --muted: #c3d6d5;
  --line: #577274;
  --line-strong: #92a7a2;
  box-sizing: border-box;
  width: min(calc(100% - 40px), 1180px);
  max-width: none;
  height: var(--header-height);
  margin: 14px auto 0;
  padding: 0 18px 0 22px;
  top: 14px;
  border-radius: 9px;
  font-size: 14px;
  color-scheme: dark;
}
/* Fixed text slots prevent fallback/webfont metrics from shifting the navigation. */
:is(.pixelsound-home, .feature-atlas) .site-header .studio-brand { flex: none; gap: 9px; }
:is(.pixelsound-home, .feature-atlas) .site-header .studio-brand .brand-logo-header { width: 40px; height: 40px; flex: none; }
:is(.pixelsound-home, .feature-atlas) .site-header .studio-wordmark { display: block; width: 121px; white-space: nowrap; }
:is(.pixelsound-home, .feature-atlas) .site-header .desktop-nav { gap: 28px; font-size: 14px; }
:is(.pixelsound-home, .feature-atlas) .site-header .desktop-nav > a { flex: none; white-space: nowrap; }
:is(.pixelsound-home, .feature-atlas) .site-header .desktop-nav > a[href="/"] { width: 50px; }
:is(.pixelsound-home, .feature-atlas) .site-header .desktop-nav > a[href="/feature-atlas/"] { width: 98px; }
:is(.pixelsound-home, .feature-atlas) .site-header .text-link { width: 44px; flex: none; font-size: 14px; white-space: nowrap; }
:is(.pixelsound-home, .feature-atlas) .site-header .header-actions { gap: 16px; }
:is(.pixelsound-home, .feature-atlas) .site-header .button {
  width: 138px;
  min-height: 40px;
  padding: 0 16px;
  color: #1e211f;
  border-color: #e4c797;
  border-radius: 4px;
  background: linear-gradient(#ecd2a2, #c6a06b);
  box-shadow: inset 0 1px #fff8, 0 2px 7px #0003;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
:is(.pixelsound-home, .feature-atlas) .site-header .button:hover { background: #f2d9a9; }
:is(.pixelsound-home, .feature-atlas) .site-header.mobile-open { height: auto; min-height: var(--header-height); }
@media (max-width: 690px) {
  :is(.pixelsound-home, .feature-atlas) .site-header {
    --header-height: 64px;
    width: calc(100% - 24px);
    top: 10px;
    margin-top: 10px;
    padding-inline: 12px;
  }
  :is(.pixelsound-home, .feature-atlas) .site-header .studio-brand .brand-logo-header { width: 34px; height: 34px; }
  :is(.pixelsound-home, .feature-atlas) .site-header .studio-wordmark { width: 109px; }
  :is(.pixelsound-home, .feature-atlas) .site-header .desktop-nav { font-size: 15px; gap: 20px; }
}

/* One translucent layer moves over the static photograph, behind all content. */
.feature-atlas .vu-pair { pointer-events: none; }
body:is(.pixelsound-home, .feature-atlas)::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 48% at 16% 30%, #72d9d930, transparent 75%),
    radial-gradient(ellipse 38% 42% at 85% 25%, #e5b5722c, transparent 75%);
  opacity: .4;
}
@media (prefers-reduced-motion: no-preference) {
  body:is(.pixelsound-home, .feature-atlas)::after { animation: studio-light-drift 18s ease-in-out infinite alternate; }
  .feature-atlas .vu-meter i {
    --vu-rest: -29deg;
    --vu-rise: 14deg;
    animation: studio-vu-signal 6.8s cubic-bezier(.45,0,.55,1) infinite;
  }
  .feature-atlas .vu-meter + .vu-meter i { --vu-rest: -25deg; --vu-rise: 12deg; animation-duration: 8.9s; animation-delay: -3.1s; }
}
@keyframes studio-light-drift {
  from { opacity: .24; transform: translate3d(-1.6%, .5%, 0) scale(1.04); }
  48% { opacity: .82; }
  to { opacity: .44; transform: translate3d(1.6%, -.65%, 0) scale(1.04); }
}
@keyframes studio-vu-signal {
  0%, 24%, 59%, 100% { transform: rotate(var(--vu-rest)); }
  8%, 34%, 70% { transform: rotate(calc(var(--vu-rest) + var(--vu-rise) * .2)); }
  14% { transform: rotate(calc(var(--vu-rest) + var(--vu-rise) * .7)); }
  19%, 48%, 87% { transform: rotate(calc(var(--vu-rest) + var(--vu-rise) * .35)); }
  42% { transform: rotate(calc(var(--vu-rest) + var(--vu-rise))); }
  79% { transform: rotate(calc(var(--vu-rest) + var(--vu-rise) * .6)); }
}
body[data-studio-paused]::after,
body[data-studio-paused] .vu-meter i,
.vu-pair[data-studio-paused] .vu-meter i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  body:is(.pixelsound-home, .feature-atlas)::after { animation: none; opacity: 0; }
  .feature-atlas .vu-meter i { animation: none; }
}