/* Homepage sections under the wheel (tools/templates/v3/home.mjs): lit track cards with glossy
   emblems, a planned row, the UVM walkthrough banner, the playground and the five problem
   formats. Built on the lit layer (assets/v3/lit.css); track colours come from the theme:
   --ch-* on paper, --scope-* for the emblems, which are drawn in --screen ink. */

.home-sections { padding-bottom: 24px; }
.home-sections > section { margin-top: 84px; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 28px; }
.home-head h2 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1; }
.home-head p { max-width: 42ch; margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* Track tints: --tch for text and lines on paper, --tsc for the glossy emblem. */
.tc-sv { --tch: var(--ch-sv); --tsc: var(--scope-sv); }
.tc-sva { --tch: var(--ch-sva); --tsc: var(--scope-sva); }
.tc-coverage, .fc-cov { --tch: var(--ch-cov); --tsc: var(--scope-cov); }
.tc-uvm, .fc-uvm { --tch: var(--ch-uvm); --tsc: var(--scope-uvm); }
.fc-sv { --tch: var(--ch-sv); --tsc: var(--scope-sv); }
.fc-sva { --tch: var(--ch-sva); --tsc: var(--scope-sva); }
.fc-accent { --tch: var(--accent); --tsc: var(--wave-cursor); }

/* The glossy emblem: a lit squircle in the track's screen colour, glyph in screen ink. */
.emblem { position: relative; display: grid; place-items: center; width: 62px; height: 62px; flex: none; border-radius: 18px;
  background: radial-gradient(120% 120% at 28% 18%, color-mix(in srgb, #fff 42%, var(--tsc)) 0%, var(--tsc) 46%, color-mix(in srgb, #000 30%, var(--tsc)) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -2px 4px rgb(0 0 0 / .18), 0 12px 26px -12px color-mix(in srgb, var(--tsc) 80%, transparent); }
.emblem::after { content: ''; position: absolute; left: 12%; right: 12%; top: 6%; height: 38%; border-radius: 14px 14px 40% 40%; background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0)); pointer-events: none; }
.emblem svg { position: relative; z-index: 1; width: 36px; height: 36px; flex: none; color: var(--screen); fill: none; stroke: var(--screen); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.emblem svg circle { fill: var(--screen); stroke-width: 2; } .emblem svg .path-symbol-open { fill: none; }
.emblem svg text { fill: var(--screen); stroke: none; font: 700 17px var(--mono); }
.emblem.small { width: 48px; height: 48px; border-radius: 14px; } .emblem.small svg { width: 28px; height: 28px; stroke-width: 4.6; }

/* Track cards */
.track-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.track-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 20px; overflow: hidden; color: var(--ink); text-decoration: none;
  background: radial-gradient(140% 90% at 0% 0%, color-mix(in srgb, var(--tch) 15%, transparent), transparent 58%), var(--lit-panel); }
.track-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tch), color-mix(in srgb, var(--tch) 10%, transparent)); }
.track-card .emblem { margin-bottom: 10px; transition: transform .35s var(--ease); }
.track-card:hover .emblem, .track-card:focus-visible .emblem { transform: translateY(-2px) rotate(-4deg) scale(1.05); }
.track-card:hover, .track-card:focus-visible { border-color: color-mix(in srgb, var(--tch) 55%, transparent); box-shadow: var(--lit-shadow-hover), 0 18px 40px -22px color-mix(in srgb, var(--tch) 60%, transparent); }
.tc-q { font: 600 12.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--tch); }
.tc-title { font: 650 28px/1.05 var(--display); font-stretch: 74%; }
.tc-blurb { color: var(--ink-2); font-size: 15px; line-height: 1.5; flex: 1; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: var(--bw) solid color-mix(in srgb, var(--rule) 70%, transparent); }
.tc-count { font: 500 13px var(--mono); color: var(--muted); }
.tc-go { font: 700 14px var(--sans); color: var(--tch); }
.planned-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.planned-label { font: 700 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.planned-chip { padding: 6px 12px; border: 1px dashed var(--rule-strong); border-radius: var(--r-pill); color: var(--muted); font: 600 13.5px var(--sans); background: var(--glass); }

/* The UVM walkthrough banner */
.home-sections .animation-entry { margin: 56px 0 0; padding: 18px 22px; border: var(--bw) solid color-mix(in srgb, var(--rule) 85%, transparent); border-radius: var(--lit-r); background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--ch-uvm) 16%, transparent), transparent 55%), var(--lit-panel); box-shadow: var(--lit-shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.home-sections .animation-entry:hover { transform: translateY(-3px); box-shadow: var(--lit-shadow-hover); }
.home-sections .animation-entry-play { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ch-uvm) 60%, transparent)); }
.home-sections .animation-entry-play circle { fill: color-mix(in srgb, var(--ch-uvm) 14%, transparent); stroke-width: 2; }

/* The playground */
.home-lab .lab-disclosure { border-radius: var(--lit-r); overflow: hidden; }
.home-lab .lab-disclosure > summary { cursor: pointer; }
.home-lab .lab-disclosure > summary:hover strong { color: var(--accent); }

/* The five formats */
.format-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.format-card { padding: 22px 20px 20px; background: radial-gradient(130% 80% at 0% 0%, color-mix(in srgb, var(--tch) 12%, transparent), transparent 60%), var(--lit-panel); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.format-card:hover { transform: translateY(-4px); box-shadow: var(--lit-shadow-hover); }
.format-card h3 { margin: 16px 0 6px; font: 650 24px/1.1 var(--display); font-stretch: 74%; }
.format-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.home-more { margin: 28px 0 0; text-align: center; }

@media (max-width: 1180px) {
  .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-head { display: block; } .home-head p { margin-top: 14px; }
  .format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .track-grid, .format-grid { grid-template-columns: 1fr; }
  .home-sections > section { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .track-card .emblem, .home-sections .animation-entry, .format-card { transition: none; }
  .track-card:hover .emblem, .home-sections .animation-entry:hover, .format-card:hover { transform: none; }
}

/* Remix theme only: two crossing ticker tapes under the hero (styled here, shown by lit.css). */
.remix-tapes { display: none; position: relative; height: 150px; margin: 10px calc(50% - 50vw) 0; overflow: clip; }
.tape { position: absolute; left: -5vw; width: 110vw; padding: 13px 0; border-block: 3px solid #000; overflow: hidden; white-space: nowrap; }
.tape span { display: inline-block; font: 800 26px/1 var(--display); letter-spacing: .01em; color: #12021f; animation: tape-run 38s linear infinite; }
.tape-a { top: 30px; background: #c6ff00; rotate: -3.5deg; box-shadow: 0 8px 0 #000; }
.tape-b { top: 64px; background: #ff2e97; rotate: 2.5deg; box-shadow: 0 8px 0 #000; }
.tape-b span { animation-direction: reverse; animation-duration: 44s; }
@keyframes tape-run { to { transform: translateX(-50%); } }
@media (max-width: 560px) { .remix-tapes { height: 120px; } .tape span { font-size: 20px; } .tape-b { top: 54px; } }