/* Livery home (/liveries/): the supporters' page, in the site's world ("The Pass After Dark", DESIGN.md).
   A graded night photograph heads the page with the title on its dark side, then open sections ruled by
   hairlines: your liveries, the upload, how to wear one. White pill for the main action, glass pill for
   the second. Builds on liveries.css (shared with the editor) for tokens, form controls and the toast. */

body.lv-home {
  --ink: #f3f5f8;
  --ink-2: rgba(243, 245, 248, .72);
  --ink-3: rgba(243, 245, 248, .5);
  --hair: rgba(243, 245, 248, .14);
  --night: #04060a;
  --shot: #0b0f16;
  background: var(--night); color: var(--ink-2); font: 400 16px/1.55 var(--font-sans);
}
body.lv-home ::selection { background: rgba(0, 204, 255, .3); color: var(--ink); }
body.lv-home b { color: var(--ink); font-weight: 600; }
body.lv-home :focus-visible { outline: 2px solid #5fc8ff; outline-offset: 3px; }

/* ── Header: the site's, solid (as on every page but Home) ─────────────────────────────────── */

.lv-header {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px;
  height: 66px; padding: 0 48px; background: rgba(4, 6, 10, .96); box-shadow: 0 1px 0 var(--hair);
}
.lv-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; text-decoration: none; color: var(--ink); font: 800 19px/1.3 var(--font-sans); font-stretch: 112%; letter-spacing: .02em; }
.lv-brand img { border-radius: 50%; }
.lv-brand-accent { color: #00ccff; }
.lv-nav { display: flex; gap: 28px; margin-left: auto; }
.lv-nav a { color: var(--ink-2); text-decoration: none; font: 500 14px/1.3 var(--font-sans); letter-spacing: .02em; }
.lv-nav a:hover { color: var(--ink); }
.lv-nav a[aria-current=page] { position: relative; color: var(--ink); }
.lv-nav a[aria-current=page]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--ink); }
.lv-who { display: flex; align-items: center; gap: 16px; padding-left: 28px; border-left: 1px solid var(--hair); color: var(--ink); font: 600 14px/1.3 var(--font-sans); }
.lv-textbtn { padding: 6px 0; border: none; border-radius: 0; background: none; color: var(--ink-3); font: 500 14px/1.3 var(--font-sans); }
.lv-textbtn:hover { color: var(--ink); }

/* ── Photograph band with the page title ───────────────────────────────────────────────────── */

.lv-band {
  position: relative; display: flex; align-items: flex-end; min-height: 380px;
  background:
    linear-gradient(90deg, rgba(4, 6, 10, .94) 0%, rgba(4, 6, 10, .78) 38%, rgba(4, 6, 10, .2) 72%, rgba(4, 6, 10, .35) 100%),
    linear-gradient(180deg, rgba(4, 6, 10, .55) 0%, rgba(4, 6, 10, 0) 35%, rgba(4, 6, 10, .55) 78%, var(--night) 100%),
    url(../assets/hero-hairpin-duel.jpg) 70% 62% / cover no-repeat var(--shot);
}
.lv-band-tall { min-height: min(78vh, 720px); }
.lv-band-copy { width: 100%; max-width: 1320px; margin: 0 auto; padding: 96px 48px 56px; }
.lv-band h1 {
  max-width: 13ch; margin: 0; color: var(--ink); text-wrap: balance;
  font: 800 clamp(40px, 5vw, 76px)/.98 var(--font-sans); font-stretch: 118%; letter-spacing: -.02em;
}
.lv-band-tall h1 { max-width: 12ch; font-size: clamp(44px, 5.6vw, 84px); font-stretch: 125%; line-height: .95; }
.lv-lede { max-width: 46ch; margin: 20px 0 0; color: var(--ink-2); font: 400 18px/1.55 var(--font-sans); }
.lv-lede #list-count { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lv-meta { max-width: 52ch; margin: 22px 0 0; color: var(--ink-3); font: 500 13px/1.45 var(--font-sans); }
.lv-error { max-width: 52ch; margin: 18px 0 0; color: #ff5563; font: 600 15px/1.45 var(--font-sans); }
.lv-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* The site's two pills. */
.lv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px;
  border-radius: 999px; font: 700 16px/1.3 var(--font-sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.lv-btn-solid { border: none; color: var(--night); background: var(--ink); }
.lv-btn-solid:hover:not(:disabled) { background: #fff; }
.lv-btn-solid:disabled { opacity: .35; cursor: default; }
.lv-btn-glass { color: var(--ink); background: rgba(243, 245, 248, .08); border: 1px solid rgba(243, 245, 248, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lv-btn-glass:hover { background: rgba(243, 245, 248, .16); border-color: rgba(243, 245, 248, .5); }

/* ── Column and sections ───────────────────────────────────────────────────────────────────── */

.lv-col { max-width: 1320px; margin: 0 auto; padding: 0 48px 120px; }
.lv-section { padding-top: 88px; }
.lv-section + .lv-section { margin-top: 32px; border-top: 1px solid var(--hair); }
.lv-section h2 { margin: 0; color: var(--ink); font: 800 clamp(28px, 3vw, 40px)/1.05 var(--font-sans); font-stretch: 112%; letter-spacing: -.015em; text-wrap: balance; }
.lv-body { max-width: 52ch; margin: 18px 0 0; color: var(--ink-2); font: 400 16px/1.6 var(--font-sans); }
.lv-link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.lv-link:hover { text-decoration-color: var(--ink); }
.lv-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }

.lv-frame { margin: 0; overflow: hidden; border-radius: 6px; background: var(--shot); }
.lv-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* ── Your liveries: open rows per car, thumbnails as frames ────────────────────────────────── */

.lv-gallery { padding-top: 56px; }
.lv-car + .lv-car { margin-top: 56px; }
.lv-car-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--hair); }
.lv-car-head h2 { font-size: 22px; font-stretch: 105%; letter-spacing: 0; line-height: 1.25; }
.lv-car-head span { color: var(--ink-3); font: 500 13px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.lv-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 24px; margin: 0; padding: 0; list-style: none; }
.lv-tile .lv-frame { position: relative; aspect-ratio: 1; }
.lv-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.lv-tile .lv-frame:hover img { transform: scale(1.03); }
.lv-tile-edit {
  position: absolute; left: 12px; bottom: 12px; height: 40px; padding: 0 18px; font-size: 14px;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s cubic-bezier(.16, 1, .3, 1), background .15s;
}
.lv-tile .lv-frame:hover .lv-tile-edit, .lv-tile-edit:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .lv-tile-edit { opacity: 1; transform: none; } }
.lv-tile h3 { margin: 14px 0 0; overflow-wrap: anywhere; color: var(--ink); font: 700 17px/1.3 var(--font-sans); }
.lv-tile-meta { margin: 4px 0 0; color: var(--ink-3); font: 500 13px/1.4 var(--font-sans); }
.lv-tile-meta .on { color: var(--ink-2); }
.lv-tile-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.lv-tile-actions button { font-size: 13px; }
.lv-tile-actions .lv-del:hover { color: #ff5563; }

.lv-empty { padding: 40px 0 8px; }
.lv-empty h2 { font-size: 26px; }
.lv-empty .lv-body { margin-bottom: 26px; }

/* ── Showcase: shared liveries on the 3D car (showcase.js) ─────────────────────────────────── */

body > #showcase { display: none; }   /* until liveries.js moves it into the state on screen */
.sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sc-count { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
#sc-car { min-width: 200px; }
.sc-stage {
  position: relative; margin-top: 32px; aspect-ratio: 16 / 8; max-height: 72vh; overflow: hidden; border-radius: 6px;
  background: radial-gradient(120% 90% at 50% 100%, #141b26 0%, #0b0f16 55%, #070a0f 100%);
}
.sc-3d, .sc-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc-3d canvas { cursor: grab; touch-action: pan-y; }
.sc-3d canvas:active { cursor: grabbing; }
.sc-flat { position: absolute; inset: 0; margin: auto; height: 86%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.sc-loading { position: absolute; right: 20px; top: 20px; }
.sc-loading .spinner { width: 22px; height: 22px; margin: 0; border-width: 2px; border-top-color: var(--ink); }
.sc-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 24px; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0), rgba(4, 6, 10, .85));
}
.sc-caption h3 { margin: 0; color: var(--ink); font: 800 clamp(22px, 2.4vw, 32px)/1.1 var(--font-sans); font-stretch: 112%; letter-spacing: -.01em; }
.sc-caption p { margin: 6px 0 0; color: var(--ink-2); font: 500 14px/1.4 var(--font-sans); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 20px 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.sc-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; padding: 0; border: none; border-radius: 0;
  background: none; color: var(--ink-2); text-align: left; cursor: pointer;
}
.sc-item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 7px; border-radius: 6px; background: var(--shot); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.sc-item:hover img { outline-color: var(--hair); }
.sc-item.on img { outline-color: var(--ink); }
.sc-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 600 14px/1.3 var(--font-sans); }
.sc-item-car { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font: 500 12px/1.35 var(--font-sans); }
.sc-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 36px 0 0; color: var(--ink-2); font: 500 16px/1.4 var(--font-sans); }
body.signed-in .sc-cta { display: none; }

/* 3D thumbnails (thumb3d.js): the flat texture waits hidden, then the car render takes its place on
   the same night ground as the showcase stage. */
body.lv-home img.t3d-wait { opacity: 0; }
body.lv-home img.t3d { object-fit: contain; background: radial-gradient(120% 90% at 50% 100%, #141b26 0%, #0b0f16 60%, #080b10 100%); animation: t3d-in .35s ease-out; }
@keyframes t3d-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.lv-home img.t3d { animation: none; } }

/* ── Upload form ───────────────────────────────────────────────────────────────────────────── */

.lv-form { display: flex; flex-direction: column; gap: 18px; }
.lv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lv-form label { color: var(--ink-2); font: 600 13px/1.4 var(--font-sans); }
.lv-form label.check { color: var(--ink-2); font: 400 15px/1.45 var(--font-sans); }
body.lv-home select, body.lv-home input:not([type=checkbox]) { border-radius: 6px; border-color: var(--hair); background: rgba(243, 245, 248, .04); }
.lv-drop {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px; text-align: center; cursor: pointer;
  border: 1px dashed rgba(243, 245, 248, .28); border-radius: 6px; color: var(--ink-2); transition: border-color .15s, background .15s;
}
.lv-drop:hover, .lv-drop.over { border-color: var(--ink); background: rgba(243, 245, 248, .03); }
.lv-drop img { max-width: 200px; max-height: 200px; border-radius: 6px; background: #000; }
.lv-filemeta { color: var(--ink-3); font: 500 13px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.lv-filemeta.bad { color: #ff5563; }
.lv-progress { height: 2px; background: var(--hair); overflow: hidden; }
.lv-progress div { height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .1s linear; }
.lv-form .status { font-size: 14px; }
.lv-form .status.good { color: var(--ink); }
.lv-form .lv-btn { align-self: flex-start; }

/* ── Steps ─────────────────────────────────────────────────────────────────────────────────── */

.lv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 0; padding: 0; list-style: none; }
.lv-steps li { padding: 4px 32px 8px 0; }
.lv-steps li + li { padding-left: 32px; border-left: 1px solid var(--hair); }
.lv-step-n { color: var(--ink-3); font: 700 22px/1.3 var(--font-sans); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.lv-steps h3 { margin: 10px 0 0; color: var(--ink); font: 700 19px/1.3 var(--font-sans); font-stretch: 105%; }
.lv-steps p { max-width: 34ch; margin: 8px 0 0; color: var(--ink-2); font: 400 15px/1.55 var(--font-sans); }
.lv-demo { margin-top: 48px; }
.lv-demo summary { width: max-content; max-width: 100%; cursor: pointer; color: var(--ink); font: 600 15px/1.4 var(--font-sans); }
.lv-demo summary:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair); }
.lv-demo .lv-frame { max-width: 880px; margin-top: 20px; }

.lv-wait { padding: 160px 20px; text-align: center; color: var(--ink-3); }

/* ── Narrow screens ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .lv-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lv-nav { display: none; }
  .lv-who { margin-left: auto; }
}
@media (max-width: 860px) {
  .lv-header { height: 60px; padding: 0 20px; gap: 16px; }
  .lv-brand span { display: none; }
  .lv-who { padding-left: 0; border-left: none; gap: 14px; font-size: 13px; }
  .lv-band { min-height: 320px; background-position: 78% 60%; }
  .lv-band-tall { min-height: 560px; }
  .lv-band-copy { padding: 72px 20px 40px; }
  .lv-lede { font-size: 16px; }
  .lv-col { padding: 0 20px 84px; }
  .lv-section { padding-top: 64px; }
  .lv-fields { grid-template-columns: minmax(0, 1fr); }
  .lv-steps { grid-template-columns: minmax(0, 1fr); }
  .lv-steps li, .lv-steps li + li { padding: 20px 0; border-left: none; }
  .lv-steps li + li { border-top: 1px solid var(--hair); }
  .lv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .lv-ctas .lv-btn { flex: 1 1 auto; }
  .sc-stage { aspect-ratio: 4 / 3; }
  .sc-caption { padding: 40px 18px 16px; }
  .sc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  #sc-car { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-tile img, .lv-tile-edit { transition: none; }
}