/* Persistent shared Spotify tray and procedural header EQ. */

:root{
  --ow-player-tray-space:0px;
  --ow-mobile-menu-space:0px;
  --ow-header-surface:rgba(16,18,15,.88);
  --ow-header-blur:14px;
  /* One geometry source for the visible Spotify player and the tray that wraps it. */
  --ow-player-height:152px;
  --ow-player-bottom-clearance:.7rem;
}

/* Header, compact menu, and player tray deliberately share one surface token.
   Player chrome is owned here, not by page-layout styles. */
.site-header,
.header-player-tray{
  background:var(--ow-header-surface);
  -webkit-backdrop-filter:blur(var(--ow-header-blur));
  backdrop-filter:blur(var(--ow-header-blur));
}

.nav-primary-links{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:inherit;
}

.header-eq{
  position:absolute;
  z-index:0;
  top:50%;
  left:50%;
  right:auto;
  width:260%;
  max-width:min(46rem,calc(100vw - 34rem));
  height:2.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity .24s ease;
  overflow:hidden;
}

.header-player-eq{
  display:none;
  pointer-events:none;
}

.header-eq span,
.header-player-eq span{
  flex:1 1 0;
  min-width:2px;
  max-width:5px;
  height:var(--eq-height,42%);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(247,244,233,.78) 0%,#f0be61 34%,#d97732 68%,rgba(163,76,34,.88) 100%);
  opacity:.4;
  transform:scaleY(.42);
  transform-origin:center;
}
.header-eq span:nth-child(6n+1),.header-player-eq span:nth-child(6n+1){--eq-height:38%;--eq-speed:1.08s;--eq-delay:-.42s;--eq-static:.42}
.header-eq span:nth-child(6n+2),.header-player-eq span:nth-child(6n+2){--eq-height:64%;--eq-speed:1.47s;--eq-delay:-.78s;--eq-static:.7}
.header-eq span:nth-child(6n+3),.header-player-eq span:nth-child(6n+3){--eq-height:82%;--eq-speed:1.22s;--eq-delay:-.18s;--eq-static:.88}
.header-eq span:nth-child(6n+4),.header-player-eq span:nth-child(6n+4){--eq-height:52%;--eq-speed:1.7s;--eq-delay:-.96s;--eq-static:.58}
.header-eq span:nth-child(6n+5),.header-player-eq span:nth-child(6n+5){--eq-height:72%;--eq-speed:1.34s;--eq-delay:-.57s;--eq-static:.78}
.header-eq span:nth-child(6n),.header-player-eq span:nth-child(6n){--eq-height:46%;--eq-speed:1.56s;--eq-delay:-.28s;--eq-static:.5}

/* The durable player-open classes drive the waveform directly. This restores
   the earlier proven behavior without depending on Spotify playback events. */
.site-header.is-music-active .header-eq{opacity:.52}
.site-header.is-music-active .nav-primary-links:hover .header-eq,
.site-header.is-music-active .nav-primary-links:focus-within .header-eq{opacity:.68}
.site-header.is-player-open.is-music-active .header-eq span,
.site-header.is-player-open.is-music-active .header-player-eq span,
.site-header.is-player-playing .header-eq span,
.site-header.is-player-playing .header-player-eq span{animation:ow-header-eq var(--eq-speed,1.4s) ease-in-out var(--eq-delay,0s) infinite alternate}

@keyframes ow-header-eq{
  0%{transform:scaleY(.28);opacity:.22}
  42%{transform:scaleY(.78);opacity:.52}
  100%{transform:scaleY(1.08);opacity:.76}
}

.nav-primary-links>a{
  position:relative;
  z-index:1;
  text-shadow:0 1px 12px rgba(8,10,9,.9),0 0 5px rgba(8,10,9,.8);
}
.mobile-menu-socials{z-index:2}

.header-player-tray{
  position:absolute;
  z-index:25;
  top:100%;
  left:50%;
  right:auto;
  display:none;
  box-sizing:border-box;
  width:100vw;
  width:100dvw;
  max-width:none;
  padding:.45rem clamp(1.25rem,5vw,5rem) var(--ow-player-bottom-clearance);
  border-bottom:1px solid rgba(247,244,233,.16);
  box-shadow:0 1.2rem 3rem rgba(0,0,0,.28);
  transform:translateX(-50%);
}
.site-header.is-player-open .header-player-tray{display:block}

.header-player-inner{
  position:relative;
  width:min(100%,34rem);
  margin:0 auto;
}
.header-player-meta{display:none;}
.header-player-close{
  position:absolute;
  z-index:3;
  top:-3rem;
  right:0;
  left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8rem;
  height:1.8rem;
  border:1px solid rgba(247,244,233,.2);
  background:rgba(16,18,15,.26);
  color:rgba(247,244,233,.72);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}
.header-player-close:hover,
.header-player-close:focus-visible{
  border-color:var(--ember);
  background:rgba(217,165,71,.12);
  color:var(--ember);
}
.header-player-close:focus-visible{outline:1px solid rgba(217,165,71,.72);outline-offset:2px}
.header-player-frame{width:100%;min-width:0;height:var(--ow-player-height);overflow:hidden}
.header-player-frame iframe,
.header-player-frame .spotify-embed{display:block;width:100%;height:var(--ow-player-height);border:0}

#ow-page-content{padding-top:0;transition:padding-top .2s ease}
body.ow-player-active #ow-page-content{padding-top:var(--ow-player-tray-space,0px)}

.spotify-player-shell.is-header-active .spotify-player-gate{
  border-color:rgba(217,165,71,.5);
  background:linear-gradient(135deg,rgba(217,165,71,.08),rgba(247,244,233,.025));
}
.spotify-player-shell.is-header-active .spotify-gate-label{color:var(--ember)}

@media (min-width:1081px){
  .site-header>.header-player-tray{grid-column:1 / -1}
}

/* Header-only compact breakpoint. Page content keeps its existing 820px layout
   breakpoint, while navigation collapses earlier to make room for player state. */
@media (max-width:1080px){
  :root{--ow-player-bottom-clearance:1.75rem}

  .site-header{
    z-index:60;
    display:flex!important;
    grid-template-columns:none!important;
    flex-wrap:nowrap;
  }
  .site-header>.wordmark{grid-column:auto;justify-self:auto}

  .menu-toggle{
    position:relative;
    z-index:90;
    display:flex;
    margin-left:auto;
  }

  .site-header>.nav-links{
    position:absolute!important;
    z-index:80;
    top:100%;
    left:0;
    right:0;
    grid-column:auto;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.4rem clamp(1.25rem,5vw,5rem) .7rem;
    border-top:1px solid rgba(247,244,233,.14);
    border-bottom:1px solid rgba(247,244,233,.14);
    background:var(--ow-header-surface);
    -webkit-backdrop-filter:blur(var(--ow-header-blur));
    backdrop-filter:blur(var(--ow-header-blur));
    box-shadow:0 1rem 2rem rgba(0,0,0,.22);
    transform:none;
  }
  .site-header.menu-open>.nav-links{display:flex}

  .site-header.menu-open .nav-primary-links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:.25rem;
  }
  .nav-links a:not(.nav-cta){display:block;opacity:.9}
  .nav-links a{padding:.9rem 0;font-size:.9rem}
  .nav-primary-links>.nav-link-music{display:none!important}

  .nav-links>.mobile-menu-socials{
    position:static!important;
    display:flex!important;
    align-items:center;
    flex-wrap:wrap;
    gap:.55rem;
    margin-top:.35rem;
    padding-top:1rem;
    border-top:1px solid rgba(247,244,233,.14);
    transform:none!important;
  }
  .nav-links>.mobile-menu-socials a{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:2.65rem;
    height:2.65rem;
    padding:0!important;
    border:1px solid rgba(247,244,233,.18);
    border-radius:50%;
    opacity:.9!important;
  }

  /* Final pre-preview mobile geometry: expanded waveform between the brand and
     player close X, with the hamburger/menu remaining the highest layer. */
  .header-eq{display:none}
  .header-player-eq{
    position:absolute;
    z-index:88;
    top:calc(-4.7rem - var(--ow-mobile-menu-space,0px));
    left:clamp(10.75rem,41vw,13rem);
    right:calc(clamp(1.25rem,5vw,5rem) + 6.35rem);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:auto;
    height:2.75rem;
    overflow:hidden;
    opacity:.62;
  }
  .header-player-eq span{
    min-width:1px;
    max-width:4px;
  }

  .header-player-tray{
    z-index:40;
    padding:.45rem .75rem var(--ow-player-bottom-clearance);
  }
  .site-header.menu-open .header-player-tray{
    top:calc(100% + var(--ow-mobile-menu-space,0px));
  }
  .header-player-inner{width:100%}

  .header-player-close{
    z-index:89;
    top:calc(-4.7rem - var(--ow-mobile-menu-space,0px));
    right:calc(clamp(1.25rem,5vw,5rem) + 3.25rem);
    left:auto;
    width:2.75rem;
    height:2.75rem;
    transform:none;
    font-size:1.2rem;
  }
}

@media (max-width:820px){
  body{
    padding-bottom:calc(4.8rem + env(safe-area-inset-bottom,0px));
  }

  .mobile-music-nav a{
    justify-content:space-between;
    gap:.75rem;
    text-align:left;
  }

  .wordmark .wordmark-mark{
    width:1.65rem!important;
    height:1.65rem!important;
    flex-basis:1.65rem!important;
  }
  .wordmark .wordmark-name{
    font-size:.84rem!important;
    letter-spacing:.15em!important;
  }
}

@media (max-width:520px){
  .header-player-eq{
    top:calc(-4.2rem - var(--ow-mobile-menu-space,0px));
    left:clamp(9.9rem,44vw,11rem);
    right:calc(clamp(1.25rem,5vw,5rem) + 6.15rem);
  }
  .header-player-close{
    top:calc(-4.2rem - var(--ow-mobile-menu-space,0px));
  }
  .wordmark{gap:.65rem!important}
  .wordmark .wordmark-mark{
    width:1.55rem!important;
    height:1.55rem!important;
    flex-basis:1.55rem!important;
  }
  .wordmark .wordmark-name{
    font-size:.78rem!important;
    letter-spacing:.14em!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #ow-page-content,
  .header-eq,
  .header-player-eq,
  .header-player-close{transition:none}
  .site-header.is-player-playing .header-eq span,
  .site-header.is-player-playing .header-player-eq span{
    animation:none;
    opacity:.48;
    transform:scaleY(var(--eq-static,.62));
  }
}