/* The landing page: the game's film behind, the story in front.
   Native scroll only; the film reads the scroll, it never drives it. */

.fm-site { background: var(--fm-void); color: var(--fm-text); overflow-x: hidden; }
.fm-skip { position: absolute; left: -999px; top: 8px; background: var(--fm-text); color: #000; padding: 8px 12px; z-index: 50; }
.fm-skip:focus { left: 8px; }

.fm-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 14px var(--fm-gutter); background: linear-gradient(rgba(7, 8, 11, 0.85), rgba(7, 8, 11, 0)); }
.fm-nav__mark { font-family: var(--fm-head); font-weight: 700; letter-spacing: 0.3em; font-size: 14px; color: var(--fm-text); text-decoration: none; }
.fm-nav nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); }
.fm-nav nav a:not(.fm-btn) { font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fm-muted); text-decoration: none; }
.fm-nav nav a:not(.fm-btn):hover { color: var(--fm-text); }
.fm-nav__cta { padding: 9px 14px; min-height: 38px; font-size: 12px; }

.fm-film { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fm-film__frame { position: absolute; inset: 0; overflow: hidden; background: var(--fm-void); transition: inset 900ms var(--fm-ease), border-color 600ms; border: 1px solid transparent; }
.fm-film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transition: opacity 800ms; }
.fm-film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 900ms; }
.fm-film.is-live .fm-film__canvas { opacity: 1; }
.fm-film.is-live .fm-film__poster { opacity: 0; }
.fm-film__tele { position: absolute; right: var(--fm-gutter); bottom: var(--fm-gutter); display: grid; justify-items: end; gap: 4px; font-family: var(--fm-mono); text-shadow: 0 2px 12px #000; }
.fm-film__tele [data-tele-alt] { font-family: var(--fm-head); font-weight: 700; font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fm-film__tele [data-tele-delta] { color: var(--fm-alert); font-size: 18px; font-weight: 700; min-height: 1.2em; }
.fm-film__tele [data-tele-label] { color: var(--fm-data); font-size: 11px; letter-spacing: 0.2em; }
.fm-film__cliplabel { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-family: var(--fm-head); font-weight: 700; font-size: clamp(30px, 3vw, 46px); letter-spacing: -0.02em; color: var(--fm-alert); opacity: 0; transition: opacity 500ms; text-shadow: 0 0 40px rgba(255, 46, 77, 0.5); }

/* Chapter 7: the film becomes a vertical clip, framed like the export. */
body[data-chapter="7"] .fm-film__frame { inset: 10vh 8vw 10vh calc(92vw - 45vh); border-color: var(--fm-line-strong); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); }
body[data-chapter="7"] .fm-film__cliplabel { opacity: 1; }
body[data-chapter="7"] .fm-film__tele { left: 18px; right: auto; top: 18px; bottom: auto; justify-items: start; }

.fm-story { position: relative; z-index: 2; }
.fm-chapter { min-height: 100vh; padding: 22vh var(--fm-gutter) 12vh; max-width: min(620px, 92vw); display: flex; flex-direction: column; justify-content: center; }
.fm-chapter::before { content: ''; position: absolute; left: 0; width: min(760px, 100vw); height: 100%; background: linear-gradient(90deg, rgba(7, 8, 11, 0.86) 0%, rgba(7, 8, 11, 0.6) 60%, rgba(7, 8, 11, 0) 100%); z-index: -1; pointer-events: none; }
.fm-chapter { position: relative; }
.fm-chapter p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: #d8d5ce; max-width: 34em; }
.fm-hero { padding-top: 26vh; }
.fm-hero .fm-wordmark { font-size: clamp(64px, 12vw, 176px); }
.fm-lede { font-size: clamp(19px, 2vw, 24px) !important; color: var(--fm-text) !important; margin: 22px 0 8px; }
.fm-display { font-family: var(--fm-head); font-weight: 700; font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.04em; line-height: 0.95; margin: 0 0 18px; }
.fm-display--alert { color: var(--fm-alert); font-variant-numeric: tabular-nums; }
.fm-display--gold { color: var(--fm-gold); }
.fm-inline-data { font-family: var(--fm-mono); color: var(--fm-data); font-size: 0.9em; letter-spacing: 0.06em; white-space: nowrap; }
.fm-facts { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, auto); gap: 0; border-top: 1px solid var(--fm-line); width: fit-content; }
.fm-facts li { padding: 14px 22px 0 0; margin-right: 22px; }
.fm-facts strong { display: block; font-family: var(--fm-head); font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fm-facts span { font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--fm-muted); text-transform: uppercase; }
.fm-spec { display: grid; grid-template-columns: repeat(3, auto); gap: 0 28px; margin: 18px 0 0; font-family: var(--fm-mono); width: fit-content; border-top: 1px solid var(--fm-line); padding-top: 14px; }
.fm-spec dt { font-size: 10px; letter-spacing: 0.22em; color: var(--fm-muted); }
.fm-spec dd { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.fm-miniboard { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid var(--fm-line); max-width: 520px; }
.fm-miniboard li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--fm-line); font-family: var(--fm-mono); font-size: 13px; align-items: center; }
.fm-chapter--end { min-height: 110vh; }

.fm-foot { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding: 28px var(--fm-gutter); border-top: 1px solid var(--fm-line); background: var(--fm-void); font-family: var(--fm-mono); font-size: 12px; color: var(--fm-muted); }
.fm-foot__mark { font-family: var(--fm-head); font-weight: 700; letter-spacing: 0.3em; color: var(--fm-text); }
.fm-foot nav { display: flex; gap: 18px; }

@media (max-width: 760px) {
  .fm-nav nav a:not(.fm-btn) { display: none; }
  .fm-chapter { padding-top: 40vh; }
  .fm-chapter::before { width: 100vw; background: linear-gradient(180deg, rgba(7, 8, 11, 0) 0%, rgba(7, 8, 11, 0.85) 35%, rgba(7, 8, 11, 0.92) 100%); }
  .fm-facts { grid-template-columns: repeat(2, auto); }
  .fm-spec { grid-template-columns: 1fr; gap: 10px; }
  body[data-chapter="7"] .fm-film__frame { inset: 8vh calc(50vw - 17vh) 34vh calc(50vw - 17vh); }
}

/* Legal pages share the site frame. */
.fm-doc { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 110px var(--fm-gutter) 80px; }
.fm-doc h1 { font-family: var(--fm-head); font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.03em; margin: 0 0 8px; }
.fm-doc h2 { font-family: var(--fm-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fm-data); margin: 38px 0 10px; }
.fm-doc p, .fm-doc li { font-size: 17px; line-height: 1.65; color: #d8d5ce; }
.fm-doc table { border-collapse: collapse; width: 100%; font-family: var(--fm-mono); font-size: 13px; }
.fm-doc th, .fm-doc td { border-bottom: 1px solid var(--fm-line); padding: 10px 8px 10px 0; text-align: left; vertical-align: top; }
.fm-doc th { color: var(--fm-muted); font-weight: 400; letter-spacing: 0.1em; }

/* Editorial layer (design brief). */
.fm-hero .fm-wordmark { font-size: clamp(84px, 15vw, 228px); }
.fm-display { font-family: var(--fm-serif); font-weight: 400; letter-spacing: -0.025em; line-height: 0.95; font-size: clamp(44px, 6.4vw, 96px); }
.fm-display em { font-style: italic; }
.fm-lede { font-family: var(--fm-serif); font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.25 !important; }
.fm-facts { border-top-color: var(--fm-hair); }
.fm-facts li { border-right: 1px solid var(--fm-hair); padding-right: 22px; }
.fm-facts strong { font-family: var(--fm-serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 52px); }
.fm-facts span, .fm-spec dt, .fm-foot, .fm-nav nav a:not(.fm-btn) { text-transform: lowercase; letter-spacing: 0.12em; }
.fm-nav { border-bottom: 1px solid var(--fm-hair); background: linear-gradient(rgba(5, 5, 8, 0.85), rgba(5, 5, 8, 0.35)); color: var(--fm-text); backdrop-filter: blur(6px); }
.fm-nav__mark { font-family: var(--fm-serif); font-size: 22px; letter-spacing: 0; text-transform: none; }
.fm-nav__status { font-family: var(--fm-mono); font-size: 11px; color: var(--fm-muted); text-transform: lowercase; letter-spacing: 0.1em; }
.fm-chapter::before { background: linear-gradient(90deg, rgba(5, 5, 8, 0.88) 0%, rgba(5, 5, 8, 0.55) 60%, rgba(5, 5, 8, 0) 100%); }
.fm-film__tele [data-tele-alt] { font-family: var(--fm-serif); font-weight: 400; }
.fm-film__cliplabel { font-family: var(--fm-serif); font-weight: 400; font-style: italic; }
.fm-film__coords { position: absolute; right: var(--fm-gutter); top: 84px; font-family: var(--fm-mono); font-size: 10.5px; color: rgba(233, 230, 223, 0.5); text-align: right; white-space: pre; letter-spacing: 0.08em; }
.fm-doc h1 { font-family: var(--fm-serif); font-weight: 400; }

/* Scroll cue: fixed at the foot of the first screen until the visitor scrolls. */
.fm-scrollcue { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--fm-text); text-decoration: none; font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: lowercase; transition: opacity 0.4s ease, transform 0.4s ease; }
.fm-scrollcue__label { padding: 6px 10px; background: rgba(5,5,8,0.72); border: 1px solid var(--fm-hair, rgba(255,255,255,0.08)); }
.fm-scrollcue__line { position: relative; width: 1px; height: 46px; background: rgba(233,230,223,0.18); overflow: hidden; }
.fm-scrollcue__line i { position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--fm-signal, #ff5a1f); animation: fm-cue 1.6s cubic-bezier(.5,0,.3,1) infinite; }
.fm-scrollcue__arrow { font-size: 18px; color: var(--fm-signal, #ff5a1f); animation: fm-cue-bob 1.6s ease-in-out infinite; }
.fm-scrollcue.is-gone { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
@keyframes fm-cue { to { top: 100%; } }
@keyframes fm-cue-bob { 50% { transform: translateY(5px); } }
@media (hover: hover) { .fm-scrollcue:hover .fm-scrollcue__label { border-color: var(--fm-signal, #ff5a1f); } }
@media (prefers-reduced-motion: reduce) { .fm-scrollcue__line i, .fm-scrollcue__arrow { animation: none; } .fm-scrollcue__line i { top: 30%; } }

/* Badge register page (D-31) */
.fm-badge-search { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 20px 0; }
.fm-badge-search .fm-field { flex: 1 1 260px; }
.fm-badge-preview--page { max-width: 360px; width: 100%; margin-top: 12px; }

/* Easter egg: the wordmark falls (D-34) */
.fm-fall-letter { display: inline-block; animation: fm-letter-fall 1.1s cubic-bezier(.55,0,1,.45) var(--d) forwards, fm-letter-back 0.6s cubic-bezier(.2,.9,.1,1) calc(var(--d) + 3000ms) forwards; }
@keyframes fm-letter-fall { to { transform: translateY(110vh) rotate(var(--r)); } }
@keyframes fm-letter-back { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fm-fall-letter { animation: none; } }