/* Mafia Stage landing. Page layout only; every value is a token from /ds/tokens.css and every component a class from /ds/components.css. */
html { scroll-behavior: smooth; }
/* reveal on scroll: a short rise and fade, once, as a block enters the viewport. Only when JS runs; never under reduced motion. */
html:not(.no-js) [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter); transition-delay: calc(var(--reveal-delay, 0) * 120ms); will-change: opacity, transform; }
html:not(.no-js) [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
html:not(.no-js) [data-reveal-delay="1"] { --reveal-delay: 1; }
html:not(.no-js) [data-reveal-delay="2"] { --reveal-delay: 2; }
@media (prefers-reduced-motion: reduce) { html:not(.no-js) [data-reveal] { opacity: 1; transform: none; transition: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--space-5); }
.page { min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; } /* light pools and shadows may reach past the edge; in RTL that would become scrollable */

/* nav: marks on black */
.nav { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.nav .grow { flex: 1; }
.nav .ms-pillgroup { flex: none; }
.nav .ms-pill { height: 38px; }
.skip { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px; z-index: 50; }
.skip:focus-visible { inset-block-start: var(--space-3); }
button, a, .ms-pill { touch-action: manipulation; }
.chat-prop { width: 100%; max-width: 340px; gap: var(--space-3); }
.chat-prop .ms-btn { align-self: stretch; pointer-events: none; }

/* hero */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--space-6) var(--space-7); }
.hero-light { --lx: 50%; --ly: 10%; position: absolute; inset: -60px -200px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 30% 36% at var(--lx) var(--ly), rgb(245 195 90 / 0.16), rgb(245 195 90 / 0.05) 45%, transparent 72%); }
.hero .sym { width: 128px; height: 128px; filter: drop-shadow(0 24px 36px rgb(0 0 0 / 0.8)); margin-block-end: var(--space-3); }
.hero h1 { max-width: 14ch; margin-block-start: var(--space-3); }
.hero h1 .b { display: block; color: var(--spotlight); }
.hero .lead { max-width: 46ch; color: var(--dim); margin-block: var(--space-4) var(--space-5); }
.hero .cta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-5); color: var(--dim); font-size: var(--size-body-s); }
.facts li { display: inline-flex; align-items: center; gap: var(--space-2); }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spotlight); }

/* the table: ten real seats */
.table-wrap { width: 100%; max-width: 920px; margin-block-start: var(--space-7); }
.table-wrap .ms-table { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.table-cap { margin-block-start: var(--space-3); color: var(--faint); font-size: var(--size-caption); text-align: center; min-height: 1.5em; }

/* acts: typographic, no boxes */
.act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; padding-block: var(--space-9); }
.act + .act { padding-block-start: 0; }
.act h2 .b { color: var(--spotlight); }
.act p { color: var(--dim); max-width: 40ch; margin-block-start: var(--space-3); }
.act .obj { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px; }
.act .obj::before { content: ""; position: absolute; inset: -32px; background: var(--light-pool); pointer-events: none; }
.act .obj > * { position: relative; }
.act .obj .ms-rolecard { transform: rotate(-5deg); }
.act .obj .seat-wrap { width: 280px; }
.act .ledger-wrap { width: 100%; max-width: 360px; }
.act .ledger-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-block-start: var(--space-3); }

/* the panel on a laptop and on a phone */
.shots { padding-block: var(--space-9) 0; }
.shots-head { max-width: 60ch; }
.shots-head p { color: var(--dim); margin-block-start: var(--space-3); }
.shots-bar { display: flex; justify-content: flex-start; margin-block-start: var(--space-5); }
.browser { margin-block-start: var(--space-4); border-radius: var(--radius-l); background: var(--smoke); box-shadow: var(--shadow-prop), var(--edge-strong); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; box-shadow: 0 1px 0 var(--edge-colour); color: var(--faint); font-size: var(--size-caption); }
.browser-bar .dots { display: inline-flex; gap: 5px; }
.browser-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--haze); }
.browser-bar .url { font-family: var(--font-body-en); direction: ltr; }
.browser-body { background: var(--stage); display: flex; justify-content: center; align-items: center; min-height: 0; }
.ph-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--dim); }
.ph-screen img { opacity: 0.6; }
.ph-desktop { width: 100%; aspect-ratio: 1208 / 801; }
.ph-mobile { width: 280px; max-width: 70%; aspect-ratio: 390 / 845; margin-block: var(--space-6); border-radius: 36px; background: var(--smoke); box-shadow: var(--edge-strong), 0 20px 40px rgb(0 0 0 / 0.5); }
.browser[data-view="desktop"] .ph-mobile { display: none; }
.browser[data-view="mobile"] .ph-desktop { display: none; }
.shots-cap { color: var(--dim); margin-block-start: var(--space-3); }

/* for Gods */
.god { text-align: center; padding-block: var(--space-9); }
.god h2 { max-width: 18ch; margin-inline: auto; }
.god h2 .b { color: var(--spotlight); }
.god p { color: var(--dim); max-width: 52ch; margin: var(--space-4) auto 0; }
.god .three { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-block-start: var(--space-5); }
.god .three li { display: inline-flex; align-items: center; gap: var(--space-2); }
.god .three li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spotlight); }

/* scenarios as a cast list */
.credits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-7); align-items: start; padding-block: var(--space-9); }
.credits p { color: var(--dim); max-width: 34ch; margin-block-start: var(--space-3); }
.cast { display: flex; flex-direction: column; }
.cast li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); box-shadow: 0 1px 0 var(--edge-colour); align-items: baseline; }
.cast li:first-child { box-shadow: inset 0 1px 0 var(--edge-colour), 0 1px 0 var(--edge-colour); }
.cast .n { display: flex; flex-direction: column; gap: 4px; }
.cast .n .ms-badge { align-self: flex-start; }
.cast li.first .t-display-s { color: var(--spotlight); }
.cast .roles { color: var(--dim); font-size: var(--size-body-s); line-height: var(--leading-body); }
.cast .roles b { color: var(--ink); font-weight: var(--weight-medium); }
.cast .more-row { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; box-shadow: none; }
.cast li.extra .t-display-s[lang="en"] { font-family: var(--font-display-en); direction: ltr; }
.cast li.extra .t-display-s[lang="fa"] { font-family: var(--font-display-fa); direction: rtl; }
.cast li[hidden] { display: none; }

/* invitation: a stage panel, not a box */
.invite { scroll-margin-block-start: var(--space-6); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); align-items: start; padding-block: var(--space-8) var(--space-9); }
.invite p { color: var(--dim); max-width: 44ch; margin-block-start: var(--space-3); }
.invite form { display: flex; flex-direction: column; gap: var(--space-4); border-radius: var(--radius-l); }
.invite form.is-arrived { animation: invite-arrive 1.6s var(--ease-stage) both; }
@keyframes invite-arrive { 0% { box-shadow: 0 0 0 2px var(--spotlight), var(--glow-spotlight-soft); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .invite form.is-arrived { animation: none; box-shadow: 0 0 0 2px var(--spotlight); } }
.invite fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.invite .roles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.invite .roles label { cursor: pointer; position: relative; }
.invite .roles input { position: absolute; opacity: 0; width: 0; height: 0; }
.invite .roles input:checked + .ms-pill { background: var(--ink); color: var(--on-ink); }
.invite .roles input:focus-visible + .ms-pill { box-shadow: var(--ring-focus); }
.invite .consent { color: var(--faint); font-size: var(--size-caption); }
.invite .status { min-height: 1.5em; font-size: var(--size-body-s); }
.invite .status[data-tone="error"] { color: var(--danger); }
.invite .hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* no large offsets: in RTL a negative left offset becomes scrollable overflow */
.invite .done { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.invite .done .ms-badge { margin-block-end: var(--space-2); }

footer { padding-block: var(--space-5) calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); color: var(--faint); font-size: var(--size-caption); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; box-shadow: inset 0 1px 0 var(--edge-colour); }
footer .ms-brand { color: var(--dim); }
footer .ms-mark { width: 20px; height: 20px; }
footer .ms-wordmark { font-size: 14px; }

@media (max-width: 900px) {
  .act, .credits, .invite { grid-template-columns: 1fr; gap: var(--space-5); }
  .act { padding-block: var(--space-7); }
  .act .obj { min-height: 260px; }
  .cast li { grid-template-columns: 1fr; gap: var(--space-2); }
  .cast .more-row { align-items: stretch; }
  .cast .more-row .ms-btn { width: 100%; }
}
@media (max-width: 720px) {
  .hero { padding-block: var(--space-5) var(--space-6); }
  .hero .sym { width: 96px; height: 96px; }
  .table-wrap { margin-block-start: var(--space-6); }
  .table-wrap .ms-table { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .nav .ms-btn { display: none; }
  .act .obj::before { inset: 0; }
}