/* pgx8 site, the rounded and liquid pass (Oct 2026): no hard rectangles, a glass header, softer
   motion. Loaded after each page's own styles; the page sources stay as they are. */

:root {
  /* One radius scale: small bits, fields and chips, panels, plates and loops, pills. */
  --r-xs: 8px;
  --r-s: 14px;
  --r-m: 22px;
  --r-l: 30px;
  --r-pill: 999px;
  /* A soft spring (a little overshoot) and a long, liquid ease. */
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --glide: cubic-bezier(.22, .61, .36, 1);
  --line: rgba(22, 19, 15, .18);
  --tint: rgba(22, 19, 15, .05);
  --glass: rgba(241, 236, 223, .64);
  --glass-line: rgba(22, 19, 15, .08);
  interpolate-size: allow-keywords;
}
.night {
  --line: rgba(239, 233, 222, .2);
  --tint: rgba(239, 233, 222, .07);
  --glass: rgba(11, 10, 10, .58);
  --glass-line: rgba(239, 233, 222, .08);
}

/* ---- buttons and chips: pills with a soft spring ---- */
.cta {
  padding: .5em 1.15em .58em;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  transition: gap .55s var(--spring), transform .45s var(--spring), background-color .3s ease, opacity .3s ease;
}
.cta:hover { background-color: var(--tint); }
.cta:active { transform: scale(.965); }
.cta[disabled]:active { transform: none; }

.opt {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: transform .45s var(--spring), border-color .3s ease, background-color .3s ease, color .3s;
}
.opt::after { display: none; }
.opt:hover { transform: translateY(-2px); border-color: currentColor; }
.opt:active { transform: scale(.96); }
.opt[aria-pressed="true"] { border-color: currentColor; background-color: var(--tint); }
/* Rows of chips need room between lines now they're pills. */
[role="group"] { gap: 10px 10px !important; }

.glyph { transition: transform .45s var(--spring), opacity .3s ease; }
.glyph:active { transform: scale(.96); }

/* The main call in the header (download, or get the link on a phone) is a pill too. */
header nav [style*="border-bottom"] {
  padding: 7px 15px !important;
  border: 1px solid currentColor !important;
  border-radius: var(--r-pill);
  transition: transform .45s var(--spring), background-color .3s ease;
}
header nav [style*="border-bottom"]:hover { background-color: var(--tint); }

/* ---- fields ---- */
.field {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .28);
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.night .field { background: rgba(255, 255, 255, .04); }
.field:focus { outline: none; border-color: currentColor; box-shadow: 0 0 0 4px var(--tint); }

/* ---- plates, loops, panels ---- */
.stage, .frame, .feat-stage, .ill-post, .ill-vis video {
  border-radius: var(--r-l);
  clip-path: inset(0 round var(--r-l));
}
.plate { border-radius: var(--r-l); }
.ill-player { border-radius: var(--r-m); }
.ill-chip { border-radius: var(--r-s); }
.ill-tile img, .ill-song img, .ill-player img, .g-art { border-radius: var(--r-xs); }
.ill-ver em { border-radius: var(--r-pill); padding: 3px 9px; }
.bar > span, .ill-prog, .ill-prog i, .ill-post-bar, .ill-post-bar i { border-radius: 2px; }
.look::-webkit-slider-runnable-track { border-radius: 2px; }
.look::-moz-range-track { border-radius: 2px; }
summary { display: inline-block; padding: 8px 16px !important; border: 1px solid var(--line); border-radius: var(--r-pill); transition: border-color .3s ease, transform .45s var(--spring); }
summary:hover { border-color: currentColor; }
/* The sticky feature panel sits under the glass header. */
.feat-stage { top: max(92px, 11vh); }

/* ---- the glass header: clear at the top, frosted once the page moves under it ---- */
header { position: sticky; top: 0; z-index: 3; }
header::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid var(--glass-line);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  header::before { animation: glass-in linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
}
@keyframes glass-in { from { opacity: 0; } to { opacity: 1; } }
/* Without blur, or when less transparency is asked for, the bar is simply solid paper or night. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header::before { background: #F1ECDF; }
  .night header::before { background: #0B0A0A; }
}
@media (prefers-reduced-transparency: reduce) {
  header::before { background: #F1ECDF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .night header::before { background: #0B0A0A; }
}

/* ---- motion: everything glides in, nothing pops ---- */
@media (min-width: 761px) {
  @supports (animation-timeline: view()) {
    .reveal { animation-timing-function: var(--glide); animation-range: entry 0% cover 38%; }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(40px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.a-rise { animation-timing-function: var(--glide) !important; animation-duration: .95s !important; }
/* The FAQ opens and closes with its height easing, where the browser can. */
details::details-content {
  height: 0;
  overflow: clip;
  transition: height .55s var(--glide), content-visibility .55s allow-discrete;
}
details[open]::details-content { height: auto; }

@media (prefers-reduced-motion: reduce) {
  .cta, .opt, .glyph, summary, header nav [style*="border-bottom"] { transition: none; }
  details::details-content { transition: none; }
}
.still .cta, .still .opt, .still .glyph { transition: background-color .3s ease, border-color .3s ease; }

/* ---- phones ---- */
/* The waiting buttons ("out sunday", "founders checkout opens soon") stay on one line in their pill. */
.cta[style*="cursor: default"] { white-space: nowrap; }
@media (max-width: 520px) {
  .cta[style*="cursor: default"] { font-size: clamp(14px, 4.4vw, 19px) !important; }
  /* One row of glass: the logo, the motion switch and the main call; the in-page links stay in the page. */
  header nav a[href="#visuals"], header nav a[href="#info"] { display: none !important; }
  header nav { gap: 0 14px !important; }
}