
/* =========================================================
   ORBIT SHARED COMPONENTS
   Navigation / Mobile Navigation / Sound / Form errors
   ========================================================= */

.nav-actions {
  display:flex;
  align-items:center;
  gap:14px;
}

/* FORM ERROR STATES (join modal, checkout) */
.form-error{
  display:none;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.5;
  color:#c23b46;
  background:rgba(194,59,70,0.08);
  border:1px solid rgba(194,59,70,0.35);
  padding:9px 11px;
  margin-top:2px;
}
.form-error.show{ display:block; }

/* COOKIE / ANALYTICS NOTICE */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:210;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--deep-space); color:var(--stardust);
  border-top:1px solid rgba(231,228,234,.14);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  font-size:13px; line-height:1.55;
  transition:opacity .3s ease, transform .3s ease;
}
.cookie-banner p{ flex:1; min-width:220px; margin:0; color:var(--lavender); }
.cookie-banner .btn{ flex:none; }
.cookie-banner.hide{ opacity:0; transform:translateY(12px); pointer-events:none; }
body.has-cookie-banner .sound-toggle{ display:none !important; }
@media(max-width:600px){
  .cookie-banner{ padding:14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .cookie-banner p{ font-size:12.5px; }
}


/* MOBILE NAV */

.mobile-menu-btn {
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(231,228,234,.18);
  background:rgba(231,228,234,.04);
  color:var(--stardust);
  cursor:pointer;
  padding:0;
  position:relative;
  z-index:122;
}

.mobile-menu-btn span {
  position:absolute;
  width:20px;
  height:1.5px;
  background:currentColor;
  transition:
    transform .28s ease,
    opacity .2s ease,
    top .28s ease;
}

.mobile-menu-btn span:nth-child(1) {
  transform:translateY(-6px);
}

.mobile-menu-btn span:nth-child(3) {
  transform:translateY(6px);
}

.mobile-menu-btn.open span:nth-child(1) {
  transform:rotate(45deg);
}

.mobile-menu-btn.open span:nth-child(2) {
  opacity:0;
}

.mobile-menu-btn.open span:nth-child(3) {
  transform:rotate(-45deg);
}

.mobile-menu-backdrop {
  position:fixed;
  inset:0;
  background:rgba(9,9,13,.62);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:115;
}

.mobile-menu-backdrop.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mobile-menu-sheet {
  position:fixed;
  top:0;
  right:0;
  width:min(88vw,390px);
  height:100dvh;
  padding:120px 30px 38px;
  background:
    radial-gradient(
      circle at top right,
      rgba(118,99,154,.24),
      transparent 44%
    ),
    var(--deep-space);
  border-left:1px solid rgba(231,228,234,.12);
  transform:translateX(105%);
  transition:transform .35s cubic-bezier(.22,.75,.2,1);
  z-index:118;
  display:flex;
  flex-direction:column;
}

.mobile-menu-sheet.open {
  transform:translateX(0);
}

.mobile-menu-kicker {
  color:var(--pink);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:26px;
}

.mobile-menu-links {
  display:flex;
  flex-direction:column;
}

.mobile-menu-links a {
  color:var(--stardust);
  text-decoration:none;
  font-family:var(--font-display);
  font-size:clamp(28px,8vw,40px);
  line-height:1;
  padding:16px 0;
  border-bottom:1px solid rgba(231,228,234,.1);
}

.mobile-menu-cta {
  margin-top:auto;
}

.mobile-menu-cta .btn {
  width:100%;
  justify-content:center;
}

.mobile-menu-micro {
  margin-top:14px;
  text-align:center;
  font-size:12px;
  opacity:.52;
}


/* SOUND */

.sound-toggle {
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:110;
  min-height:42px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(231,228,234,.16);
  background:rgba(9,9,13,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--stardust);
  cursor:pointer;
  font:inherit;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sound-toggle:hover {
  border-color:rgba(231,228,234,.32);
}

.sound-toggle.on {
  border-color:rgba(214,160,164,.45);
}

.sound-meter {
  height:15px;
  display:flex;
  align-items:center;
  gap:2px;
}

.sound-meter i {
  display:block;
  width:2px;
  height:3px;
  background:currentColor;
  opacity:.8;
  transition:height .08s linear;
}


@media (max-width:899px) {
  nav .nav-links,
  nav .nav-cta {
    display:none !important;
  }

  .mobile-menu-btn {
    display:inline-flex;
  }

  .sound-toggle {
    left:14px;
    bottom:14px;
  }
}


@media (min-width:900px) {
  .mobile-menu-backdrop,
  .mobile-menu-sheet {
    display:none !important;
  }
}

/* Active ORBIT sound state:
   keep the existing black + peach toggle treatment,
   only animate the meter in peach while sound is enabled. */
.sound-toggle.on .sound-meter i {
  background:#d6a0a4;
  opacity:1;
}

body.has-cookie-banner .artist-widget{display:none !important;}
/* ---------- ARTIST WIDGET (floating, follows across pages) ---------- */
.artist-widget{
  position:fixed; right:22px; bottom:22px; z-index:145;
  width:380px; max-width:calc(100vw - 44px);
  box-sizing:border-box; max-height:calc(100dvh - 44px); overflow-y:auto;
  background:var(--stardust); color:var(--ink);
  border:2.5px solid var(--ink); box-shadow:6px 6px 0 var(--pink);
  padding:16px 16px 14px;
  transform:translateY(140%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.artist-widget.show{ transform:translateY(0); }

.artist-widget-close{
  position:absolute; top:8px; right:8px;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:#5c5566; cursor:pointer; font-size:12px;
}
.artist-widget-close:hover{ color:var(--ink); }

.artist-widget-top{ display:flex; align-items:center; gap:12px; padding-right:18px; }
.artist-widget-art{
  width:48px; height:48px; flex:none; border-radius:50%;
  border:2px solid var(--ink);
  background:var(--deep-space-2) center/cover no-repeat;
}
.artist-widget-id{ min-width:0; }
.artist-widget-kicker{
  font-family:var(--font-body); font-size:9.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:#7a7385;
}
.artist-widget-name{
  font-family:var(--font-display); font-size:16px; text-transform:uppercase; line-height:1.15; margin-top:2px;
}
.artist-widget-release{
  margin-top:3px; font-family:var(--font-body); font-size:10.5px; color:#4a4453;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.artist-widget-listen{
  margin-top:16px; padding-top:12px; border-top:1px solid #c8c0ce;
  font-family:var(--font-body); font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.artist-widget-player{
  margin-top:8px; min-height:352px; border-radius:12px; background:#18151e;
}
.artist-widget-player iframe{ display:block; width:100%; height:352px; border:0; border-radius:12px; }
.artist-widget-status{ margin:8px 0 0; font-size:12px; line-height:1.5; color:#5c5566; }
.artist-widget-status[hidden]{ display:none; }
.artist-widget button:focus-visible,.artist-widget a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){ .artist-widget{ transition:none; } }

.artist-widget-links{
  margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:14px;
}
.artist-widget-links a{
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.03em;
  color:#5c5566; text-decoration:underline; text-underline-offset:2px;
}
.artist-widget-links a:hover{ color:var(--ink); }

@media(max-width:600px){
  .artist-widget{ left:16px; right:16px; width:auto; max-width:none; bottom:22px; }
}

/* Collapse visually without unloading Spotify or interrupting its audio. */
.artist-widget-top{ padding-right:32px; }
.artist-widget-collapse{
  position:absolute; top:8px; right:8px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:#5c5566; cursor:pointer;
}
.artist-widget-collapse:hover{ color:var(--ink); }
.artist-widget.is-collapsed .artist-widget-collapse svg{ transform:rotate(180deg); }
.artist-widget.is-collapsed .artist-widget-body{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); pointer-events:none;
}

/* Keep the homepage introduction comfortably separate from its title. */
.hero .eyebrow + h1{ margin-top:24px; }
h4,h5,h6{ font-family:var(--font-display); }
input,textarea,select{ font-family:var(--font-body); }

/* Content pages navigate below the original, uninterrupted music player. */
html.orbit-music-shell, .orbit-music-shell body{ overflow:hidden !important; }
.orbit-music-shell body > :not(#artistWidget):not(#orbitPageFrame){ display:none !important; }
#orbitPageFrame{ position:fixed; inset:0; width:100%; height:100dvh; border:0; z-index:100; background:var(--deep-space); }

/* LIVE EVENT LINK (nav) */
.nav-links a.nav-live{ opacity:1; color:#f7c948; display:inline-flex; align-items:center; gap:8px; }
.nav-links a.nav-live::before{ content:''; width:7px; height:7px; border-radius:50%; background:#8fe03a; box-shadow:0 0 0 0 rgba(143,224,58,.7); animation:navLive 1.8s ease-out infinite; }
.mobile-menu-links a.nav-live{ color:#f7c948; }
@keyframes navLive{ 70%{ box-shadow:0 0 0 8px rgba(143,224,58,0); } 100%{ box-shadow:0 0 0 0 rgba(143,224,58,0); } }
@media (prefers-reduced-motion:reduce){ .nav-links a.nav-live::before{ animation:none; } }
