@charset "UTF-8";
/* ==========================================================================
   ONE STOP SHOP DESIGNZ — songs.css
   The Custom Songs page only. Loaded after motion.css and music.css: the
   sample list is built from the label page's track rows, level bars and
   meters, so those are not repeated here.

   01. THE OPENING     the promise, beside a brief turning into a lyric
   02. SAMPLES         one row each; the row is the play button
   03. OCCASIONS       eight cells that share their borders
   04. THE PRICE       the number as big as it will go; add-ons as rows
   05. THE BUY BAR     follows a phone down the page
   06. REDUCED MOTION
   ========================================================================== */


/* ==========================================================================
   01. THE OPENING
   ========================================================================== */

.hero.shero:not(.hero--flat) {
  min-height: min(100svh, 60rem);
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--s-8)) clamp(5.5rem, 9vw, 8rem);
}
.hero.shero:not(.hero--flat):not(:has(.hero__bg)) {
  border-bottom: 0;
  background:
    radial-gradient(80% 70% at 84% 100%, rgba(177, 15, 28, 0.44), transparent 62%),
    radial-gradient(46% 44% at 86% 58%, rgba(255, 74, 28, 0.15), transparent 70%),
    var(--c-bg);
}

.shero__in {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
  width: 100%;
}
@media (min-width: 980px) {
  .shero__in { grid-template-columns: minmax(0, 1.2fr) minmax(21rem, 0.8fr); }
}
.shero .hero__content { min-width: 0; }
.shero .t-display {
  max-width: 6.6em;
  font-size: clamp(3.5rem, 1rem + 9.6vw, 7.9rem);
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  text-wrap: balance;
}
.shero .hero__meta { margin-top: var(--s-6); }
.shero .hero__actions .icon--play { margin-right: -2px; }

/* A brief becoming a lyric: what someone writes on the order, then the words
   it turns into, typed out line by line. */
.sdemo {
  position: relative;
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
  border: 1px solid var(--c-line-strong);
  background: rgba(8, 8, 9, 0.84);
  box-shadow: var(--shadow-panel);
}
html.fx-on .shero:not(.fx-ready) .shero__demo { opacity: 0; }
/* A bracket in two corners, like a frame guide. */
.sdemo::before,
.sdemo::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--c-ember);
  pointer-events: none;
}
.sdemo::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.sdemo::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

.sdemo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.sdemo__tag { color: var(--c-heat); text-align: right; }

.sdemo__brief { display: grid; gap: 6px; margin: var(--s-4) 0; }
.sdemo__brief > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.sdemo__brief dt { font: 500 var(--t-micro)/1.5 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-faint); }
.sdemo__brief dd { margin: 0; font-size: var(--t-small); line-height: 1.45; color: #d2ccc3; }

.sdemo__becomes { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ember); }
.sdemo__becomes i { flex: 1; height: 1px; background: var(--c-line); }

.sdemo__lyric {
  display: grid;
  gap: 0.18em;
  margin: var(--s-4) 0 var(--s-5);
  font: var(--fw-display) clamp(1.45rem, 1.05rem + 1.25vw, 2.05rem)/1.02 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.sdemo__lyric span { display: block; }
/* The last line is the hook, in fire. Once the script is typing, the colour
   goes on the typed part only: clipped to the whole line it would show the
   letters still to come. */
.sdemo__lyric span:last-child:not(:has(b)),
.sdemo__lyric span:last-child b {
  background: var(--fire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* While a line is being typed: the part still to come holds its place. */
.sdemo__lyric i { font-style: normal; visibility: hidden; }
.sdemo__lyric b { font-weight: inherit; }
.sdemo__lyric .is-typing b::after {
  content: "";
  display: inline-block;
  width: 0.09em;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.04em;
  background: var(--c-ember);
  animation: fx-caret 0.9s steps(1) infinite;
}
.sdemo__brief,
.sdemo__lyric,
.sdemo__tag { transition: opacity 0.4s; }
.sdemo.is-swapping .sdemo__brief,
.sdemo.is-swapping .sdemo__lyric,
.sdemo.is-swapping .sdemo__tag { opacity: 0; }

/* The song under it: a strip of level bars, always moving. */
.sdemo__wave { display: flex; align-items: center; gap: 3px; height: 2.75rem; }
.sdemo__wave i {
  flex: 1;
  height: 100%;
  background: var(--fire);
  transform: scaleY(calc(0.12 + var(--v) * 0.07));
}
.sdemo.is-live .sdemo__wave i {
  animation: sg-wave calc(0.6s + var(--v) * 0.07s) ease-in-out calc(var(--v) * -0.17s) infinite alternate;
}
@keyframes sg-wave {
  from { transform: scaleY(0.1); }
  to   { transform: scaleY(calc(0.3 + var(--v) * 0.07)); }
}

@media (max-width: 979px) {
  .hero.shero:not(.hero--flat) { min-height: 0; padding-top: calc(var(--header-h) + var(--s-7)); }
  .sdemo { max-width: 34rem; }
  .sdemo__wave i:nth-child(n+29) { display: none; }
}


/* ==========================================================================
   02. SAMPLES
   ========================================================================== */

.smp { flex-wrap: nowrap; }
.smp__cover { width: 56px; flex: none; box-shadow: none; }
.smp__t { flex: 1; min-width: 0; display: grid; gap: 5px; }
.smp .trk__name { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem); }
.smp__time { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.smp:not(.is-on) .smp__time { display: none; }

/* The browser's own player, until the script takes over. */
.smp__audio { width: 100%; max-width: 26rem; margin-top: 6px; }
.smp.is-ready .smp__audio { display: none; }

.smp__icon-pause { display: none; }
.smp.is-playing .smp__icon-pause { display: block; margin-left: 0; }
.smp.is-playing .smp__icon-play { display: none; }

/* How far in it is. On the row that is playing, tap it to skip. */
.smp__seek {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  z-index: 2;
  height: 16px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.3s;
}
.smp__seek i {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 3px;
  background: var(--fire-run);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
.smp.is-on .smp__seek { opacity: 1; pointer-events: auto; }

@media (max-width: 600px) {
  .smp { gap: 0.75rem; }
  .smp .trk__no { display: none; }
  .smp__cover { width: 46px; }
  .smp__time { display: none; }
}


/* ==========================================================================
   03. OCCASIONS
   ========================================================================== */

.occs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
@media (max-width: 1040px) { .occs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.occs > li { display: flex; }
.occ {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  min-height: clamp(12rem, 19vw, 16.5rem);
  padding: clamp(1rem, 0.7rem + 1.4vw, 2rem);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  transition: color 0.3s;
}
.occ::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fire-fill);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.occ:hover::before,
.occ:focus-visible::before { transform: none; }
.occ__no { font: 500 var(--t-micro)/1 var(--font-mono); letter-spacing: 0.2em; color: var(--c-ember); transition: color 0.3s; }
.occ__name {
  margin-top: clamp(0.75rem, 2.4vw, 2.25rem);
  font: var(--fw-display) clamp(1.5rem, 1rem + 1.7vw, 2.45rem)/0.94 var(--font-display);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.occ__text { font-size: var(--t-small); line-height: 1.5; color: var(--c-text-muted); transition: color 0.3s; }
.occ__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font: 500 var(--t-micro)/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 0.3s;
}
.occ__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease), color 0.3s;
}
.occ:hover,
.occ:focus-visible { color: #fff; }
.occ:hover .occ__no,
.occ:hover .occ__text,
.occ:focus-visible .occ__no,
.occ:focus-visible .occ__text { color: #fff; }
.occ:hover .occ__foot,
.occ:focus-visible .occ__foot { border-top-color: rgba(255, 255, 255, 0.4); }
.occ:hover .occ__go,
.occ:focus-visible .occ__go { background: #050505; border-color: #050505; color: #fff; transform: rotate(-45deg); }
@media (max-width: 560px) {
  .occ { min-height: 0; gap: var(--s-2); }
  .occ__text { font-size: 0.8125rem; }
  .occ__foot { letter-spacing: 0.1em; }
  .occ__go { width: 32px; height: 32px; }
}


/* ==========================================================================
   04. THE PRICE
   ========================================================================== */

.sprice { display: grid; border: 1px solid var(--c-line); }
@media (min-width: 900px) { .sprice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.sprice__main {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(177, 15, 28, 0.42), transparent 65%),
    var(--c-surface);
  box-shadow: inset 0 2px 0 var(--c-ember);
}
.sprice__main .t-h3 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 0.92; }
.sprice__num {
  display: flex;
  align-items: flex-start;
  gap: 0.06em;
  margin: var(--s-2) 0;
  font: var(--fw-display) clamp(6rem, 2rem + 15vw, 12rem)/0.8 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.sprice__num b {
  font-weight: inherit;
  padding-bottom: 0.04em;
  background: var(--fire);
  background-size: 100% 190%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-fire 3.4s ease-in-out infinite alternate;
}
.sprice__num s {
  align-self: flex-end;
  margin: 0 0 0.5em 0.6em;
  font: 500 0.875rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}
.sprice__main .checklist { grid-template-columns: 1fr; gap: var(--s-2); margin-block: var(--s-2) var(--s-4); }
.sprice__main .checklist li { color: #d2ccc3; }
.sprice__main .btn { margin-top: auto; }

.sprice__addons {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 900px) { .sprice__addons { border-top: 0; border-left: 1px solid var(--c-line); } }
.sprice__addons > .mono { padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line-strong); }
.sprice__addons > .t-small { margin-top: var(--s-4); }

.addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-line);
}
.addon__title { font: var(--fw-display) clamp(1.5rem, 1.2rem + 0.9vw, 1.9rem)/1 var(--font-display); text-transform: uppercase; }
.addon__text { margin-top: 6px; max-width: 46ch; font-size: var(--t-small); line-height: 1.5; color: var(--c-text-muted); }
/* A grid, not a wrapping row: "View cart" drops under the button without
   making the column any wider than the price and the button. */
.addon__buy { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; gap: var(--s-2) var(--s-4); }
.addon__price { font: var(--fw-display) 2rem/1 var(--font-display); color: var(--c-heat); font-variant-numeric: tabular-nums; }
/* The add-on buttons are outlined, so the song's own button stays the loud one. */
.addon .btn {
  min-height: var(--tap);
  padding: 10px 16px;
  border-color: var(--c-line-strong);
  background: transparent;
  color: var(--c-text);
  font-size: 0.9375rem;
}
.addon .btn:hover,
.addon .btn:focus-visible { background: transparent; border-color: var(--c-ember); color: #fff; }
.addon .btn.loading { opacity: 0.55; pointer-events: none; }
.addon .btn.added { border-color: var(--c-success); color: var(--c-success); }
.addon .added_to_cart {
  grid-column: 1 / -1;
  text-align: right;
  font: 500 var(--t-micro)/1.4 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-heat);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
@media (max-width: 560px) {
  .addon { grid-template-columns: minmax(0, 1fr); }
  .addon__buy { justify-content: space-between; }
}


/* ==========================================================================
   05. THE BUY BAR
   ========================================================================== */

.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line-strong);
  background: rgba(12, 12, 13, 0.97);
  transition: transform 0.5s var(--ease), visibility 0s;
}
.buybar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--fire-run);
}
.buybar[hidden] {
  display: flex;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.buybar__t { min-width: 0; }
.buybar__t b { display: block; font: var(--fw-display) 1.25rem/1.05 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.buybar__t .mono { display: block; margin-top: 2px; color: var(--c-heat); }
.buybar .btn { flex: none; min-height: 46px; padding: 10px 16px; font-size: 1rem; white-space: nowrap; }
/* Room under the footer, so the bar never sits on its last line. */
.has-buybar .site-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .buybar { display: none !important; }
  .has-buybar .site-footer { padding-bottom: 0; }
}


/* ==========================================================================
   06. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sdemo.is-live .sdemo__wave i,
  .sprice__num b,
  .sdemo__lyric .is-typing b::after { animation: none !important; }
  .buybar,
  .buybar[hidden] { transition: none; }
}