/* The home page (/): AutoStacc's public cover. The hero (copy and actions over the DAW backdrop), the artists and new
   releases side by side, and the closing call to action. Used by index.html
   with css/panels.css (releases feed), css/shop.css (featured products) and css/projects.css (poster cards).
   Also the logo intro: on every visit the mark's bars drop and stack into place. */

/* The hero: most of the first screen, over the DAW backdrop (css/daw-stage.css), which follows the theme, so its
   words use the theme's tokens. A scroll cue at its foot; the sections below slide over the backdrop (css/home.css). */
.cover-hero { position: relative; z-index: 1; display: grid; align-content: center; min-height: min(56svh, 520px);
  padding: clamp(40px, 8vw, 88px) 0 clamp(64px, 9vw, 96px); color: var(--text); }
.cover-hero-grid { display: grid; grid-template-columns: minmax(0, 720px); }
.cover-kicker { margin: 0 0 10px; font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.cover-copy h1 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.05; margin: 0 0 20px; text-wrap: balance; color: var(--text); }
.cover-actions { margin-bottom: 14px; }
.cover-hero .btn.ghost { color: var(--text); background: color-mix(in srgb, var(--panel) 40%, transparent); border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.cover-hero .btn.ghost:hover { color: var(--text); background: color-mix(in srgb, var(--panel) 70%, transparent); border-color: var(--teal); }

/* The logo intro: the mark in the sidebar rail (computers) and top bar (phones) stacks itself, bottom row first, in
   about a second, then rests. Only movement, never hidden: with animations off or reduced motion it is the normal mark. */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] :is(.side .brand, .topbar-brand) .mark rect { transform-box: fill-box; animation: cover-stack .5s var(--snap) both; }
  body[data-page="home"] :is(.side .brand, .topbar-brand) .mark rect:nth-of-type(4) { animation-delay: .12s; }
  body[data-page="home"] :is(.side .brand, .topbar-brand) .mark rect:nth-of-type(2) { animation-delay: .26s; }
  body[data-page="home"] :is(.side .brand, .topbar-brand) .mark rect:nth-of-type(1) { animation-delay: .42s; }
  body[data-page="home"] .side .brand:hover .mark rect { animation: wiggle .4s var(--snap); }
}
@keyframes cover-stack {
  0% { transform: translateY(-420%); }
  70% { transform: translateY(12%); }
  85% { transform: translateY(-5%); }
  100% { transform: none; }
}

/* projects and new releases side by side, as mixer panels; the projects panel has no header strip of its own */
.platform .cover-projects { padding-top: 18px; }
.cover-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 18px; }

.cover-end .wrap { text-align: center; }
.cover-end h2 { margin: 0 0 8px; font-size: var(--section-size); }
.cover-end p { color: var(--muted); max-width: 56ch; margin: 0 auto 20px; }
.cover-end .actions { justify-content: center; }

@media (max-width: 1000px) {
  .cover-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cover-actions .btn { flex: 1 1 auto; }
  /* on a phone the copy can run to the foot of the hero, so the scroll cue follows it instead of sitting on top of it */
  .cover-hero { padding-bottom: 20px; }
}

/* the hero's store search (owner, 2026-10-22: one line, the search box and two buttons) */
.cover-copy .home-search-form { max-width: 640px; margin: 18px 0 14px; }