/* Screaming Llama Studios — the hand-written half of the stylesheet.
 *
 * `design.css` is generated from the approved prototype and must not be edited.
 * This file loads after it and does the four things the move from a one-file
 * prototype to a real multi-page site requires:
 *
 *   1. Holds the palettes as CSS custom properties on the document root, so a
 *      returning visitor's choice is applied before the first paint instead of
 *      being written in by script afterwards.
 *   2. Points the values the prototype hard-coded to warm at those properties,
 *      so the other two palettes are not left with a warm focus ring or a warm
 *      link colour.
 *   3. Gives every page the entrance the design gave every panel change.
 *   4. Adds the skip link, which a one-page prototype had no need of.
 */

/* ------------------------------------------------------------- the palettes
 *
 * NIGHT IS THE DEFAULT. It was warm until 2026-09-01, when the design update
 * changed it in three places at once: the body rule, the root element's own
 * custom properties, and the design tool's `palette` prop default. Three
 * agreeing sources is a decision, not a preview left switched on.
 *
 * The other two are a demonstration on our own site, not a menu clients pick
 * from. `:root` therefore carries NIGHT, and warm and astral are the overrides,
 * so a first-time visitor with nothing stored gets the default with no
 * attribute set and no flash.
 *
 * THE TWO GOLDS ARE NOT INTERCHANGEABLE. --gold-text is the darkened value and
 * the only one allowed on small text, because it is the one that passes
 * contrast. --gold is for rules, borders, large numerals and button fills.
 * Do not collapse them into one variable.
 */
:root {
  --bg: #100c14;
  --surface: #191320;
  --ink: #f8f0d8;
  --muted: #a99e96;
  --gold: #d0a040;
  --gold-text: #d8ab4c;
  --line: rgba(248, 240, 216, .15);
  --wash: rgba(208, 160, 64, .07);
  color-scheme: dark;
}

:root[data-palette="warm"] {
  --bg: #f4f4ec;
  --surface: #fbfaf4;
  --ink: #201020;
  --muted: #6c5f68;
  --gold: #c89038;
  --gold-text: #8a6018;
  --line: rgba(32, 16, 32, .13);
  --wash: rgba(200, 144, 56, .07);
  color-scheme: light;
}

:root[data-palette="astral"] {
  --bg: #141335;
  --surface: #1d1b4a;
  --ink: #eae6ff;
  --muted: #a9a3d8;
  --gold: #c9b6ff;
  --gold-text: #c9b6ff;
  --line: rgba(234, 230, 255, .17);
  --wash: rgba(201, 182, 255, .08);
  color-scheme: dark;
}

/* The prototype painted these on its root <div> and hard-coded them to warm.
 * On the document itself, so overscroll and the area below a short page are
 * the page's colour rather than the default one. */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  transition: background .5s ease, color .5s ease;
}
[data-root] {
  min-height: 100vh;
  overflow-x: hidden;
}

/* Links and focus follow the palette. The prototype wrote #8a6018 into both,
 * which is right on cream and close to invisible on the two dark palettes. On
 * warm these resolve to exactly the value the design specified. */
a { color: var(--gold-text); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--wash); color: var(--ink); }

/* ------------------------------------------------------------ the entrance
 *
 * The design gives an arriving page an entrance so a change reads as arriving
 * rather than jumping. A real navigation is the same event, so it gets the
 * same treatment. `sls-page-in` is defined in design.css. */
main { animation: sls-page-in .52s cubic-bezier(.2, .75, .25, 1) both; }

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}

/* --------------------------------------------------------------- skip link
 *
 * Off screen until it is focused, which is the only time it is useful. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 2px 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------- reveal on entry
 *
 * Elements marked data-reveal start hidden and are shown by site.js when they
 * scroll into view. The starting state lives here rather than in script so
 * there is no frame in which they are visible and then snap away.
 *
 * Nothing hides without script running: `html.js` is set by the inline head
 * script, so a visitor with no JavaScript sees the whole page, revealed.
 */
html.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity .8s cubic-bezier(.2, .75, .25, 1), transform .9s cubic-bezier(.2, .75, .25, 1);
}
html.js [data-reveal="up"] { transform: translateY(40px); }
html.js [data-reveal="left"] { transform: translateX(-56px); }
html.js [data-reveal="right"] { transform: translateX(56px); }
html.js [data-reveal="scale"] { transform: scale(.955); }
html.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------- the wizard
 *
 * Steps other than the current one are hidden before script runs, so the
 * onboarding page never paints all three steps stacked on top of each other.
 * Without script every step is shown, which is a long form but a working one.
 */
html.js [data-ob-step]:not([data-ob-step="basics"]),
html.js [data-ob-done] { display: none; }

/* The assistant panel is only useful with script, and it is a chat box that
 * cannot chat without it. */
html:not(.js) [data-ob-aside] { display: none; }

/* ----------------------------------------------------------- palette swatches
 *
 * The active one is ringed in the palette's own gold, so the ring is visible
 * on all three rather than only on cream. */
[data-mode][aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------ legal tab rail
 *
 * One document at a time. Hidden here rather than by script so the page never
 * paints all three stacked before the rail catches up; site.js switches to the
 * one the URL asks for before the first paint. Without script all three show,
 * which is a long page but a complete one. */
html.js [data-legal]:not([data-legal="privacy"]) { display: none; }

/* ------------------------------------------------------------ the call demo
 *
 * The home page's call transcript starts hidden and types itself in, and the
 * starting state (lines at opacity 0, booking card offset) is inline in the
 * design. Without script the section would be a well-drawn empty box, so with
 * no `js` class it is simply shown, finished, all at once. The whole point of
 * the band is the transcript, the booking and the figures; the typing is
 * decoration. */
html:not(.js) [data-cd-line],
html:not(.js) [data-cd-card] {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) [data-cd-dot] { animation: none !important; }