/*
 * apps/web/lineup/art.css — League Art Integration (scoped to /lineup)
 * Mounts assets from /assets/art/league/ onto the lineup battle page.
 * Worker: art/league-lineup — 2026-06-10
 *
 * Mount points:
 *   1. .lu-art-band      — full-width battle backdrop band (lineup-battle-band.png)
 *   2. .lu-battle-spine  — VS spine emblem (lineup-vs-spine.png)
 *   3. .card-header-band — per-position emblems (pos-emblem-*.png) via ::before
 *   4. .lu-bench-band    — bench section separator (lineup-bench-band.png)
 *   5. .lu-locked-overlay— locked state art (lineup-locked-state.png)
 *   6. battle-reveal     — win/loss accents via .battle-reveal-win/loss img
 *
 * Opacity discipline (ART-SPEC §Opacity):
 *   - Bands: ::after scrim min 35% black before any text
 *   - Position emblems: rendered at opacity .22 (pure art layer behind card content)
 *   - Win/loss accents: max-opacity 0.85
 *
 * Reduced-motion: all keyframe animations wrapped.
 * Mobile (<760px): art scales gracefully; VS spine hidden (already hidden by base CSS).
 */

/* ── 1. Battle Backdrop Band ─────────────────────────────────────────────── */
/*
 * Inserted as first child of .lu-battle-hero by the HTML below.
 * Decorative band — uses background-image, not <img>, per ART-SPEC.
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-art-band {
  position: relative;
  width: 100%;
  /* Taller band so the cinematic stadium actually reads — 80px crushed the
     21:9 art into an unrecognizable dark sliver (Brock: "compressed / cut off /
     faded"). */
  min-height: 124px;
  overflow: hidden;
  flex-shrink: 0;
  /* New cohesive Saturday-night band (webp ~56KB vs the old 600KB+ PNG). */
  background-image: url('/assets/art/league/lineup-battle-band.webp?v=20260613-art3');
  background-size: cover;
  /* Anchor on the lit stadium rim (upper-mid of the frame) instead of the dark
     sky, so the gold light towers are what shows through. */
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Scrim — lighter at the top so the stadium lights glow through, darker at the
   bottom where the runner/week-row text sits (still ≥35% before any text). */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-art-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5,5,5,.34) 0%,
    rgba(5,5,5,.52) 55%,
    rgba(5,5,5,.86) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Inner content slot (e.g. page title text if any) sits above scrim */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-art-band__inner {
  position: relative;
  z-index: 2;
  padding: 12px 16px 8px;
}

/* Mobile: shrink band height */
@media (max-width: 760px) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .lu-art-band {
    min-height: 52px;
  }
}

/* Reduced-motion: no shimmer on the band */
@media (prefers-reduced-motion: reduce) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .lu-art-band {
    background-attachment: scroll;
  }
}

/* ── 2. VS Spine Emblem ──────────────────────────────────────────────────── */
/*
 * The VS spine emblem image is injected by HTML into .lu-spine-vs-img wrapper.
 * Hidden on mobile (already handled by .lu-battle-spine display:none at <1100px).
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-spine-vs-img {
  display: block;
  width: 60px;
  height: 240px;
  object-fit: contain;
  margin: 8px auto;
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

/* Subtle entrance animation */
@media (not (prefers-reduced-motion: reduce)) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .lu-spine-vs-img {
    animation: lu-spine-fadein 0.6s ease-out forwards;
  }
  @keyframes lu-spine-fadein {
    from { opacity: 0; transform: scaleY(0.85); }
    to   { opacity: 0.7; transform: scaleY(1); }
  }
}

/* ── 3. Position Emblems on .card-header-band ────────────────────────────── */
/*
 * Mounted as CSS background on .card-header-band when a position emblem
 * data attribute is present on the parent .player-card.
 * Art is decorative — sits at low opacity so school logo and card text win.
 *
 * Per ART-SPEC: mount via <img aria-hidden="true" loading="lazy">.
 * We use a dedicated .pos-emblem-img element injected by the JS patch below,
 * sitting absolutely in the header-band at low opacity behind the logo.
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .pos-emblem-img {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 36px;
  height: 36px;
  object-fit: contain;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* On hover, let the emblem glow slightly more — art backing reward */
:is(html[data-route="/lineup"],html[data-route="/league"]) .player-card:hover .pos-emblem-img {
  opacity: 0.38;
  transition: opacity 0.2s ease;
}

/* Mobile: slightly smaller */
@media (max-width: 760px) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .pos-emblem-img {
    width: 28px;
    height: 28px;
  }
}

/* Reduced-motion: no transition on emblem opacity */
@media (prefers-reduced-motion: reduce) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .player-card:hover .pos-emblem-img {
    transition: none;
  }
}

/* ── 4. Bench Band ───────────────────────────────────────────────────────── */
/*
 * Injected as .lu-bench-band div just before the bench section by JS patch.
 * background-image band, per ART-SPEC §2.10.
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-bench-band {
  position: relative;
  width: 100%;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px 0 4px;
  background-image: url('/assets/art/league/lineup-bench-band.png?v=20260610-art1');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Scrim so "BENCH" text label reads over it */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-bench-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,5,5,.50);
  pointer-events: none;
}

/* Bench band label on top */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-bench-band__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 1;
  font-family: var(--f-display, 'Graduate', sans-serif);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

/* Mobile: bench band scales */
@media (max-width: 760px) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .lu-bench-band {
    height: 28px;
  }
}

/* ── 5. Locked State Overlay ─────────────────────────────────────────────── */
/*
 * .lu-locked-overlay div is injected by JS when lineupState.locked is true.
 * Fades in via CSS transition.
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-locked-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(220px, 50vw);
  height: min(220px, 50vw);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.4s ease;
}

:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-locked-overlay.is-visible {
  opacity: 1;
}

:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-locked-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Reduced-motion: instant show, no fade */
@media (prefers-reduced-motion: reduce) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .lu-locked-overlay {
    transition: none;
  }
}

/* ── 6. Battle Reveal Win/Loss Accents ───────────────────────────────────── */
/*
 * .lu-reveal-accent img elements are absolutely positioned over cards.
 * Added by JS during the reveal animation when C18 fires.
 * Per ART-SPEC: opacity 0 → 0.85 on .revealed class.
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-reveal-accent {
  position: absolute;
  inset: -16px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-reveal-accent.revealed {
  opacity: 0.85;
}

:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-reveal-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Reduced-motion: still show, but no transition */
@media (prefers-reduced-motion: reduce) {
  :is(html[data-route="/lineup"],html[data-route="/league"]) .lu-reveal-accent {
    transition: none;
  }
}

/* ── 7. Card-spotlight aceternity enhancement on player-cards ─────────────── */
/*
 * Per ACETERNITY-COMPONENTS.md §1: card-spotlight provides cursor-tracking
 * radial glow on cards. Applied to .player-card via class addition in HTML.
 * Since it's in a separate CSS file we duplicate only the essential
 * spotlight-layer trigger so we don't import the full file (which is
 * already available if loaded as a stylesheet, but cards are dynamic).
 * We apply it as a route-scoped override that activates when .card-spotlight
 * class is on the player-card (JS will add this class after init).
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .player-card.card-spotlight::before {
  background: radial-gradient(
    circle 200px at
    calc(var(--spotlight-x, 50%) * 1%)
    calc(var(--spotlight-y, 0%) * 1%),
    rgba(255, 45, 45, .14)  0%,
    rgba(255, 26, 26, .07) 40%,
    transparent             70%
  );
}

/* ── 8. Hover-border-gradient on icon runner buttons ─────────────────────── */
/*
 * Per ACETERNITY-COMPONENTS.md §4: .hbg-btn wrapper enhances icon-runner
 * buttons with gradient border on hover. Applied to .lu-icon-btn via
 * additional class; handled purely by hover-border-gradient.css which is
 * loaded in <head>.
 * No overrides needed here — just document the intention.
 */

/* ── Utility: bg-grid on the battle hero area ───────────────────────────── */
/*
 * Per ACETERNITY-COMPONENTS.md §3: bg-grid applied to .lu-battle-hero gives
 * the page a subtle dark grid. Uses .bg-grid--hero (60px cells) so it reads
 * as deliberate texture rather than noise.
 * The class is added to lu-battle-hero in HTML.
 */
:is(html[data-route="/lineup"],html[data-route="/league"]) .lu-battle-hero.bg-grid {
  /* Override the bg-grid base color to not bleed through the art band */
  --bg-grid-cell: 60px;
}