/* demo.css — the showcase pages (relief.html, stacks.html). Loaded after the
   prototype's styles.css / form.css / home.css, which draw the hero itself
   (frame 3948-60555). Not part of the component. */

/* the hero on its own: no nav above it, so the frame's 60px starts at the top; full window tall */
.hp-hero { --nav-h: 0px; background: #fff; min-height: 100vh; min-height: 100svh; }
.hp-hero__stage { opacity: 1; transition: none; }
.hp-tm { font-weight: 700; }

/* the page around it */
html { scroll-behavior: auto; }
body { background: #fff; }
.section { padding: clamp(64px, 12vh, 140px) var(--hp-gutter, 60px); max-width: 1100px; font-family: var(--sans); }
.section h2 { font-size: clamp(24px, 3vw, 40px); margin: 0 0 12px; letter-spacing: -0.01em; font-weight: 500; }
.section p { font-size: 17px; line-height: 1.5; max-width: 56ch; opacity: .8; margin: 0; }
.section + .section { border-top: 1px solid rgba(0,0,0,.12); }

/* control panel */
.panel { position: fixed; right: 16px; top: 48px; z-index: 6; width: 220px; padding: 14px 16px 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,.12); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: #02030b; }
.panel h3 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; opacity: .6; font-weight: 400; }
.panel label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.panel .group + .group { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.1); }
.panel input { margin: 0; accent-color: #0541E9; }
.panel .toggle { position: absolute; right: 12px; top: 10px; background: none; border: 0; font: inherit; cursor: pointer; opacity: .6; color: inherit; }
.panel.is-closed .group { display: none; }
.panel .replay { margin-top: 6px; padding: 5px 10px; font: inherit; color: inherit; background: none; border: 1px solid rgba(0,0,0,.25); cursor: pointer; }
.panel .replay:hover { background: #0541E9; border-color: #0541E9; color: #fff; }
.perf { position: fixed; left: 12px; top: 40px; z-index: 9; padding: 6px 10px; background: #0541E9; color: #fff; font: 13px/1.3 ui-monospace, Menlo, monospace; }
@media (max-width: 720px) {
  .panel { right: 12px; top: auto; bottom: 12px; width: calc(100% - 24px); }
  .panel:not(.is-open) .group { display: none; }
  .panel .toggle { top: 8px; }
  .panel::before { content: 'Controls'; text-transform: uppercase; font-size: 11px; opacity: .6; }
  .panel.is-open::before { display: none; }
}

/* The hero buttons are the site's own (`cw-btn hp-btn`, `cw-btn--secondary hp-btn`
   from styles.css + form.css + home.css), and home.js gives them the same
   rolling label. Two things differ here: the kit leaves the secondary
   transparent, which would let the field show through it, and home.css darkens
   both buttons on hover. Behind a moving object the outlined one reads better
   staying white throughout — only its label and rule answer the cursor. */
.hp-actions .cw-btn--secondary.hp-btn,
.hp-actions .cw-btn--secondary.hp-btn:hover,
.hp-actions .cw-btn--secondary.hp-btn:focus-visible,
.hp-actions .cw-btn--secondary.hp-btn:active { background: #fff; color: var(--hp-blue, #0541e9); }

/* ?ui=0 on any showcase page: nothing but the hero, for a still. */
.no-ui .panel, .no-ui .perf { display: none; }
/* strands-list sets its switch on `.hp-hero .hp-hero__switch` in the page's own
   <style>, which comes after this file — so this needs the extra class to
   outweigh it rather than an !important. */
.no-ui .hp-hero .hp-hero__switch { display: none; }