/* Studio Day page: the hero with Frame's x-ray loop, the six steps, and the demo button.
   The game dialog itself is styled by home.css + director.css. */

/* The button label follows the unlock: html[data-sd="done"] (studio-state.js) means Free mode. */
:root[data-sd="done"] .sd-open [data-sd-new],
:root:not([data-sd="done"]) .sd-open [data-sd-done] { display: none; }

/* ---------- Boot cover: the studio's loading screen, painted with the page (why-us.js removes it once the
   studio is open). It sits where the studio's own loader will be, so the hand-over doesn't jump. If the
   script never runs, it fades away on its own and the page is usable. ---------- */
.sd-boot {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: #0b0b0e; color: rgb(255 255 255 / 0.5);
  font: 700 0.6875rem/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  animation: sd-boot-out 0.3s 10s forwards;
}
.sd-boot p { margin: 0; }
.sd-boot__bar { margin: 0; font: 500 clamp(0.8rem, 0.7rem + 0.4vw, 1rem)/1 var(--font-mono); letter-spacing: 0; color: #8fe3ff; white-space: pre; }
@media (min-width: 48em) and (pointer: fine) { .sd-boot { padding: 97px clamp(300px, 25vw, 380px) 0 0; } }
@keyframes sd-boot-out { to { opacity: 0; visibility: hidden; } }
/* No page-to-page slide into (or out of) this page: the studio opens on load, and under the slide it
   blended with the page before and then popped in. A page's opt-out turns its transitions off. */
@view-transition { navigation: none; }
/* Opened over the cover, the studio appears at once rather than fading in from black. */
.fg[data-autoopen][open] { animation: none; }

/* ---------- Hero ---------- */
.sd-hero { border-bottom: 1px solid var(--line); }
.sd-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-7); }
.sd-hero__art { width: clamp(9rem, 6rem + 10vw, 15rem); }

@media (max-width: 47.99em) {
  .sd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sd-hero__art { order: -1; width: 7.5rem; }
  .sd-open { width: 100%; justify-content: center; }
}

/* ---------- Six steps ---------- */
.sd-steps__title {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: var(--space-5);
}
.sd-steps__list {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  list-style: none; margin: 0; padding: 0;
}
.sd-step {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon n" "name name";
  align-items: center; gap: var(--space-4) var(--space-3);
  padding: clamp(1rem, 0.7rem + 1vw, 1.5rem); background: var(--ink-2);
}
.sd-step__icon {
  grid-area: icon; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--accent);
}
.sd-step__icon .icon { width: 1.25rem; height: 1.25rem; }
.sd-step__n { grid-area: n; justify-self: end; font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3); }
.sd-step__name { grid-area: name; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--text); }

.sd-steps__cta { margin-top: var(--space-6); }

@media (max-width: 63.99em) {
  .sd-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 29.99em) {
  .sd-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-steps__cta .btn { width: 100%; justify-content: center; }
}

/* Desktop: the site's floating contact buttons sit at the right edge; keep the last step clear of them. */
@media (min-width: 64em) {
  .sd-steps__list { margin-right: 4.5rem; }
}