/* MaiArchive homepage. Loads after base.css (tokens, header, buttons, footer).
   Layout: sticky header with search → one-line live status → title + actions → facet chips
   (filters open in one non-modal popover) → song grid. */

/* ---------- Live status ticker ---------- */
.ticker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px;
  min-height: 46px; margin-top: 10px; padding: 0 6px 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-size: 12px; color: var(--muted);
}
.ticker-track { display: flex; align-items: center; gap: 18px; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.ticker-track::-webkit-scrollbar { display: none; }
.ticker-live { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--text); font-weight: 650; }
.ticker-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.4; } }
.queue-stats-row, .queue-lanes-row { display: flex; align-items: center; gap: 16px; flex: none; }
.queue-stat-chip { display: inline-flex; align-items: baseline; gap: 5px; }
.queue-stat-label { color: var(--muted); }
.queue-stat-value { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.stat-count-toggle { cursor: pointer; }
.stat-transfer-toggle { padding: 0; border: 0; background: none; font-size: inherit; }
.stat-transfer-toggle:hover, .stat-count-toggle:hover { color: var(--accent); }
.queue-stat-pressure.is-low .queue-stat-value { color: var(--ok); }
.queue-stat-pressure.is-medium .queue-stat-value { color: var(--warn); }
.queue-stat-pressure.is-high .queue-stat-value { color: var(--hot); }
.queue-stat-pressure.is-critical .queue-stat-value { color: var(--bad); }
#statActivity.is-busy .queue-stat-value { color: var(--accent); }
.ticker-sep { width: 1px; height: 16px; flex: none; background: var(--line); }
.queue-pill { display: inline-flex; align-items: center; gap: 6px; }
.queue-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.queue-pill strong { color: var(--text); font-weight: 600; }
.queue-pill-text { color: var(--muted); }
.queue-pill.is-active::before { background: var(--accent); animation: live 1.2s ease-in-out infinite; }
.queue-pill.is-active .queue-pill-text { color: var(--accent); }
.delivery-lanes-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%;
  margin-right: 10px; padding: 10px 0 12px; border-top: 1px solid var(--line);
}
.delivery-lanes-row::before { content: "正在下发"; flex: none; margin-right: 4px; color: var(--muted); font-weight: 600; }
.delivery-lanes-row.is-idle { display: none; }
.delivery-lane-item {
  display: inline-flex; align-items: center; gap: 8px; max-width: 280px; overflow: hidden;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease), max-width 400ms var(--ease), padding 400ms var(--ease);
}
.delivery-lane-item.is-visible { opacity: 1; transform: none; }
.delivery-lane-item.is-exiting { opacity: 0; transform: scale(0.94); max-width: 0 !important; padding-left: 0; padding-right: 0; border-width: 0; }
.delivery-lane-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.delivery-lane-bar-wrap { width: 44px; height: 4px; flex: none; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.delivery-lane-bar { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 350ms ease; }
.delivery-lane-pct { flex: none; font-variant-numeric: tabular-nums; }
.delivery-lane-item.is-complete .delivery-lane-pct { color: var(--ok); }
.delivery-lane-sep { display: none; }
.delivery-lane-wait { flex: none; }
.queue-stat-link { flex: none; color: var(--accent); font-weight: 600; }
.queue-stat-link::after { content: " →"; display: inline-block; transition: transform 200ms var(--ease); }
.queue-stat-link:hover::after { transform: translateX(3px); }
.archive-sponsor {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 34px; padding: 0 12px; border-radius: 9px; color: var(--muted); white-space: nowrap;
  transition: background 160ms ease;
}
.archive-sponsor:hover { background: var(--surface-2); }
.archive-sponsor strong { color: var(--text); }
.archive-sponsor:hover strong { color: var(--accent); }
.sponsor-tag { padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; }

/* ---------- Library head ---------- */
.library-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 30px 0 14px; }
.library-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
#archiveTitle { font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.stats-text { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.head-actions { display: flex; gap: 8px; flex: none; }

/* Custom multi-select: the status line becomes a floating action bar. */
.stats-text:has(.stats-action) {
  position: fixed; left: 50%; bottom: 20px; z-index: 80;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg); box-shadow: var(--shadow-pop);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transform: translateX(-50%); animation: bar-in 320ms var(--spring);
}
@keyframes bar-in { from { opacity: 0; transform: translate(-50%, 16px); } }
.stats-action { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--bg) 16%, transparent); color: inherit; font-size: 12px; font-weight: 700; }
.stats-action:first-of-type { background: var(--bg); color: var(--text); }
.stats-action:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Popovers (shared) ---------- */
.pop {
  position: absolute; z-index: 70;
  padding: 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-pop);
  visibility: hidden; opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top left;
  transition: opacity 180ms ease, transform 240ms var(--ease), visibility 0s linear 240ms;
}
.pop.open {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity 180ms ease, transform 240ms var(--ease), visibility 0s;
}
.pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pop-head h2 { font-size: 15px; font-weight: 700; }
.pop-hint, .pop-note { color: var(--muted); font-size: 12px; }
.pop-note { margin: 12px 0; }

/* Batch download */
.batch-pop { top: calc(100% + 8px); right: 0; width: min(600px, calc(100vw - 32px)); transform-origin: top right; }
.batch-download-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.oc-mode-toggle.active, .all-versions-download-btn.oc-mode-active { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
.version-download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.version-dl-btn, .version-filter-btn {
  display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.25; text-align: center;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms var(--ease), opacity 140ms ease;
}
.version-dl-btn img, .version-filter-btn img { display: block; width: 100%; max-width: 110px; height: 32px; object-fit: contain; pointer-events: none; }
.version-dl-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.version-dl-btn:active, .version-filter-btn:active { transform: scale(0.96); }
.version-download-grid.oc-mode .version-dl-btn { border-style: dashed; border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }

/* ---------- Facet bar ---------- */
.facets-bar { position: relative; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 0; background: var(--bg); }
/* Sticky only where the full filter popover (~560px) still fits under it. */
@media (min-width: 901px) and (min-height: 760px) {
  .facets-bar { position: sticky; top: var(--header-h); }
}
.facet-chips { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.facet-chips::-webkit-scrollbar { display: none; }
.facet-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 38px; padding: 0 10px 0 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 13px; white-space: nowrap;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms var(--ease);
}
.facet-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.facet-chip:active { transform: scale(0.97); }
.facet-label { color: var(--muted); }
.facet-value { font-weight: 650; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.facet-chip .chev { width: 14px; height: 14px; color: var(--faint); transition: transform 240ms var(--ease); }
.facet-chip[aria-expanded="true"] { border-color: var(--accent); }
.facet-chip[aria-expanded="true"] .chev { transform: rotate(180deg); }
.facet-chip.is-on { border-color: var(--accent); background: var(--accent-soft); }
.facet-chip.is-on :is(.facet-label, .facet-value, .chev) { color: var(--accent); }
.facet-all { padding: 0 13px; }
.facet-all .facet-label { color: var(--text); font-weight: 600; }
.facet-all .ico { width: 16px; height: 16px; }
.facet-all[aria-expanded="true"], .facet-all.active { border-color: var(--text); background: var(--text); color: var(--bg); }
.facet-all[aria-expanded="true"] .facet-label, .facet-all.active .facet-label { color: var(--bg); }
.facet-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
  animation: count-in 260ms var(--spring);
}
@keyframes count-in { from { transform: scale(0.4); opacity: 0; } }
.facet-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.sort-select {
  height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23979ba2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; font-size: 13px; cursor: pointer;
}
.view-mode-group { display: flex; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.view-mode-btn { display: grid; place-items: center; width: 36px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--muted); transition: background 160ms ease, color 160ms ease; }
.view-mode-btn .ico { width: 16px; height: 16px; }
.view-mode-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- Filter popover (#filterPanel) ----------
   One non-modal popover. data-show="all" shows every section; a facet key shows just that one. */
#filterPanel { top: calc(100% - 2px); left: var(--pop-x, 0px); width: min(600px, 100%); }
#filterPanel[data-show="all"] { width: min(1080px, 100%); }
#filterPanel[data-show="version"] { width: min(640px, 100%); }
#filterPanel .filter-panel-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
#filterPanel[data-show="all"] .filter-panel-inner { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 28px; }
#filterPanel[data-show="all"] :is(.archive-filter-head, .filter-version) { grid-column: 1 / -1; }
#filterPanel[data-show="all"] :is(.filter-diff, .filter-ranges) { grid-column: span 3; }
#filterPanel[data-show="all"] .filter-genre { grid-column: span 3; }
#filterPanel[data-show="all"] .filter-type { grid-column: span 1; }
#filterPanel[data-show="all"] .filter-oc { grid-column: span 2; }
#filterPanel[data-show="all"] .version-filter-buttons { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
#filterPanel[data-show="all"] :is(.version-filter-btn) { min-height: 38px; }
#filterPanel[data-show="all"] .version-filter-btn img { height: 26px; }
#filterPanel[data-show="all"] .genre-hint { display: none; }
#filterPanel:not([data-show="all"]) .archive-filter-head h2 { display: none; }
#filterPanel:not([data-show="all"]) .filter-section:not([data-facet]) { display: none; }
#filterPanel[data-show="diff"] .filter-section:not([data-facet="diff"]),
#filterPanel[data-show="range"] .filter-section:not([data-facet="range"]),
#filterPanel[data-show="version"] .filter-section:not([data-facet="version"]),
#filterPanel[data-show="genre"] .filter-section:not([data-facet="genre"]),
#filterPanel[data-show="type"] .filter-section:not([data-facet="type"]),
#filterPanel[data-show="oc"] .filter-section:not([data-facet="oc"]) { display: none; }
#filterPanel:not([data-show="all"]) .archive-filter-head { position: absolute; top: 10px; right: 10px; }
#filterPanel:not([data-show="all"]) #resetFiltersBtn { display: none; }
.archive-filter-head { display: flex; align-items: center; gap: 8px; }
.archive-filter-head h2 { margin-right: auto; font-size: 15px; font-weight: 700; }
.archive-reset-button { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--accent); font-size: 12px; font-weight: 600; }
.archive-reset-button:hover { background: var(--accent-soft); }
.archive-icon-button { width: 32px; height: 32px; }
.filter-section { min-width: 0; }
.filter-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-right: 40px; font-size: 12px; font-weight: 650; color: var(--text); }
#filterPanel[data-show="all"] .filter-title { padding-right: 0; }
.slider-values { margin-left: auto; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.btn-small { margin-left: auto; min-height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 11px; font-weight: 600; }
.btn-small:hover { background: var(--surface-2); color: var(--text); }
.genre-hint { margin-top: 8px; color: var(--faint); font-size: 11px; line-height: 1.6; }
.diff-buttons, .genre-buttons, .type-buttons, .oc-filter-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.version-filter-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
:is(.diff-btn, .genre-btn, .type-btn, .oc-filter-btn) {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--muted); font-size: 12px; font-weight: 600;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms var(--ease);
}
:is(.diff-btn, .genre-btn, .type-btn, .oc-filter-btn, .version-filter-btn):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--text); }
:is(.diff-btn, .genre-btn, .type-btn, .oc-filter-btn):active { transform: scale(0.96); }
:is(.genre-btn, .type-btn, .oc-filter-btn, .version-filter-btn).active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.version-filter-btn:not(.active) img { filter: grayscale(0.85); opacity: 0.5; }
.version-filter-btn:not(.active) { opacity: 0.85; }
.type-btn img { height: 22px; width: auto; pointer-events: none; }
.type-btn:not(.active) img { filter: grayscale(0.6); opacity: 0.7; }
/* Difficulty toggles carry their own colour swatch. */
.diff-btn::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); opacity: 0.35; transition: opacity 140ms ease; }
.diff-btn.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: var(--text); }
.diff-btn.active::before { opacity: 1; }
.diff-btn.lv-6 { --c: #b58ae6; }
/* Dual range: one rail, two thumbs; the upper input's track never covers the lower thumb. */
.range-filter-row + .range-filter-row { margin-top: 14px; }
.dual-slider { position: relative; height: 32px; }
.dual-slider::before { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 4px; border-radius: 2px; background: var(--surface-2); transform: translateY(-50%); }
.dual-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual-slider input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.dual-slider input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.dual-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); pointer-events: auto; cursor: grab; transition: transform 140ms var(--ease); }
.dual-slider input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line); pointer-events: auto; cursor: grab; }
.dual-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.archive-filter-summary { display: none !important; }

/* ---------- Song grid ---------- */
.archive-results-toolbar { display: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 28px 20px; padding-top: 10px; }
.card { position: relative; min-width: 0; border-radius: 14px; cursor: pointer; outline-offset: 4px; }
.img-container {
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--surface-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
  transition: transform 300ms var(--ease), box-shadow 300ms ease;
}
.cover { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 280ms ease, transform 450ms var(--ease); }
.cover.is-loaded { opacity: 1; }
.card.is-oc .cover { filter: grayscale(0.35); }
@media (hover: hover) {
  .grid:not(.view-list) .card:hover .img-container { transform: translateY(-3px); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
  .grid:not(.view-list) .card:hover .cover { transform: scale(1.04); }
}
.grid:not(.view-list) .card:active .img-container { transform: scale(0.98); }
/* Highlight that follows the pointer while a card tilts toward it (motion.js tiltCards). */
.grid:not(.view-list) .img-container::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 0%), rgb(255 255 255 / 30%), transparent 60%);
  opacity: 0; transition: opacity 260ms ease;
}
.grid:not(.view-list) .card.is-tilting .img-container::before { opacity: 1; }
.chart-type {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  padding: 2px 7px; border-radius: 6px; color: #fff;
  font: 800 10px/1.5 var(--display); letter-spacing: 0.04em;
}
.chart-type--dx { background: linear-gradient(135deg, #ff6aa8, #ffad47); }
.chart-type--st { background: linear-gradient(135deg, #3c86ff, #3fcbe6); }
.chart-type--utg { background: linear-gradient(135deg, #b25cff, #ff5ab4); }
.oc-badge { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 2px 7px; border-radius: 6px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; }
.dl-count {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px;
  background: rgb(15 17 19 / 66%); color: #fff; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.dl-count .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.card-detail-btn {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px;
  border: 0; border-radius: 8px; background: #fff; color: #15171a; font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateY(6px);
  transition: opacity 200ms ease, transform 260ms var(--ease), background 160ms ease, color 160ms ease;
}
.card-detail-btn::before { content: "详情"; }
.card-detail-btn .ico { width: 14px; height: 14px; }
.card-detail-btn:hover { background: var(--accent); color: #fff; }
.card:hover .card-detail-btn, .card:focus-within .card-detail-btn { opacity: 1; transform: none; }
@media (hover: none) { .card-detail-btn { opacity: 1; transform: none; padding: 0 8px; } .card-detail-btn::before { content: none; } }
.meta { display: flex; flex-direction: column; min-width: 0; padding: 12px 2px 0; }
.card-title-full { order: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.card-artist-full { order: 2; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.badges { order: 3; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.card-facts { order: 4; display: flex; gap: 6px; min-width: 0; margin-top: 8px; color: var(--faint); font-size: 11px; white-space: nowrap; }
.card-version-full { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-chart-summary { flex: none; font-variant-numeric: tabular-nums; }
.card-chart-summary::before { content: "· "; }
.badge { min-width: 32px; padding: 3px 6px; border-radius: 6px; background: var(--c, var(--faint)); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; transition: opacity 200ms ease; }
.badge.lv-6 { color: var(--d6-text); }
/* Difficulties excluded by the filter fade on every card (classes set on #songGrid). */
.grid.dim-2 .badge.lv-2, .grid.dim-3 .badge.lv-3, .grid.dim-4 .badge.lv-4,
.grid.dim-5 .badge.lv-5, .grid.dim-6 .badge.lv-6, .grid.dim-7 .badge.lv-7 { opacity: 0.25; }
.card.selected-custom .img-container { box-shadow: 0 0 0 3px var(--accent); }
.card.selected-custom .img-container::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: color-mix(in srgb, var(--accent) 28%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") no-repeat center;
  animation: check-in 240ms var(--spring);
}
@keyframes check-in { from { opacity: 0; transform: scale(0.9); } }
.grid.is-entering .card { animation: rise 300ms var(--ease) backwards; }
.grid.is-entering .card:nth-child(2) { animation-delay: 15ms; } .grid.is-entering .card:nth-child(3) { animation-delay: 30ms; }
.grid.is-entering .card:nth-child(4) { animation-delay: 45ms; } .grid.is-entering .card:nth-child(5) { animation-delay: 60ms; }
.grid.is-entering .card:nth-child(6) { animation-delay: 75ms; } .grid.is-entering .card:nth-child(7) { animation-delay: 90ms; }
.grid.is-entering .card:nth-child(8) { animation-delay: 105ms; } .grid.is-entering .card:nth-child(9) { animation-delay: 120ms; }
.grid.is-entering .card:nth-child(10) { animation-delay: 135ms; } .grid.is-entering .card:nth-child(11) { animation-delay: 150ms; }
.grid.is-entering .card:nth-child(n+12) { animation-delay: 165ms; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
/* Skeleton */
.card.is-skeleton { pointer-events: none; }
.card.is-skeleton .img-container { box-shadow: none; }
.card.is-skeleton .sk-line { display: block; height: 12px; margin-top: 10px; border-radius: 4px; background: var(--surface-2); }
.card.is-skeleton .sk-title { width: 82%; height: 15px; margin-top: 0; }
.card.is-skeleton .sk-artist { width: 55%; }
.card.is-skeleton .sk-facts { width: 38%; }
.card.is-skeleton { overflow: hidden; }
.card.is-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 60%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 1.3s ease-in-out infinite; }
@keyframes sweep { to { transform: translateX(100%); } }
.empty-state { grid-column: 1 / -1; padding: 72px 16px; text-align: center; color: var(--muted); }
.empty-state h3 { margin-bottom: 6px; color: var(--text); font-size: 16px; }
.empty-state-hint { margin-top: 6px; font-size: 12px; color: var(--faint); }

/* List view */
.grid.view-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.grid.view-list .card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color 160ms ease; }
.grid.view-list .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.grid.view-list .img-container { border-radius: 8px; }
.grid.view-list :is(.chart-type, .dl-count, .card-detail-btn, .oc-badge) { display: none; }
.grid.view-list .meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; padding: 0; }
.grid.view-list .card-title-full { grid-column: 1; grid-row: 1; -webkit-line-clamp: 1; }
.grid.view-list .card-artist-full { grid-column: 1; grid-row: 2; margin: 0; }
.grid.view-list .card-facts { grid-column: 1; grid-row: 3; margin: 2px 0 0; }
.grid.view-list .badges { grid-column: 2; grid-row: 1 / span 3; margin: 0; justify-content: flex-end; align-content: center; }
.grid.view-list .card.is-skeleton .meta { display: flex; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 44px 0 8px; }
.page-btn { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color 140ms ease, background 140ms ease, transform 140ms var(--ease); }
.page-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.page-btn:active:not(:disabled) { transform: scale(0.95); }
.page-btn.is-current { border-color: var(--text); background: var(--text); color: var(--bg); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn .ico { width: 16px; height: 16px; vertical-align: -3px; }
.page-gap { padding: 0 4px; color: var(--faint); }
.page-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--muted); font-size: 12px; }
.page-jump-input { width: 64px; height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; font-variant-numeric: tabular-nums; }
.circle-plus-tip { display: flex; justify-content: center; gap: 8px; margin: 28px 0 0; padding: 14px; color: var(--muted); font-size: 13px; }
.circle-plus-tip:hover { color: var(--accent); }
.circle-plus-tip-arrow { transition: transform 200ms var(--ease); }
.circle-plus-tip:hover .circle-plus-tip-arrow { transform: translateX(3px); }

.footer-support:hover, .archive-about a:hover { text-decoration: underline; }
.seo-song-index { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px 32px; color: var(--muted); font-size: 12px; }
.seo-song-index > summary { padding: 6px 0; cursor: pointer; font-weight: 600; }
.seo-song-index-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; padding: 10px 0 18px; }
.seo-song-index-links a { padding: 2px 0; overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.site-icp-footer-logo { height: 32px; width: auto; max-width: 140px; object-fit: contain; }
.ma-tip-link--footer { color: var(--accent); }

/* ---------- Dialogs ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; animation: fade-in 200ms ease-out; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.modal-content {
  position: relative; width: 100%; max-width: 640px; max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-pop);
}
.modal-overlay.open .modal-content { animation: pop-in 300ms var(--ease); }
/* Opened from a card: motion.js grows the dialog out of that card instead. */
.modal-overlay.motion-driven .modal-content { animation: none; }
.modal-title { padding-right: 8px; font-size: 22px; font-weight: 750; line-height: 1.3; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.modal-song-info { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.modal-detail-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent); font-size: 13px; font-weight: 600; }
.modal-detail-link:hover { text-decoration: underline; }
.modal-astrodx-hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.modal-astrodx-hint a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.modal-astrodx-hint a:hover { text-decoration: underline; }
.modal-download-panel { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 18px; }
.captcha-container { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
#captcha-element:empty { display: none; }
.captcha-trigger { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 12px; }
.captcha-trigger:hover { border-color: var(--accent); }
.cap-widget-status { margin-top: 8px; color: var(--muted); font-size: 12px; }
.captcha-container[data-captcha-state="ok"] .cap-widget-status { color: var(--ok); }
.captcha-container[data-captcha-state="error"] .cap-widget-status { color: var(--bad); }
.modal-no-captcha-hint { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 12px; line-height: 1.6; }
.modal-no-captcha-hint strong { color: var(--accent); }
.modal-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.archive-format-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.archive-format-group h3 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; }
.archive-format-group:has(> button[style*="display: none"]):not(:has(> button:not([style*="display: none"]))) { display: none; }
.btn-download {
  width: 100%; min-height: 46px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font-size: 13px; font-weight: 600; line-height: 1.4;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms var(--ease);
}
.btn-download:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.btn-download:active:not(:disabled) { transform: scale(0.98); }
.btn-download:disabled, .btn-download.btn-disabled { opacity: 0.45; cursor: not-allowed; }
.btn-manifest { grid-column: 1 / -1; }
.btn-close { width: 100%; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; transition: background 160ms ease, transform 160ms var(--ease); }
.btn-close:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--line)); }
.btn-close:active { transform: scale(0.98); }
.chart-preview-pane { margin-top: 12px; }
/* Pack progress */
.pack-progress-content { max-width: 480px; overflow: hidden; }
.pack-confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.pack-progress-bar-wrap { height: 8px; margin: 22px 0 14px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.pack-progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--brand)); transition: width 400ms var(--ease); }
.pack-progress-content.is-success .pack-progress-bar { background: var(--ok); }
.pack-progress-content.is-success .modal-title { color: var(--ok); }
.archive-progress-status { display: grid; gap: 6px; }
.pack-progress-text { font-family: var(--display); font-size: 32px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pack-progress-size, .pack-progress-eta, .pack-progress-detail { color: var(--muted); font-size: 12px; }
.pack-progress-browser-tip { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text); font-size: 12px; line-height: 1.6; }
.pack-progress-hint { margin-top: 16px; color: var(--faint); font-size: 11px; line-height: 1.7; }
.pack-progress-promo { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 12px; color: var(--muted); }
.pack-progress-promo-link { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 600; }
.pack-progress-cancel { margin-top: 14px; }
.pack-progress-overlay.is-success-dismissible { cursor: pointer; }
.pack-progress-overlay.is-success-dismissible .pack-progress-content { cursor: default; }
/* Browser guidance */
.browser-warn-banner { position: sticky; top: 0; z-index: 200; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.browser-warn-banner.is-hard-blocked { border-bottom-color: var(--hot); }
.browser-warn-banner.is-hard-blocked .browser-warn-dismiss { display: none; }
.browser-warn-inner { max-width: 1440px; margin: 0 auto; padding: 12px 16px 14px; }
.browser-warn-title { margin-bottom: 6px; color: var(--warn); font-size: 14px; font-weight: 700; }
.browser-warn-text { margin-bottom: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.browser-warn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.browser-warn-btn { flex: 1 1 calc(50% - 4px); min-width: 120px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 12px; font-weight: 600; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.browser-warn-btn--primary { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.browser-warn-btn:hover { border-color: var(--accent); }
.browser-warn-dismiss { display: block; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 12px; }
.browser-warn-modal { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); }
.browser-warn-modal.open { display: flex; animation: fade-in 200ms ease-out; }
.browser-warn-modal .browser-warn-inner { width: 100%; max-width: 420px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-pop); animation: pop-in 280ms var(--ease); }
.browser-warn-modal.is-hard-blocked .browser-warn-inner { border-color: var(--hot); }
/* Support tip */
.ma-tip-dialog { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); }
.ma-tip-dialog.open { display: flex; animation: fade-in 200ms ease-out; }
.ma-tip-dialog-inner { width: 100%; max-width: 400px; padding: 24px 20px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-pop); text-align: center; animation: pop-in 300ms var(--ease); }
.ma-tip-dialog-inner::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: url("/cdn/v1/ass/logo-192.webp") center / cover; }
.ma-tip-dialog-title { margin-bottom: 8px; font-size: 17px; font-weight: 750; }
.ma-tip-dialog-text { margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.ma-tip-dialog-actions { margin-bottom: 8px; }
.ma-tip-dialog-btn { display: block; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 650; text-align: center; }
.ma-tip-dialog-btn--primary { border-color: var(--d7); background: var(--d7); color: #fff; }
.ma-tip-dialog-btn--primary:hover { opacity: 0.9; }
.ma-tip-dialog-btn--secondary { border: 0; background: none; color: var(--muted); font-size: 13px; }
.ma-tip-dialog-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Comment drawer */
.comment-overlay { position: fixed; inset: 0; z-index: 999; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 280ms ease; }
.comment-overlay.open { opacity: 1; pointer-events: auto; }
.comment-panel {
  position: fixed; top: 0; right: 0; z-index: 1000;
  display: flex; flex-direction: column; width: min(520px, 100vw); height: 100dvh;
  border-left: 1px solid var(--line); background: var(--bg); box-shadow: var(--shadow-pop);
  transform: translateX(100%); transition: transform 320ms var(--ease);
}
.comment-panel.open { transform: none; }
.comment-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.comment-panel-head h2 { font-size: 16px; font-weight: 700; }
.comment-panel-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); }
.comment-panel-close:hover { background: var(--surface-2); color: var(--text); }
.comment-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 40px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sponsor-copy { display: none; }
}
@media (max-width: 900px) {
  .ticker { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; }
  .ticker-track { flex: none; padding: 12px 14px; }
  .archive-sponsor { justify-content: flex-start; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); padding: 10px 14px; }
  /* Phones: one swipeable strip instead of many wrapped rows. */
  .delivery-lanes-row { flex-wrap: nowrap; margin: 0; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .delivery-lanes-row::-webkit-scrollbar { display: none; }
  .delivery-lane-item { flex: none; max-width: 240px; }
  .sponsor-copy { display: inline; }
  .library-head { align-items: center; margin: 22px 0 8px; }
  #archiveTitle { font-size: 26px; }
  .facets-bar { flex-wrap: wrap; row-gap: 10px; }
  .facet-chips { flex: 1 1 100%; margin: 0 -16px; padding: 0 16px; }
  .facet-tools { flex: 1 1 100%; }
  .sort-select { flex: 1; }
  #filterPanel, #filterPanel[data-show] { left: 0; width: 100%; }
  #filterPanel[data-show="all"] .filter-panel-inner { grid-template-columns: minmax(0, 1fr); }
  #filterPanel[data-show="all"] .filter-section { grid-column: 1 / -1; }
  .batch-pop { width: 100%; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .head-actions .btn span { display: none; }
  .head-actions .btn { width: 40px; padding: 0; }
  .library-title { flex-direction: column; gap: 2px; }
  .stats-text { font-size: 12px; }
  .grid.view-list .card { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .grid.view-list .meta { grid-template-columns: minmax(0, 1fr); }
  .grid.view-list .badges { grid-column: 1; grid-row: 4; justify-content: flex-start; margin-top: 6px; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-content { max-height: 92dvh; border-radius: 18px 18px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
  .modal-overlay.open .modal-content { animation: sheet-in 320ms var(--ease); }
  .modal-buttons { grid-template-columns: minmax(0, 1fr); }
  .page-jump { display: none; }
  .seo-song-index { padding: 0 16px 24px; }
}
@media print {
  .ticker, .facets-bar, .pagination, .modal-overlay { display: none !important; }
}

/* ---------- Entrance intro (index.html, once per session) ----------
   The AWMC badge drops in untouched; a judgement ring draws around it, the cabinet's
   8 buttons light up and pink tap notes fly out to hit them. Then the badge flies into
   the header logo's place while the backdrop opens like an iris. Timing is pure CSS;
   the inline script only skips, flies the badge and removes the layer. */
.intro { display: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; align-content: center; gap: 22px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  animation: intro-fallback-out 500ms ease 3200ms forwards;
}
@keyframes intro-fallback-out { to { opacity: 0; visibility: hidden; } }
@property --intro-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.intro-bg {
  position: absolute; inset: 0; --intro-r: 0px;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 42%),
    var(--bg);
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--intro-r), #000 calc(var(--intro-r) + 1px));
  mask: radial-gradient(circle at 50% 46%, transparent var(--intro-r), #000 calc(var(--intro-r) + 1px));
}
.intro-stage { position: relative; width: 280px; height: 280px; }
.intro-stage > * { position: absolute; left: 50%; top: 50%; }

/* Rings: a slow dashed orbit and the judgement ring that draws itself clockwise. */
.intro-rings { width: 280px; height: 280px; margin: -140px 0 0 -140px; overflow: visible; }
.intro-rings circle { fill: none; }
.intro-orbit { stroke: color-mix(in srgb, var(--brand) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 2 7; transform-origin: 140px 140px; animation: intro-fade 600ms ease 200ms backwards, intro-spin 14s linear infinite; }
.intro-track { stroke: color-mix(in srgb, var(--brand) 18%, transparent); stroke-width: 10; animation: intro-fade 500ms ease 250ms backwards; }
.intro-judge { stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 140px 140px; animation: intro-draw 800ms cubic-bezier(0.65, 0, 0.35, 1) 300ms forwards, intro-judge-flash 600ms ease 1520ms; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-spin { to { transform: rotate(360deg); } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-judge-flash { 40% { stroke-width: 8; } }

/* Lanes: one per cabinet button, at 22.5° + n·45° like the real machine. */
.intro-lane { width: 0; height: 0; transform: rotate(calc(22.5deg + var(--i) * 45deg)); }
.intro-key {
  position: absolute; left: -11px; top: -124px; width: 22px; height: 10px; border-radius: 6px;
  background: var(--surface); border: 2px solid var(--brand);
  animation: intro-key-in 420ms var(--spring) calc(620ms + var(--i) * 45ms) backwards, intro-key-hit 380ms ease calc(1060ms + var(--i) * 70ms);
}
@keyframes intro-key-in { from { opacity: 0; transform: translateY(14px) scale(0.3); } }
@keyframes intro-key-hit { 30% { background: var(--brand); box-shadow: 0 0 14px 4px color-mix(in srgb, var(--brand) 70%, transparent); transform: translateY(-3px) scale(1.15); } }
.intro-note {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 3.5px solid var(--d7); box-shadow: 0 0 10px color-mix(in srgb, var(--d7) 55%, transparent);
  opacity: 0; animation: intro-note 520ms cubic-bezier(0.4, 0, 0.9, 0.6) calc(560ms + var(--i) * 70ms) forwards;
}
@keyframes intro-note {
  0% { opacity: 0; transform: translateY(-58px) scale(0.5); }
  15% { opacity: 1; }
  92% { opacity: 1; transform: translateY(-104px) scale(1); }
  100% { opacity: 0; transform: translateY(-104px) scale(1.6); }
}
.intro-hit {
  position: absolute; left: -18px; top: -122px; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--d7); opacity: 0;
  animation: intro-hit 460ms ease-out calc(1040ms + var(--i) * 70ms);
}
@keyframes intro-hit { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }

/* All hit: a shockwave leaves the judgement ring. */
.intro-wave { width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: intro-wave 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 1560ms; }
@keyframes intro-wave { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }

/* The badge itself: only moved, scaled and faded — never restyled. */
.intro-fly { width: 132px; height: 132px; margin: -66px 0 0 -66px; z-index: 2; }
.intro-logo { display: block; width: 100%; height: 100%; border-radius: 50%; animation: intro-badge 760ms var(--spring) 80ms backwards, intro-bob 600ms ease 1520ms; }
.intro-fly::after { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 50%; box-shadow: 0 10px 40px color-mix(in srgb, var(--brand) 55%, transparent); animation: intro-fade 700ms ease 300ms backwards; }
@keyframes intro-badge { from { opacity: 0; transform: translateY(26px) scale(0.55); } }
@keyframes intro-bob { 35% { transform: scale(1.06); } }

/* Wordmark */
.intro-word { position: relative; display: flex; justify-content: center; font: 800 30px/1 var(--ui); letter-spacing: -0.02em; color: var(--text); }
.intro-word span { display: inline-block; animation: intro-letter 560ms var(--spring) calc(760ms + var(--i) * 38ms) backwards; }
.intro-word span:nth-child(-n+3) { color: var(--brand); }
@keyframes intro-letter { from { opacity: 0; transform: translateY(16px) rotate(6deg); } }
.intro-sub { position: relative; margin-top: -12px; color: var(--muted); font-size: 12px; letter-spacing: 0.24em; text-align: center; animation: intro-sub 600ms var(--ease) 1180ms backwards; }
@keyframes intro-sub { from { opacity: 0; letter-spacing: 0.6em; } }
.intro-skip { position: absolute; right: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); color: var(--faint); font-size: 11px; animation: intro-fade 400ms ease 900ms backwards; }

/* Leaving: decorations burst outward, the backdrop opens, the badge flies to the header. */
html.intro-on .intro.is-leaving { animation: none; pointer-events: none; }
.intro.is-leaving .intro-bg { --intro-r: 150vmax; opacity: 0; transition: --intro-r 760ms cubic-bezier(0.7, 0, 0.3, 1), opacity 360ms ease 420ms; }
.intro.is-leaving .intro-rings,
.intro.is-leaving .intro-lane,
.intro.is-leaving .intro-wave { opacity: 0; transform: scale(1.5); transition: opacity 360ms ease, transform 520ms var(--ease); }
.intro.is-leaving .intro-lane { transform: rotate(calc(22.5deg + var(--i) * 45deg)) scale(1.5); }
.intro.is-leaving .intro-word,
.intro.is-leaving .intro-sub,
.intro.is-leaving .intro-skip { opacity: 0; transform: translateY(10px); transition: opacity 260ms ease, transform 300ms ease; }
.intro.is-leaving .intro-fly { transform: translate(var(--fly-x, 0), var(--fly-y, 0)) scale(var(--fly-s, 0.3)); transition: transform 760ms cubic-bezier(0.65, 0, 0.25, 1); }
.intro.is-leaving .intro-fly::after { opacity: 0; transition: opacity 400ms ease; }
.intro.is-leaving.no-target .intro-fly { opacity: 0; transition: opacity 400ms ease, transform 600ms ease; }

/* The header logo waits for the badge to land (CSS fallback shows it if the script never runs). */
html.intro-on .site-header .brand-logo { opacity: 0; animation: intro-show 1ms linear 3300ms forwards; }
html.intro-landed .site-header .brand-logo { opacity: 1; animation: none; }
@keyframes intro-show { to { opacity: 1; } }

/* Page content rises in behind the opening iris. */
html.intro-reveal .site-header .header-inner > :not(.brand),
html.intro-reveal .ticker,
html.intro-reveal .library-head,
html.intro-reveal .facets-bar,
html.intro-reveal #songGrid { animation: intro-rise 700ms var(--ease) backwards; }
html.intro-reveal .site-header .header-inner > :not(.brand) { animation-name: intro-drop; }
html.intro-reveal .site-header .brand-text { animation: intro-drop 700ms var(--ease) 380ms backwards; }
html.intro-reveal .ticker { animation-delay: 160ms; }
html.intro-reveal .library-head { animation-delay: 240ms; }
html.intro-reveal .facets-bar { animation-delay: 310ms; }
html.intro-reveal #songGrid { animation-delay: 380ms; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(28px) scale(0.985); } }
@keyframes intro-drop { from { opacity: 0; transform: translateY(-12px); } }

@media (max-width: 560px) {
  .intro-stage { transform: scale(0.82); margin: -20px 0; }
  .intro-word { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html.intro-on .intro { display: none; }
  html.intro-on .site-header .brand-logo { opacity: 1; }
}