/* Slamframe landing: the studio (app/studio.css) running the sample project, driven by scroll.
   Only the scroll story lives here: which messages and rows are showing, the edit wipe, the
   export counter, the stamped film strip. Every component's look comes from studio.css. */
:root {
  /* scrollcraft's roles, mapped onto the app's tokens so the engine's base styles agree */
  --sc-canvas: var(--bg);
  --sc-surface: var(--surface);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--mute);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--accent-ink);
  --sc-font-display: var(--body);
  --sc-font-text: var(--body);
  --sc-font-mono: var(--mono);
  --sc-shadow-color: 30 30% 3%;
  --sf-cost-ground: #1d1909;
}

body { background: var(--bg); color: var(--ink); font-family: var(--body); }

.sf-surface { transition: background-color 420ms var(--ease-out); }
.sf-surface[data-state="cost"], .sf-surface[data-state="turn"] { --sf-ground: var(--sf-cost-ground); }
/* Without the script the surface is a normal page, so everything stays readable. */
html:not(.sf-js) .sf-surface { position: static; height: auto; min-height: 100svh; }

/* messages and rows appear as the story reaches them */
html.sf-js .sf-msg:not(.is-on), html.sf-js [data-at]:not(.is-on) { display: none; }
.sf-msg.is-on, html.sf-js [data-at].is-on { animation: sf-in 240ms var(--ease-out) both; }
@keyframes sf-in { from { opacity: 0; transform: translateY(6px); } }

/* The close: the conversation steps back and the input takes the stage. */
.sf-surface[data-state="turn"] .sf-msgs { opacity: 0.35; }
.sf-surface[data-state="turn"] .sf-composer { border-color: var(--accent); box-shadow: var(--edge), var(--e3); }
.sf-surface[data-state="turn"] .sf-composer__label { color: var(--accent); }

/* preview: two canvases, the edited one wipes in over the original */
.sf-preview { background-image: url(/media/preview-poster.jpg); background-size: cover; background-position: center; }
html.sf-js .sf-preview { background-image: none; }
.sf-canvas--edit { clip-path: inset(0 100% 0 0); }
html:not(.sf-js) .sf-preview__empty { display: none; }
.sf-preview.is-live .sf-preview__empty { opacity: 0; pointer-events: none; }
.sf-preview__go.is-pressed { transform: translateY(1px) scale(0.96); opacity: 0.8; }

/* the strip stamps each scene's frame as the playhead crosses it */
.sf-cell.is-stamped canvas { animation: sf-stamp 260ms var(--ease-out); }
@keyframes sf-stamp { from { transform: scale(1.12); } }

html.sf-js .sf-panel[hidden] { display: none; }
html.sf-js .sf-export-done:not(.is-on) { visibility: hidden; }
html.sf-js .sf-ledger tr:not(.is-on) { display: none; }

/* ------------------------------------------------------- phone and tablet --
   The studio's own stacking (studio.css), plus what the story shows at each step:
   the latest message only, and the composer only at the close. */
@media (max-width: 900px) {
  .sf-chat { padding-block: 10px max(12px, env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .sf-panel { overflow: auto; }
  html.sf-js .sf-chat .sf-head { display: none; }
  html.sf-js .sf-msgs { flex: none; overflow: hidden; }
  html.sf-js .sf-msgs .sf-msg.is-on:not(.is-last) { display: none; }
  html.sf-js .sf-msg { max-width: 100%; }
  html.sf-js .sf-composer { display: none; }
  html.sf-js .sf-surface[data-state="ready"] .sf-chat { display: none; }
  html.sf-js .sf-surface[data-state="turn"] .sf-composer { display: grid; }
  html.sf-js .sf-surface[data-state="turn"] .sf-msgs { display: none; }
  html.sf-js .sf-surface[data-state="turn"] .sf-inspector { display: none; }
  html.sf-js .sf-surface[data-state="turn"] .sf-body { grid-template-rows: auto auto 1fr; }
  html:not(.sf-js) .sf-body { display: flex; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-msg.is-on, html.sf-js [data-at].is-on { animation: none; }
  .sf-cell.is-stamped canvas { animation: none; }
}

/* Without the script: a plain readable page, preview at the top of its column. */
html:not(.sf-js) .sf-stagecol { justify-content: flex-start; }