/* public-site/site.css — THE MARKETING SITE SHELL (pyre.studio / pyre.stream root).
 *
 * Tokens, base type, the header nav (site-shell.js renders its markup), buttons,
 * section headings and the footer. Page styles live beside it (home.css for /).
 * The other marketing pages adopt this in a later wave; until then they keep
 * channel.css. The creator pages (/<handle>, /s/...) NEVER load this file: they
 * have creator.css, so nothing here can restyle them.
 *
 * Colours: the approved marketing palette (a deeper night than the app's
 * --bg, lifted and softened 2026-10-24: owner found pure white on near-black
 * harsh to read) plus the app's ember accent from shared/design-tokens.json. */

:root {
  --site-bg: #17130f;
  --site-surface: #1f1a16;
  --site-surface-2: #27211c;
  --site-text: #e8dfd4;
  --site-dim: #bfb4a8;
  --site-faint: #a3978b;
  --site-line: rgba(255, 255, 255, .12);
  --site-line-strong: rgba(255, 255, 255, .22);
  --site-accent: #ff9d4d;          /* design-tokens color.accent */
  --site-accent-soft: #ffb673;     /* design-tokens color.accent-soft */
  --site-accent-hover: #ffd0a6;
  --site-accent-line: rgba(255, 157, 77, .45); /* design-tokens color.border-accent */
  --site-on-accent: #1d0f06;
  --site-ok: #45d0a8;               /* healthy / live-ok dot */
  --site-live: #f0505f;             /* LIVE pill */
  --site-twitch: #9146ff;           /* platform brand marks (platform-icons.js) */
  --site-youtube: #ff0033;
  --site-kick: #53fc18;
  --site-tiktok: #ff2d55;
  --site-ink: #120e0b;              /* deepest panel ink in the showcase visuals */
  --site-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --site-serif: 'Cormorant Garamond', Georgia, serif;
  --site-mono: 'JetBrains Mono', Consolas, monospace;
  --site-max: 1240px;
  --site-gutter: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.site {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-text);
  font-family: var(--site-sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
.site img { max-width: 100%; height: auto; }
.site a { color: var(--site-accent-soft); text-decoration: none; }
.site a:hover { color: var(--site-accent-hover); }
/* Inline links inside running text are underlined so they never rely on colour alone. */
.site p a, .site dd a { text-decoration: underline; text-underline-offset: 3px; }
.site :focus-visible { outline: 2px solid var(--site-accent-hover); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.site-skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--site-text); color: #140e0b !important; padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.site-skip:focus { top: 12px; }

/* An owner placeholder: visibly bracketed, never mistaken for finished copy. */
.site-ph {
  display: inline-block; color: var(--site-faint); font-size: .92em;
  border: 1px dashed rgba(255, 255, 255, .3); border-radius: 6px; padding: 1px 6px;
}

/* ── Buttons ── */
.site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 10px;
  font: 700 16px/1.2 var(--site-sans); cursor: pointer; border: 1px solid transparent;
}
.site .site-btn--primary { background: var(--site-accent); color: var(--site-on-accent); }
.site .site-btn--primary:hover { background: var(--site-accent-soft); color: var(--site-on-accent); }
.site .site-btn--ghost { color: var(--site-text); border-color: var(--site-line-strong); background: transparent; }
.site .site-btn--ghost:hover { color: var(--site-text); border-color: var(--site-dim); }
.site-btn--sm { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.site-btn--lg { min-height: 52px; padding: 15px 28px; font-size: 18px; border-radius: 12px; }

/* ── Section scaffolding ── */
.site-wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); }
.site-h2 {
  margin: 0 0 36px; font-family: var(--site-serif); font-weight: 600;
  font-size: clamp(40px, 5vw, 68px); line-height: 1; text-wrap: balance;
}

/* ── Header / nav ── */
.site-header { position: relative; z-index: 50; }
.site-nav {
  max-width: var(--site-max); margin: 0 auto; padding: 14px var(--site-gutter);
  display: flex; align-items: center; gap: 8px 24px; position: relative;
}
.site .site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--site-text); min-height: 44px; }
.site-brand span:not(.sr-only), .site-wordmark {
  font-family: var(--site-serif); font-weight: 700; font-size: 23px; letter-spacing: .16em; line-height: 1;
}
.site-panel { flex: 1 1 auto; display: flex; align-items: center; gap: 8px 24px; }
.site-groups { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px 6px; flex: 1 1 auto; }
.site-group { position: relative; }
.site-group--mega { position: static; }
.site-group-btn, .site .site-top-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 10px;
  font: 500 15px/1 var(--site-sans); color: var(--site-dim); background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.site-group-btn:hover, .site .site-top-link:hover, .site-group-btn[aria-expanded="true"] { color: var(--site-text); }
.site .site-top-link[aria-current="page"] { color: var(--site-text); }
.site-caret { transition: transform .15s ease; }
.site-group-btn[aria-expanded="true"] .site-caret { transform: rotate(180deg); }
.site-group-h { display: none; }
.site-actions { display: flex; align-items: center; gap: 4px 10px; }

.site-menu {
  display: none; list-style: none; margin: 0; padding: 8px;
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px;
  background: var(--site-surface); border: 1px solid var(--site-line); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.site-menu.is-open { display: block; }
.site .site-menu-link {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center;
  padding: 8px 12px; border-radius: 8px; color: var(--site-text); font-size: 15px; line-height: 1.3;
}
.site .site-menu-link:hover, .site .site-menu-link:focus-visible { background: var(--site-surface-2); color: var(--site-text); }
.site-menu-label { font-weight: 600; }
.site-menu-desc { color: var(--site-faint); font-size: 13.5px; }
.site-menu .site-ph { margin: 10px 12px; }

/* The Features mega-menu: a wide panel of titled columns under the whole nav. */
.site-mega {
  left: var(--site-gutter); right: var(--site-gutter); top: calc(100% - 4px);
  padding: 22px 20px; min-width: 0;
}
.site-mega.is-open { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 16px; }
.site-mega-h {
  margin: 0 0 6px; padding: 0 12px; font: 600 12px/1.4 var(--site-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent-soft);
}
.site-mega ul { list-style: none; margin: 0; padding: 0; }
.site-mega .site-menu-link { font-size: 14.5px; }

/* Download: in the right-hand actions on desktop, in the nav row below 1080px. */
.site-group--dl { display: none; }

/* Phones, foldables and small tablets (owner 2026-10-25: "I don't like that all
 * of the nav items are hidden behind the menu button"). No Menu button:
 *   row 1  logo .............................. Sign in  [Start free]
 *   row 2  Products  Features  Use cases  Resources  Pricing  Download
 * Row 2 is always visible and scrolls sideways (no scrollbar, a fade on the
 * right edge while more is hidden). A group opens its panel full width under
 * the row: the groups are position:static, so each panel's containing block is
 * .site-nav and the row's overflow never clips it. The header sticks to the top.
 * The full inline nav needs ~1000px, so this layout runs below 1080px. */
@media (max-width: 1079px) {
  .site-header {
    position: sticky; top: 0;
    background: var(--site-bg); border-bottom: 1px solid var(--site-line);
  }
  .site-nav { flex-wrap: wrap; gap: 0 12px; padding: 6px var(--site-gutter) 0; }
  .site .site-brand { flex: none; }
  .site-panel { display: contents; }
  .site-actions { order: 1; margin-left: auto; gap: 4px 6px; }
  .site-dl-desk { display: none !important; }
  .site-groups {
    order: 2; flex: 1 1 100%; flex-wrap: nowrap; gap: 2px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 2px calc(-1 * var(--site-gutter)) 0; padding: 0 var(--site-gutter) 6px;
    scroll-padding-inline: var(--site-gutter);
  }
  .site-groups::-webkit-scrollbar { display: none; }
  .site-group, .site-group--mega { position: static; flex: none; }
  .site-group--dl { display: block; }
  .site-groups .site-group-btn, .site-groups .site-top-link { white-space: nowrap; padding: 8px 12px; }
  /* The current page: its group (or plain link) reads as selected. */
  .site-group.is-current > .site-group-btn,
  .site .site-groups .site-top-link[aria-current="page"] {
    color: var(--site-text); background: var(--site-surface-2);
    box-shadow: inset 0 -2px 0 var(--site-accent);
  }
  .site-group-btn[aria-expanded="true"] { background: var(--site-surface); }
  /* the right-edge fade over the row (pointer-events none, so it never eats a tap) */
  .site-nav::after {
    content: ''; position: absolute; right: 0; bottom: 0; width: 40px; height: 50px;
    background: linear-gradient(90deg, rgba(23, 19, 15, 0), var(--site-bg) 85%);
    pointer-events: none; transition: opacity .15s ease;
  }
  .site-header.is-row-end .site-nav::after { opacity: 0; }
  /* A group's panel: full width under the row, scrolls on its own if tall. */
  .site-menu, .site-mega {
    /* A floating card just under the row, all four corners rounded and a full
       border, so it reads as a dropdown and never as a box cut off at the top
       (owner 2026-10-25: both the flush box and the edge-to-edge sheet looked
       clipped). */
    top: calc(100% + 8px); left: 12px; right: 12px; min-width: 0;
    max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 12px 14px;
    /* Owner: same colour as the page with a clear border all around. */
    background: var(--site-bg);
    border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
  }
  .site-mega.is-open { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; padding-top: 18px; }
}
@media (max-width: 760px) {
  .site-mega.is-open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .site-mega.is-open { grid-template-columns: minmax(0, 1fr); }
}
/* The narrowest phones keep the logo and Start free (its page links to sign in). */
@media (max-width: 359px) {
  .site-actions .site-signin { display: none; }
}
@media (min-width: 1080px) and (max-width: 1240px) {
  .site-mega.is-open { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--site-line); }
.site-footer-inner {
  max-width: var(--site-max); margin: 0 auto; padding: 44px var(--site-gutter);
  display: flex; flex-wrap: wrap; gap: 24px 48px; font-size: 15px;
}
.site-footer-brand { flex: 2 1 240px; display: flex; flex-direction: column; gap: 8px; }
.site-footer-copy { color: #8a7f77; }
.site-footer-col { flex: 1 1 140px; }
.site-footer-h { margin: 0 0 6px; font: 600 12px/1.4 var(--site-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--site-faint); }
.site-footer-col ul { list-style: none; margin: 0; padding: 0; }
.site .site-footer-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--site-dim); }
.site .site-footer-link:hover { color: var(--site-text); }

@media (max-width: 560px) {
  :root { --site-gutter: 16px; }
}

/* ── Motion (site-motion.js) ──
 * Progressive enhancement: site-motion.js adds .motion-ready to <html> only when
 * the visitor has not asked for reduced motion. Without it every element below
 * is static and fully visible, so a page never depends on the script.
 *   [data-tilt] > .tilt-target  starts tilted back and flattens as you scroll
 *                               through the first screen (--tilt-p goes 0 to 1).
 *   [data-reveal]               fades and rises in once, when it enters view.
 *   [data-anim]                 its CSS animations run only while it is on screen. */
[data-tilt] { perspective: 2400px; }
[data-tilt] > .tilt-target { transform-origin: 50% 0; }
.motion-ready [data-tilt] > .tilt-target {
  transform: rotateX(calc(var(--tilt-deg, 7deg) * (1 - var(--tilt-p, 0)))) scale(calc(1 - var(--tilt-shrink, .03) * (1 - var(--tilt-p, 0))));
  will-change: transform;
}
/* Owner 2026-10-24: the first tilt (18deg) was too aggressive; kept subtle.
   Phones: a gentler tilt, so the near edge never grows past the screen. */
@media (max-width: 620px) {
  [data-tilt] { --tilt-deg: 5deg; --tilt-shrink: .04; }
}
.motion-ready [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal].is-in { opacity: 1; transform: none; }
.motion-ready [data-anim]:not(.is-playing),
.motion-ready [data-anim]:not(.is-playing) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-tilt] > .tilt-target { transform: none; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-caret { transition: none; }
}

/* Live prices (site-pricing.js): a beta-only / billing-only block it hides must
   stay hidden even where a component rule sets display. */
[data-when-beta][hidden], [data-when-billing][hidden] { display: none !important; }