/*! player.css v1.0.0 · 2026-08-11 · fc-brands @fcv */
/* ============================================================
   FC Spotify Player  —  temperfest.netlify.app? no: fcbrands-api.netlify.app/player.css
   Custom slim player: collapsed bar -> carat accordion -> fullscreen modal.
   Playback via Spotify's iFrame API (30s previews for logged-out visitors).

   Customizable colors (set on the .fc-spotify-player element, or via
   data-text / data-ui / data-bg / data-modal-bg attributes):
     --fcp-text       text colour
     --fcp-ui         controls / accents
     --fcp-bg         player background
     --fcp-modal-bg   fullscreen modal background
   ============================================================ */
.fc-spotify-player{
  --fcp-text:#ffffff;
  --fcp-ui:#6BCEE8;
  --fcp-bg:rgba(16,24,34,.72);
  --fcp-modal-bg:#0a0f16;
  --fcp-radius:14px;
  --fcp-scrim:rgba(0,0,0,.7);
  --fcp-line:color-mix(in srgb, var(--fcp-text) 16%, transparent);
  --fcp-dim:color-mix(in srgb, var(--fcp-text) 62%, transparent);

  /* Width is controlled by the container (your code block). Optional cap via
     data-maxw / --fcp-maxw; default: fill the bounding box. */
  position:relative; width:100%; max-width:var(--fcp-maxw, none); margin:0;
  color:var(--fcp-text);
  font-family:"helvetica-neue-lt-pro-cond","helvetica-neue-lt-pro",-apple-system,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  text-align:left;
}
.fc-spotify-player, .fc-spotify-player *{text-align:left;}
.fc-spotify-player *{box-sizing:border-box;}
.fc-spotify-player button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;}
.fc-spotify-player img{display:block;}
.fcp-embed{position:fixed;left:0;bottom:0;width:320px;height:80px;opacity:0;pointer-events:none;z-index:-1;border:0;overflow:hidden;}

/* ---- shell ---- */
.fcp-shell{
  background:var(--fcp-bg);
  border:1px solid var(--fcp-line);
  border-radius:var(--fcp-radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}

/* ---- collapsed bar (~68px) ---- */
.fcp-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:68px;}
.fcp-art{width:48px;height:48px;flex:none;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.06);}
.fcp-meta{flex:1;min-width:0;line-height:1.12;}
.fcp-eyebrow{font-size:9px;line-height:1.1;letter-spacing:.2em;text-transform:uppercase;color:var(--fcp-dim);}
.fcp-name{font-weight:800;font-size:15px;line-height:1.15;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-transform:uppercase;margin:1px 0;}
.fcp-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fcp-dim);margin-top:2px;}
.fcp-now{font-size:11.5px;line-height:1.15;letter-spacing:.02em;color:var(--fcp-dim);white-space:nowrap;overflow:hidden;}
.fcp-ctrls{display:flex;align-items:center;gap:6px;flex:none;}
.fcp-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--fcp-text);transition:transform .12s ease,background .15s ease,opacity .15s;}
.fcp-btn:hover{background:color-mix(in srgb,var(--fcp-text) 12%,transparent);}
.fcp-btn:active{transform:scale(.9);}
.fcp-btn svg{width:20px;height:20px;fill:currentColor;}
.fcp-play{width:40px;height:40px;background:var(--fcp-ui);color:#04070d;}
.fcp-play:hover{background:var(--fcp-ui);filter:brightness(1.08);}
.fcp-play svg{width:20px;height:20px;}
.fcp-caret{color:var(--fcp-ui);border:1px solid color-mix(in srgb,var(--fcp-ui) 55%,transparent);}
.fcp-caret svg{transition:transform .28s ease;}
.fc-spotify-player[data-open="1"] .fcp-caret svg{transform:rotate(180deg);}
.fcp-min{color:var(--fcp-ui);}
.fcp-min svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}   /* lucide = stroke icon */

/* ---- mini mode: ANIMATED shrink to an avatar + play/pause box ----
   The shell width scales, the meta + unneeded buttons fade out and collapse,
   the expand button fades in. Expanding reverses it (needed bits fade back). */
.fcp-shell{width:100%;transition:width .42s cubic-bezier(.5,0,.15,1);}
.fcp-bar{transition:gap .42s cubic-bezier(.5,0,.15,1),padding .42s cubic-bezier(.5,0,.15,1);}
.fcp-ctrls{transition:gap .42s cubic-bezier(.5,0,.15,1);}
.fcp-art{transition:width .42s cubic-bezier(.5,0,.15,1),height .42s cubic-bezier(.5,0,.15,1);}
.fcp-meta{transition:opacity .24s ease,flex-grow .42s cubic-bezier(.5,0,.15,1);}
.fcp-ctrls .fcp-btn:not(.fcp-play){max-width:44px;overflow:hidden;
  transition:transform .12s ease,background .15s ease,opacity .24s ease,max-width .42s cubic-bezier(.5,0,.15,1);}
.fcp-progress{transition:height .18s ease,opacity .24s ease;}
.fcp-expand{display:grid;place-items:center;height:34px;max-width:0;margin-left:-10px;flex:none;overflow:hidden;border-radius:50%;
  opacity:0;pointer-events:none;color:var(--fcp-ui);border:1px solid color-mix(in srgb,var(--fcp-ui) 55%,transparent);
  transition:opacity .28s ease,max-width .42s cubic-bezier(.5,0,.15,1),background .15s ease;}
.fcp-expand:hover{background:color-mix(in srgb,var(--fcp-ui) 14%,transparent);}
.fcp-expand svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}   /* lucide = stroke icon */

.fc-spotify-player[data-mini="1"] .fcp-shell{width:160px;}
.fc-spotify-player[data-mini="1"] .fcp-bar{min-height:0;padding:8px;gap:8px;}
.fc-spotify-player[data-mini="1"] .fcp-ctrls{gap:0;}
.fc-spotify-player[data-mini="1"] .fcp-art{width:44px;height:44px;cursor:pointer;}
.fc-spotify-player[data-mini="1"] .fcp-meta{opacity:0;flex-grow:0;overflow:hidden;}
.fc-spotify-player[data-mini="1"] .fcp-ctrls .fcp-btn:not(.fcp-play){opacity:0;max-width:0;pointer-events:none;}   /* keep only PLAY */
.fc-spotify-player[data-mini="1"] .fcp-progress{height:0;opacity:0;}
.fc-spotify-player[data-mini="1"] .fcp-expand{opacity:1;max-width:44px;margin-left:0;pointer-events:auto;}
@media (prefers-reduced-motion:reduce){
  .fcp-shell,.fcp-bar,.fcp-ctrls,.fcp-art,.fcp-meta,.fcp-ctrls .fcp-btn,.fcp-expand,.fcp-progress{transition:none;}
}

/* thin progress line at the base of the bar */
.fcp-progress{position:relative;height:3px;background:color-mix(in srgb,var(--fcp-text) 14%,transparent);cursor:pointer;transition:height .12s ease;}
.fcp-progress:hover{height:5px;}
.fcp-prog-fill{display:block;height:100%;width:0;background:var(--fcp-ui);transition:width .25s linear;}
.fcp-prog-knob{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:var(--fcp-ui);transform:translate(-50%,-50%) scale(0);transition:transform .12s ease;box-shadow:0 0 0 3px color-mix(in srgb,var(--fcp-bg) 65%,transparent);}
.fcp-progress:hover .fcp-prog-knob{transform:translate(-50%,-50%) scale(1);}
.fcp-time{position:absolute;right:8px;bottom:9px;font-size:10px;line-height:1;color:var(--fcp-text);background:color-mix(in srgb,#000 55%,transparent);padding:2px 6px;border-radius:6px;opacity:0;transition:opacity .12s ease;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums;}
.fcp-progress:hover .fcp-time{opacity:1;}

/* ---- accordion drawer (expanded ~+90px) ---- */
.fcp-drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.fc-spotify-player[data-open="1"] .fcp-drawer{grid-template-rows:1fr;}
.fcp-drawer-inner{overflow:hidden;}
.fcp-list{max-height:190px;overflow-y:auto;overflow-x:hidden;padding:2px 6px 6px;-webkit-overflow-scrolling:touch;}
.fcp-list::-webkit-scrollbar{width:6px;}
.fcp-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--fcp-text) 22%,transparent);border-radius:3px;}
.fcp-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .12s;}
.fcp-row:hover{background:color-mix(in srgb,var(--fcp-text) 8%,transparent);}
.fcp-row[aria-current="true"]{background:color-mix(in srgb,var(--fcp-ui) 16%,transparent);}
.fcp-row-n{width:16px;text-align:center;font-size:12px;color:var(--fcp-dim);flex:none;}
.fcp-row[aria-current="true"] .fcp-row-n{color:var(--fcp-ui);}
.fcp-row-body{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;}
.fcp-row-title{display:block;max-width:100%;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;}
.fcp-row-sub{display:block;max-width:100%;font-size:11.5px;color:var(--fcp-dim);white-space:nowrap;overflow:hidden;}
.fcp-explicit{display:inline-grid;place-items:center;width:14px;height:14px;font-size:9px;font-weight:700;background:var(--fcp-dim);color:var(--fcp-bg);border-radius:3px;margin-right:5px;vertical-align:middle;}
.fcp-row-dur{flex:none;margin-left:10px;font-size:12px;color:var(--fcp-dim);font-variant-numeric:tabular-nums;}

.fcp-actions{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--fcp-line);}
.fcp-chip{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--fcp-text) 12%,transparent);color:var(--fcp-text);}
.fcp-spacer{flex:1;}
.fcp-mini{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--fcp-text);transition:background .15s;}
.fcp-mini:hover{background:color-mix(in srgb,var(--fcp-text) 12%,transparent);}
.fcp-mini svg{width:18px;height:18px;fill:currentColor;}
.fcp-mini.fcp-sp svg{fill:#1ED760;}
.fcp-mini.fcp-sc svg{fill:#ff5500;}

/* Spotify <-> SoundCloud toggle (only shown when the artist has both) */
.fcp-toggle{display:inline-flex;align-items:center;border:1px solid var(--fcp-line);border-radius:999px;overflow:hidden;height:20px;margin-bottom:3px;}
.fcp-tg-opt{display:grid;place-items:center;width:27px;height:20px;cursor:pointer;opacity:.4;transition:opacity .15s,background .15s;}
.fcp-tg-opt svg{width:12px;height:12px;fill:currentColor;}
/* single-service static icon in the eyebrow slot */
.fcp-eyebrow-ic{width:15px;height:15px;margin-bottom:3px;}
.fcp-eyebrow-ic svg{width:15px;height:15px;display:block;}
.fcp-eyebrow-ic.fcp-sp svg{fill:#1ED760;}
.fcp-eyebrow-ic.fcp-sc svg{fill:#ff5500;}
.fcp-tg-sp svg{fill:#1ED760;} .fcp-tg-sc svg{fill:#ff5500;}
.fcp-toggle[data-active="spotify"] .fcp-tg-sp,.fcp-toggle[data-active="soundcloud"] .fcp-tg-sc{opacity:1;background:color-mix(in srgb,var(--fcp-text) 14%,transparent);}

/* ---- fullscreen modal ---- */
.fcp-modal-overlay{position:fixed;inset:0;z-index:2147483000;background:var(--fcp-scrim);
  display:flex;padding:18px;opacity:0;transition:opacity .2s ease;}
.fcp-modal-overlay.fcp-show{opacity:1;}
.fcp-modal{position:relative;margin:auto;width:100%;max-width:var(--fcp-modal-maxw,none);max-height:100%;display:flex;flex-direction:column;
  background:var(--fcp-modal-bg);border:1px solid var(--fcp-line);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);}
.fcp-modal-head{display:flex;align-items:center;gap:16px;padding:20px;}
.fcp-modal-art{width:96px;height:96px;flex:none;border-radius:12px;object-fit:cover;}
.fcp-modal-title{flex:1;min-width:0;}
.fcp-modal-title .n{font-size:24px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;}
.fcp-modal-title .s{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fcp-dim);margin-top:4px;}
.fcp-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--fcp-text) 12%,transparent);color:var(--fcp-text);z-index:2;}
.fcp-close:hover{background:color-mix(in srgb,var(--fcp-text) 22%,transparent);}
.fcp-close svg{width:18px;height:18px;fill:currentColor;}
.fcp-modal .fcp-list{max-height:none;flex:1;padding:0 14px 8px;}
.fcp-modal-foot{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--fcp-line);}
.fcp-modal-foot .fcp-play{width:52px;height:52px;}
.fcp-modal-foot .fcp-play svg{width:24px;height:24px;}
.fcp-modal-foot .fcp-btn{width:40px;height:40px;}
.fcp-modal-foot .fcp-btn svg{width:24px;height:24px;}

html.fcp-lock,body.fcp-lock{overflow:hidden;}

/* marquee — Instagram-style scroll for titles that overflow */
.fcp-name,.fcp-now,.fcp-row-title,.fcp-row-sub{overflow:hidden;white-space:nowrap;}
.fcp-scroll{display:inline-block;white-space:nowrap;will-change:transform;}
.fcp-mq .fcp-scroll{animation:fcpMarquee var(--fcp-dur,10s) linear 3s infinite;}
@keyframes fcpMarquee{0%,10%{transform:translateX(0)}45%,55%{transform:translateX(var(--fcp-shift,0))}90%,100%{transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){
  .fcp-drawer,.fcp-caret svg,.fcp-modal-overlay,.fcp-progress i{transition:none;}
  .fcp-mq .fcp-scroll{animation:none;}
}
@media (max-width:520px){
  .fcp-name{font-size:14px;} .fcp-modal-title .n{font-size:20px;} .fcp-modal-art{width:72px;height:72px;}
}

/* ---- intro reveal: zoom the avatar square in, then grow the container right
   to expose the (already full-size) player. First build only. ---- */
.fc-spotify-player{ --fcp-reveal-sq:68px; }

/* ---- loading state: ONLY the avatar square (no shell chrome, no "Loading…") ---- */
.fcp-shell.fcp-square{ width:var(--fcp-reveal-sq); height:var(--fcp-reveal-sq); padding:0;
  display:grid; place-items:center; animation:fcpSqPulse 1.1s ease-in-out infinite; }
.fcp-shell.fcp-square .fcp-art{ width:100%; height:100%; border-radius:var(--fcp-radius); }
@keyframes fcpSqPulse{ 0%,100%{opacity:.82} 50%{opacity:1} }

/* ---- ready: expand the avatar square out to the full player ---- */
.fcp-shell.fcp-in{ animation:fcpReveal .6s cubic-bezier(.5,0,.15,1) both; }
@keyframes fcpReveal{
  0%   { clip-path:inset(0 calc(100% - var(--fcp-reveal-sq)) 0 0 round var(--fcp-radius)); }
  100% { clip-path:inset(0 0 0 0 round var(--fcp-radius)); }
}
@media (prefers-reduced-motion:reduce){ .fcp-shell.fcp-in,.fcp-shell.fcp-square{ animation:none; } }

/* ---- leave: collapse the LIVE player to its avatar box the instant prev/next
   is clicked (JS adds .fcp-leaving) so the shrink starts on click. clip-path
   only = no reflow; frozen at the box until the page transition takes over. ---- */
.fcp-shell.fcp-leaving{ animation:fcpCollapse .28s cubic-bezier(.5,0,.15,1) both; }
@keyframes fcpCollapse{
  0%   { clip-path:inset(0 0 0 0 round var(--fcp-radius)); }
  100% { clip-path:inset(0 calc(100% - var(--fcp-reveal-sq)) 0 0 round var(--fcp-radius)); }
}
@media (prefers-reduced-motion:reduce){ .fcp-shell.fcp-leaving{ animation:none; } }

/* ---- navigation: shrink the full player back TO the avatar square (not to zero).
   Owned here now — REMOVE any ::view-transition-*(fcp) rule from artist-swipe.css
   so they don't conflict. VT pseudos don't inherit the player's custom props, so
   the square (68px) + radius (14px) are literal below. ---- */
.fcp-shell{ view-transition-name:fcp; }
::view-transition-group(fcp){ z-index:6; }
::view-transition-new(fcp){ animation:none; }        /* new page already shows the square */
::view-transition-old(fcp){ animation:fcpShrink .5s cubic-bezier(.5,0,.15,1) both; }
@keyframes fcpShrink{
  0%   { clip-path:inset(0 0 0 0 round 14px); }
  100% { clip-path:inset(0 calc(100% - 68px) 0 0 round 14px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ ::view-transition-old(fcp){ animation:none; } }

:root{--fcv-player-css:"1.0.0";}