/*  ============================================================================
    AltSounds Components — v1.0.0 (Session 2)
    ============================================================================

    Shared component classes that every surface (Mothership, info modal,
    taxonomy pages, future artist pages, tvOS app) should use to render
    common things. These are the visual complements to window.AltsPlayer's
    data layer: one set of CSS classes, one visual language, no re-invention
    per surface.

    RULE: if you need to render a video tile, you use .alts-video-card.
    If the exact styling you need doesn't exist as a variant, you add a
    variant here (and document it on the styleguide) — you don't write a
    new class in your plugin's CSS.

    All components compose from the tokens in altsounds-tokens.css. Every
    value in this file is either a token reference or a structural
    necessity (grid layout, flexbox, etc.).

    ============================================================================
    COMPONENTS INDEX:
      .alts-panel           — glass-card chrome used by cards + modals
      .alts-portrait        — circular avatar (artists) or square thumbnail
      .alts-eyebrow         — small uppercase labels (NOW PLAYING, UP NEXT, etc.)
      .alts-button          — canonical button. Variants: primary, secondary, ghost, icon
      .alts-skeleton        — loading shimmer background
      .alts-video-card      — canonical video tile (thumbnail + title + year)
      .alts-artist-card     — canonical artist tile (portrait + name)
    ============================================================================ */


/* ==========================================================================
   .alts-panel — glass-card chrome
   ==========================================================================

   Used wherever we need the AltSounds "glass panel" look: Now Playing
   panel, section cards, info-modal body, spotlight cards. A subtle
   gradient surface with a thin border and a soft shadow.

   Do NOT use for primary page backgrounds (the page is already dark);
   this is for elevated content sitting ON the page.
   ========================================================================== */

.alts-panel {
    background:
        linear-gradient(180deg,
            var(--alts-surface-2) 0%,
            var(--alts-surface-1) 100%);
    border:          1px solid var(--alts-border-subtle);
    border-radius:   var(--alts-radius-lg);
    box-shadow:      0 1px 0 rgba(255, 255, 255, 0.04) inset, var(--alts-shadow-md);
    padding:         var(--alts-space-lg);
    color:           var(--alts-text);
}

/* Variants — slight tonal shifts for different elevations. */
.alts-panel--flat {
    box-shadow: none;
}
.alts-panel--hero {
    /* Used for the Featured hero slide — slightly stronger lift so it
       reads as the headliner on the page. */
    box-shadow:      var(--alts-shadow-hero);
    border-radius:   var(--alts-radius-lg);
}


/* ==========================================================================
   .alts-portrait — circular avatar / square thumbnail
   ==========================================================================

   Two shapes, one class. Default is circle (for artist portraits — the
   semantic of "this is a person/entity"). Add --square for video-thumb
   style (rectangular content).

   Size is controlled by --alts-portrait-size custom property. Default 72px;
   override per-instance with style="--alts-portrait-size: 120px;".
   ========================================================================== */

.alts-portrait {
    --alts-portrait-size: 72px;
    display:           inline-block;
    width:             var(--alts-portrait-size);
    height:            var(--alts-portrait-size);
    border-radius:     var(--alts-radius-circle);
    background:        var(--alts-surface-3) center/cover no-repeat;
    border:            1px solid var(--alts-border);
    box-shadow:        var(--alts-shadow-sm);
    position:          relative;
    /* Image is applied via inline style: style="background-image:url(...)"
       so CSS stays simple and the JS side just sets one property. */
}

.alts-portrait--square {
    border-radius:     var(--alts-radius-md);
}

/* --live variant: pulse ring behind the portrait signaling "this artist is
   playing right now." Used by the Now Playing panel. The pulse is purely
   decorative (no :hover / :focus behavior) — the portrait itself is not
   interactive in this role. */
.alts-portrait--live::after {
    content:       '';
    position:      absolute;
    inset:         -4px;
    border-radius: inherit;
    border:        2px solid var(--alts-color-accent-50);
    opacity:       0;
    pointer-events: none;
    animation:     alts-portrait-pulse 2.6s ease-out infinite;
}
@keyframes alts-portrait-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.18); }
    100% { opacity: 0;   transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .alts-portrait--live::after { animation: none; }
}


/* ==========================================================================
   .alts-eyebrow — small uppercase labels
   ==========================================================================

   The "NOW PLAYING" / "UP NEXT" / "RECOMMENDED FOR YOU" / "FEATURED ARTIST"
   pattern. Always small, always uppercase, always with wide letter-spacing,
   always green (by default). Accompanied optionally by a leading icon
   (equalizer animation for live states, arrow for up-next, etc.).

   Use: <div class="alts-eyebrow">Now Playing</div>
   With icon: <div class="alts-eyebrow"><i class="fa-..."></i> <span>Label</span></div>
   Live (animated): <div class="alts-eyebrow alts-eyebrow--live">Now Playing</div>
   ========================================================================== */

.alts-eyebrow {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--alts-space-xs);
    font-family:      var(--alts-font);
    font-size:        var(--alts-size-3xs);
    font-weight:      var(--alts-weight-heavy);
    letter-spacing:   var(--alts-tracking-widest);
    text-transform:   uppercase;
    color:            var(--alts-color-accent);
    line-height:      var(--alts-lh-tight);
}
.alts-eyebrow i {
    font-size: var(--alts-size-2xs);
    line-height: 1;
}

/* --live variant: renders the built-in 3-bar equalizer animation as a
   ::before pseudo-element so callers don't have to remember the 3-span
   HTML hack. The ::before creates its own animated bars via CSS gradients. */
.alts-eyebrow--live::before {
    content:      '';
    display:      inline-block;
    width:        12px;
    height:       11px;
    /* Use inline SVG via data URI — 3 bars that animate via CSS is simpler
       but requires child spans. Keep the .alts-eyebrow--live variant's
       HTML clean (just a string label) by using an ::before + animation
       on the background-position of a pre-sized gradient. The alts-eq
       helper below is the 3-span version for places that want more control. */
    background:
        linear-gradient(var(--alts-color-accent), var(--alts-color-accent)) 0 100% / 2.5px 60% no-repeat,
        linear-gradient(var(--alts-color-accent), var(--alts-color-accent)) 50% 100% / 2.5px 100% no-repeat,
        linear-gradient(var(--alts-color-accent), var(--alts-color-accent)) 100% 100% / 2.5px 70% no-repeat;
    /* No animation on the ::before variant — it's static bars. Use
       alts-eq (below) if you want the animated version. */
    vertical-align: middle;
}

/* alts-eq — the 3-span equalizer. Use when you want animated bars and
   don't want the built-in ::before single-state variant above.
   HTML: <span class="alts-eq"><span></span><span></span><span></span></span> */
.alts-eq {
    display:        inline-flex;
    align-items:    flex-end;
    gap:            2px;
    width:          12px;
    height:         11px;
    vertical-align: middle;
}
.alts-eq > span {
    display:          block;
    width:            2.5px;
    background:       var(--alts-color-accent);
    border-radius:    1px;
    animation:        alts-eq-bar 1s ease-in-out infinite;
    transform-origin: bottom;
}
.alts-eq > span:nth-child(1) { height: 60%;  animation-delay: -0.4s; }
.alts-eq > span:nth-child(2) { height: 100%; animation-delay: -0.1s; }
.alts-eq > span:nth-child(3) { height: 70%;  animation-delay: -0.7s; }
@keyframes alts-eq-bar {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1);   }
}
@media (prefers-reduced-motion: reduce) {
    .alts-eq > span { animation: none; transform: scaleY(0.65); }
}


/* ==========================================================================
   .alts-button — canonical button
   ==========================================================================

   One base + four variants. Every AltSounds button everywhere should be
   one of these — the Play/Station/Queue/Info patterns all fit.

   HTML:
     <button class="alts-button alts-button--primary">Label</button>
     <button class="alts-button alts-button--secondary">Label</button>
     <button class="alts-button alts-button--ghost">Label</button>
     <button class="alts-button alts-button--icon" aria-label="...">
       <i class="fa-..."></i>
     </button>

   Primary   — solid green pill, biggest visual weight (Play, main CTA)
   Secondary — outlined pill, medium weight (secondary actions)
   Ghost     — text-only with border-dash, lowest weight (inert/coming-soon)
   Icon      — circular, for info (ⓘ), close (×), menu (≡)
   ========================================================================== */

.alts-button {
    /* Structural defaults — shared across all variants. */
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              var(--alts-space-xs);
    padding:          11px 20px 11px 16px;
    border:           1px solid transparent;
    border-radius:    var(--alts-radius-pill);
    font-family:      var(--alts-font);
    font-size:        var(--alts-size-2xs);
    font-weight:      var(--alts-weight-heavy);
    line-height:      var(--alts-lh-tight);
    letter-spacing:   var(--alts-tracking-wider);
    text-transform:   uppercase;
    text-decoration:  none;
    cursor:           pointer;
    transition:       background var(--alts-transition-normal),
                      border-color var(--alts-transition-normal),
                      color var(--alts-transition-normal),
                      transform var(--alts-transition-fast),
                      box-shadow var(--alts-transition-normal);
    user-select:      none;
}
.alts-button:hover:not(:disabled):not(.alts-button--disabled) {
    transform: translateY(-1px);
}
.alts-button:active:not(:disabled):not(.alts-button--disabled) {
    transform: translateY(0);
}
.alts-button:disabled,
.alts-button.alts-button--disabled {
    cursor:   not-allowed;
    opacity:  0.55;
}
.alts-button i {
    font-size: var(--alts-size-xs);
}

/* ---- primary: solid green pill ---- */
.alts-button--primary {
    background: var(--alts-color-accent);
    color:      var(--alts-color-bg);
    box-shadow: var(--alts-shadow-accent);
}
.alts-button--primary:hover:not(:disabled):not(.alts-button--disabled) {
    box-shadow: var(--alts-shadow-accent-hover);
}

/* ---- secondary: outlined neutral ---- */
.alts-button--secondary {
    background:    var(--alts-surface-3);
    color:         var(--alts-text);
    border-color:  var(--alts-border-strong);
}
.alts-button--secondary:hover:not(:disabled):not(.alts-button--disabled) {
    background:    var(--alts-color-accent-15);
    border-color:  var(--alts-color-accent-50);
    color:         var(--alts-color-accent);
}

/* ---- ghost: text-link-feel, lowest weight. Used for inert/coming-soon. ---- */
.alts-button--ghost {
    background:    transparent;
    color:         var(--alts-text-muted);
    border:        1px dashed var(--alts-border);
    box-shadow:    none;
}
.alts-button--ghost:hover:not(:disabled):not(.alts-button--disabled) {
    background:    var(--alts-surface-1);
    color:         var(--alts-text-dim);
    border-color:  var(--alts-border-strong);
}

/* ---- icon: circular, just an icon child ---- */
.alts-button--icon {
    padding:       0;
    width:         38px;
    height:        38px;
    border-radius: var(--alts-radius-circle);
    background:    var(--alts-surface-3);
    color:         var(--alts-text-dim);
    border:        1px solid var(--alts-border-strong);
}
.alts-button--icon i { font-size: var(--alts-size-sm); }
.alts-button--icon:hover:not(:disabled):not(.alts-button--disabled) {
    background:    var(--alts-color-accent-15);
    border-color:  var(--alts-color-accent-50);
    color:         var(--alts-color-accent);
}


/* ==========================================================================
   .alts-skeleton — loading shimmer
   ==========================================================================

   Use as a class on any element that should display a pulsing
   placeholder while real content loads. Works on any shape — the
   shimmer is a gradient animation on the element's background, so
   put it on whichever element should pulse.

   HTML:
     <div class="alts-skeleton" style="height: 14px; width: 60%;"></div>
     <div class="alts-portrait alts-skeleton"></div>
     <article class="alts-video-card alts-video-card--skeleton">...</article>
   ========================================================================== */

@keyframes alts-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.alts-skeleton,
.alts-skeleton--line,
.alts-video-card--skeleton .alts-video-card__thumb,
.alts-video-card--skeleton .alts-video-card__title,
.alts-video-card--skeleton .alts-video-card__meta {
    background:
        linear-gradient(90deg,
            var(--alts-surface-2) 0%,
            var(--alts-surface-4) 50%,
            var(--alts-surface-2) 100%);
    background-size:  200% 100%;
    animation:        alts-skel-shimmer 1.6s ease-in-out infinite;
    color:            transparent !important;
    border-radius:    var(--alts-radius-sm);
    pointer-events:   none;
}
@media (prefers-reduced-motion: reduce) {
    .alts-skeleton,
    .alts-skeleton--line,
    .alts-video-card--skeleton .alts-video-card__thumb,
    .alts-video-card--skeleton .alts-video-card__title,
    .alts-video-card--skeleton .alts-video-card__meta {
        animation: none;
        background: var(--alts-surface-3);
    }
}


/* ==========================================================================
   .alts-video-card — canonical video tile
   ==========================================================================

   The universal video tile. Same look everywhere: info modal, Mothership
   Now Playing recents, future artist page galleries, future tvOS app.

   HTML:
     <article class="alts-video-card">
       <a class="alts-video-card__link" href="...">
         <div class="alts-video-card__thumb" style="background-image:url(...)">
           <span class="alts-video-card__badge-year">2024</span>
           <span class="alts-video-card__play">
             <i class="fa-solid fa-play"></i>
           </span>
         </div>
         <div class="alts-video-card__body">
           <h4 class="alts-video-card__title">Song Title</h4>
           <p class="alts-video-card__meta">Artist · 2024</p>
         </div>
       </a>
     </article>

   VARIANTS:
     --sm         smaller tile for narrow panels (Now Playing)
     --lg         larger tile for info modal / YMAL feel
     --now-playing highlighted green ring, suppresses play button
     --skeleton   loading state (body elements pulse)

   The year badge + play button are CHILDREN of __thumb so they position
   absolutely relative to the thumbnail. The link wraps the whole card so
   the entire tile is clickable.
   ========================================================================== */

.alts-video-card {
    display:        block;
    position:       relative;
    min-width:      0;        /* allows grid children to shrink properly */
}
.alts-video-card__link {
    display:         flex;
    flex-direction:  column;
    gap:             var(--alts-space-xs);
    color:           var(--alts-text);
    text-decoration: none;
    transition:      transform var(--alts-transition-normal);
}
.alts-video-card__link:hover {
    transform: translateY(-2px);
}
.alts-video-card__thumb {
    position:         relative;
    aspect-ratio:     var(--alts-aspect-video);
    background:       var(--alts-color-bg-raised) center/cover no-repeat;
    border-radius:    var(--alts-radius-md);
    border:           1px solid var(--alts-border-subtle);
    overflow:         hidden;
}
/* Year badge — always positioned top-right of the thumb. */
.alts-video-card__badge-year {
    position:        absolute;
    top:             var(--alts-space-sm);
    right:           var(--alts-space-sm);
    display:         inline-flex;
    align-items:     center;
    gap:             var(--alts-space-2xs);
    padding:         3px 7px;
    border-radius:   var(--alts-radius-sm);
    background:      rgba(0, 0, 0, 0.72);
    color:           var(--alts-text);
    font-family:     var(--alts-font);
    font-weight:     var(--alts-weight-bold);
    font-size:       var(--alts-size-2xs);
    line-height:     var(--alts-lh-tight);
    z-index:         var(--alts-z-overlay);
    pointer-events:  none;
}
.alts-video-card__badge-year i {
    color:     var(--alts-color-accent);
    font-size: var(--alts-size-2xs);
}
/* Large circular green-bordered play button — appears on every
   card, brighter on hover. Matches the YMAL tile treatment exactly. */
.alts-video-card__play {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    width:           44px;
    height:          44px;
    border-radius:   var(--alts-radius-circle);
    border:          2px solid var(--alts-color-accent);
    background:      rgba(0, 0, 0, 0.25);
    color:           var(--alts-color-accent);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--alts-size-sm);
    padding-left:    2px;   /* optical center for the play triangle */
    z-index:         var(--alts-z-overlay);
    transition:      transform var(--alts-transition-normal),
                     background var(--alts-transition-normal);
}
.alts-video-card__link:hover .alts-video-card__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0, 0, 0, 0.45);
}
.alts-video-card__body {
    padding: var(--alts-space-xs) 2px 0;
}
.alts-video-card__title {
    margin:           0;
    font-family:      var(--alts-font);
    font-weight:      var(--alts-weight-bold);
    font-size:        var(--alts-size-xs);
    line-height:      var(--alts-lh-normal);
    color:            var(--alts-text-dim);
    letter-spacing:   0;
    /* Two-line clamp — long titles truncate rather than pushing layout. */
    display:             -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
}
.alts-video-card__link:hover .alts-video-card__title { color: var(--alts-text); }
.alts-video-card__meta {
    margin:       0;
    font-family:  var(--alts-font);
    font-weight:  var(--alts-weight-medium);
    font-size:    11px;  /* between size tokens — keep literal */
    color:        var(--alts-text-muted);
    line-height:  var(--alts-lh-normal);
    display:             -webkit-box;
    -webkit-line-clamp:  1;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
}

/* -- --lg variant: bigger play button, larger title -- */
.alts-video-card--lg .alts-video-card__play  { width: 56px; height: 56px; font-size: var(--alts-size-md); }
.alts-video-card--lg .alts-video-card__title { font-size: var(--alts-size-md); }

/* -- --sm variant: smaller play button, tighter title -- */
.alts-video-card--sm .alts-video-card__play  { width: 36px; height: 36px; font-size: var(--alts-size-xs); }
.alts-video-card--sm .alts-video-card__title { font-size: 11px; }

/* -- --now-playing variant: green ring, no play button, adds "NOW" badge -- */
.alts-video-card--now-playing .alts-video-card__thumb {
    box-shadow: 0 0 0 2px var(--alts-color-accent);
}
.alts-video-card--now-playing .alts-video-card__play {
    display: none;
}
.alts-video-card--now-playing .alts-video-card__link {
    /* Subtle cue that this one isn't a "click to play" — it IS
       already playing. */
    cursor: default;
}
.alts-video-card--now-playing .alts-video-card__link:hover {
    transform: none;
}
/* NOW badge — top-left, green, matches the YMAL year-badge chrome. */
.alts-video-card__badge-now {
    position:         absolute;
    top:              var(--alts-space-sm);
    left:             var(--alts-space-sm);
    padding:          3px 7px;
    border-radius:    var(--alts-radius-sm);
    background:       var(--alts-color-accent);
    color:            var(--alts-color-bg);
    font-family:      var(--alts-font);
    font-weight:      var(--alts-weight-heavy);
    font-size:        8.5px;  /* smaller than size-3xs, intentional */
    letter-spacing:   var(--alts-tracking-wider);
    line-height:      var(--alts-lh-tight);
    z-index:          var(--alts-z-overlay);
    pointer-events:   none;
}

/* -- --skeleton variant: thumb, title, meta all pulse -- */
.alts-video-card--skeleton .alts-video-card__thumb {
    background-image: none;
}
.alts-video-card--skeleton .alts-video-card__play,
.alts-video-card--skeleton .alts-video-card__badge-year,
.alts-video-card--skeleton .alts-video-card__badge-now {
    display: none;
}
.alts-video-card--skeleton .alts-video-card__title,
.alts-video-card--skeleton .alts-video-card__meta {
    min-height: 10px;
}


/* ==========================================================================
   .alts-artist-card — canonical artist tile
   ==========================================================================

   Portrait-style artist tile. Different from video card because it's
   square-ish with the name overlaid on a gradient scrim at the bottom.
   This pattern dominates the Mothership's "favorite artists" row.

   HTML:
     <a class="alts-artist-card" href="...">
       <div class="alts-artist-card__bg" style="background-image:url(...)"></div>
       <div class="alts-artist-card__gradient"></div>
       <div class="alts-artist-card__body">
         <div class="alts-artist-card__name">Artist Name</div>
       </div>
     </a>
   ========================================================================== */

.alts-artist-card {
    position:        relative;
    display:         block;
    aspect-ratio:    var(--alts-aspect-tile);
    border-radius:   var(--alts-radius-md);
    overflow:        hidden;
    text-decoration: none;
    color:           var(--alts-text);
    background:      var(--alts-color-bg-raised);
    border:          1px solid var(--alts-border-subtle);
    transition:      transform var(--alts-transition-normal);
}
.alts-artist-card:hover {
    transform: translateY(-2px);
}
.alts-artist-card__bg {
    position:          absolute;
    inset:             0;
    background-size:   cover;
    background-position: center;
    transition:        transform var(--alts-transition-slow),
                       filter var(--alts-transition-normal);
    filter:            brightness(0.85);
}
.alts-artist-card:hover .alts-artist-card__bg {
    transform: scale(1.06);
    filter:    brightness(1);
}
.alts-artist-card__gradient {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
                    to bottom,
                    transparent 40%,
                    rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
}
.alts-artist-card__body {
    position:   absolute;
    inset:      auto 0 0 0;
    padding:    var(--alts-space-md);
    z-index:    var(--alts-z-raised);
}
.alts-artist-card__name {
    font-family:  var(--alts-font);
    font-weight:  var(--alts-weight-bold);
    font-size:    var(--alts-size-md);
    line-height:  var(--alts-lh-snug);
    color:        var(--alts-text);
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens:         auto;
    display:             -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
}