/* V3.44 — One compact, first-party music drawer. Playback is still driven by
   the existing consent-gated SoundCloud widget, with no duplicate player UI. */
body.fxv2 .fxv2-header .fxv318-music-panel.fxv344-music-panel {
  width:min(314px,calc(100vw - 20px))!important;
  max-height:min(490px,calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 12px))!important;
  padding:12px!important;
  gap:8px!important;
  border-radius:12px!important;
  background:#0c1e12fc!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-heading {
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  padding:0 0 8px!important;
  margin:0!important;
  border-bottom:1px solid #376443!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-heading strong {
  font:750 14px/1.3 system-ui,sans-serif!important;
  color:#f7fff8!important;
  -webkit-text-fill-color:#f7fff8!important;
  letter-spacing:0!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-status {
  margin:0!important;
  min-height:0!important;
  font:500 11px/1.4 system-ui,sans-serif!important;
  color:#d6ead9!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions button {
  display:grid;
  place-items:center;
  min-height:40px!important;
  padding:7px 5px!important;
  border-radius:7px!important;
  line-height:1!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions button[hidden] {display:none!important}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions [data-fxv318-load] {
  grid-column:1/-1!important;
  font:700 12px/1.2 system-ui,sans-serif!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions button svg {
  width:20px;height:20px;display:block;pointer-events:none;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions button svg[hidden] {display:none!important}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list {
  order:5!important;
  height:auto!important;
  min-height:0!important;
  max-height:min(226px,35dvh)!important;
  margin:0!important;
  flex:0 1 auto!important;
  border-block:1px solid #315a3e!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list button {
  min-height:43px!important;
  padding:9px 10px!important;
  text-align:left!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list .fxv318-music-placeholder {
  padding:8px 3px;
  margin:0;
  color:#c5d9cb;
  font:500 11px/1.4 system-ui,sans-serif;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv344-music-extra {
  order:7!important;
  flex:0 0 auto!important;
  min-height:0;
  margin:0;
  padding-top:2px;
  border:0;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv344-music-extra summary {
  cursor:pointer;
  padding:5px 0!important;
  font:600 11px/1.4 system-ui,sans-serif!important;
  text-align:left!important;
  color:#d0ecd5!important;
  list-style-position:inside;
}
body.fxv2 .fxv2-header .fxv344-music-panel>.fxv344-music-extra[open] {
  border-top:1px solid #33543b;
}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv344-music-extra .fxv318-music-options {
  display:flex!important;
  justify-content:space-between!important;
  margin:8px 0 12px!important;
  gap:9px!important;
}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv344-music-extra .fxv320-music-details-body {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:0 0 5px;
}
body.fxv2 .fxv2-header .fxv344-music-panel .fxv344-music-extra .fxv318-music-privacy {
  margin:7px 0 0!important;
  padding-top:7px;
  border-top:1px solid #31543c;
  font-size:10px!important;
  color:#9fb9a6!important;
}
@media(max-width:760px), (max-height:500px) and (pointer:coarse) {
  body.fxv2 .fxv2-header .fxv318-music-panel.fxv344-music-panel {
    position:fixed!important;
    left:max(9px,env(safe-area-inset-left,0px))!important;
    right:max(9px,env(safe-area-inset-right,0px))!important;
    width:auto!important;
    max-width:330px!important;
    margin-inline:auto!important;
    height:auto!important;
    bottom:auto!important;
    max-height:min(490px,calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 12px))!important;
    overflow-y:auto!important;
  }
  body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-list {
    max-height:min(210px,30dvh)!important;
  }
  body.fxv2 .fxv2-header .fxv344-music-panel>.fxv318-music-actions button {
    min-height:44px!important;
  }
}

/* V3.44 — FXCHS ident. Keep the genuine original raster letters; only the
   final 's' is isolated from that same file to allow its small right lean.
   The paw sits at a deliberate angle to the f, never rigidly parallel. */
body.fxv2 .fxv329-brand-paw {
  transform-origin:50% 78%;
  transform:translate(-.055em,.055em) rotate(-13deg);
}
body.fxv2 .fxv329-brand-type {overflow:visible!important}
body.fxv2 .fxv329-brand-type>img.fxv344-logo-letters {
  clip-path:inset(0 .57em 0 .895em);
}
body.fxv2 .fxv329-brand-type>.fxv344-logo-last-s {
  position:absolute;z-index:2;display:block;
  left:2.10em;top:0;width:.58em;height:1em;
  transform-origin:37% 80%;
  transform:translate(.025em,.012em) rotate(6.5deg);
  pointer-events:none;
}
body.fxv2 .fxv329-brand-type>.fxv344-logo-last-s img {
  position:absolute!important;left:-3.0em!important;top:0!important;
  display:block;width:3.875em!important;height:1em!important;
  max-width:none!important;object-fit:fill;
  clip-path:inset(0 .29em 0 2.98em);
}

/* A slightly ascending LINE, not a curve: alternating tracks leave a subtle
   diagonal wake. Whole letters arrive together, without cropping at edges. */
body.fxv2 .fxv2-header.fxv331-ident-running .fxv331-header-trail i {
  animation:fxv344-fox-step 2.65s cubic-bezier(.15,.65,.36,1) both!important;
  animation-delay:var(--v331-step-delay,0s)!important;
}
body.fxv2 .fxv2-header.fxv331-ident-running .fxv329-brand-paw {
  animation:fxv344-emblem-arrives 4.6s cubic-bezier(.22,.74,.34,1) both!important;
}
body.fxv2 .fxv2-header.fxv331-ident-running .fxv329-brand-type {
  animation:fxv344-word-arrives 4.6s cubic-bezier(.22,.74,.34,1) both!important;
}
body.fxv2 .fxv2-header.fxv331-ident-running .fxv344-logo-last-s {
  animation:fxv344-s-lean 4.6s cubic-bezier(.18,.72,.34,1) both;
}
@keyframes fxv344-fox-step {
  0%,8%{opacity:0;transform:translate(-72%,-43%) rotate(var(--v331-step-angle,90deg)) scale(.73);filter:blur(1px)}
  17%,48%{opacity:.87;transform:translate(-50%,-50%) rotate(var(--v331-step-angle,90deg)) scale(1);filter:none}
  83%{opacity:.30;filter:none}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--v331-step-angle,90deg)) scale(1);filter:none}
}
@keyframes fxv344-emblem-arrives {
  0%,24%{opacity:0;transform:translate(-.15em,.12em) rotate(-26deg) scale(.86);filter:blur(2px)}
  41%{opacity:1;transform:translate(-.06em,.05em) rotate(-17deg) scale(1.035);filter:blur(0)}
  58%,100%{opacity:1;transform:translate(-.055em,.055em) rotate(-13deg) scale(1);filter:none}
}
@keyframes fxv344-word-arrives {
  0%,32%{opacity:0;transform:translate(13px,2px) scale(.975);filter:blur(2.8px)}
  49%{opacity:.86;transform:translate(2px,0) scale(1.006);filter:blur(.5px)}
  66%,100%{opacity:1;transform:none;filter:none}
}
@keyframes fxv344-s-lean {
  0%,48%{transform:translate(0,.025em) rotate(-2deg)}
  73%{transform:translate(.028em,.012em) rotate(9deg)}
  100%{transform:translate(.025em,.012em) rotate(6.5deg)}
}

/* A last glint runs through the letters, masked to the existing wordmark;
   there is no glowing rectangle across the header. */
body.fxv2 .fxv329-brand-type::after {
  content:"";position:absolute;z-index:3;left:0;top:0;
  width:2.10em;height:1em;pointer-events:none;opacity:0;
  background:linear-gradient(103deg,transparent 34%,rgba(255,255,255,.78) 51%,transparent 65%);
  -webkit-mask-image:url('/assets/fx319/fxchs-logo-v6-cropped.png');
  -webkit-mask-size:3.875em 1em;-webkit-mask-position:-.892em 0;-webkit-mask-repeat:no-repeat;
  mask-image:url('/assets/fx319/fxchs-logo-v6-cropped.png');
  mask-size:3.875em 1em;mask-position:-.892em 0;mask-repeat:no-repeat;
  transform:translateX(-140%);
}
body.fxv2 .fxv2-header.fxv331-ident-running .fxv329-brand-type::after {
  animation:fxv344-logo-glint 4.65s ease-in-out both;
}
@keyframes fxv344-logo-glint {
  0%,62%{opacity:0;transform:translateX(-140%)}
  67%{opacity:.65}
  87%{opacity:.50;transform:translateX(125%)}
  92%,100%{opacity:0;transform:translateX(125%)}
}

/* Outro starts while the cinematic shutter closes. One small departing step
   and a whole-word fade; no full-page logo layer and no clipped glyphs. */
body.fxv2 .fxv2-header.fxv344-ident-departing .fxv329-brand-type {
  animation:fxv344-word-out .78s cubic-bezier(.5,0,.8,.5) both!important;
}
body.fxv2 .fxv2-header.fxv344-ident-departing .fxv329-brand-paw {
  animation:fxv344-paw-out .78s cubic-bezier(.5,0,.8,.5) both!important;
}
body.fxv2 .fxv2-header.fxv344-ident-departing .fxv331-header-trail i {
  animation:fxv344-out-step .6s ease-out both!important;
  animation-delay:var(--v344-out-delay,0s)!important;
}
@keyframes fxv344-word-out {
  0%,15%{opacity:1;transform:none;filter:none}
  100%{opacity:0;transform:translate(9px,-1px) scale(.985);filter:blur(2px)}
}
@keyframes fxv344-paw-out {
  0%{opacity:1;transform:translate(-.055em,.055em) rotate(-13deg)}
  100%{opacity:0;transform:translate(.08em,-.1em) rotate(3deg) scale(.8)}
}
@keyframes fxv344-out-step {
  0%,15%{opacity:0;transform:translate(-68%,-42%) rotate(var(--v331-step-angle,90deg)) scale(.65)}
  45%{opacity:.7;transform:translate(-50%,-50%) rotate(var(--v331-step-angle,90deg)) scale(1)}
  100%{opacity:0;transform:translate(-45%,-58%) rotate(var(--v331-step-angle,90deg)) scale(.9)}
}
@media(prefers-reduced-motion:reduce) {
  body.fxv2 .fxv2-header .fxv329-brand-paw {transform:translate(-.055em,.055em) rotate(-13deg)!important}
  body.fxv2 .fxv2-header .fxv329-brand-type,
  body.fxv2 .fxv2-header .fxv329-brand-type::after,
  body.fxv2 .fxv2-header .fxv331-header-trail i {animation:none!important}
  body.fxv2 .fxv2-header .fxv329-brand-type {opacity:1!important;transform:none!important}
  body.fxv2 .fxv2-header .fxv331-header-trail i {opacity:0!important}
}
