/* The story: six full-screen scenes over a canvas. Only applies when JavaScript runs. */
html.js #stage { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 0; background: var(--black); }
html.js #bar { position: fixed; left: 0; right: 0; }
html.js.in-show #bar { background: var(--black); }
html.js #story { position: relative; height: 100vh; height: 100dvh; overflow: hidden; z-index: 1; outline: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.js .scene { position: absolute; inset: 0; text-align: center; padding: 0 28px; }
html.js .scene [data-line], html.js .scene .actions, html.js .scene .cut-card, html.js .scene .name, html.js .denied-stack span { display: none; }
html.js .scene .show { display: block; animation: rise .5s ease both; }
html.js .scene .actions.show { display: flex; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

html.js .scene > * { position: absolute; left: 28px; right: 28px; }
html.js .scene .label { font-size: 10px; opacity: .65; }
html.js .scene .voice { font-size: clamp(19px, 5.4vw, 23px); line-height: 1.32; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
html.js .scene .big { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.25; }
html.js .scene .actions { flex-direction: column; align-items: center; gap: 6px; }

/* captions */
html.js #caption { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100vh - 13.5rem); top: calc(100dvh - 13.5rem); margin: 0 auto; max-width: 30rem; padding: 0 28px;
  text-align: center; font-size: clamp(19px, 5.4vw, 23px); line-height: 1.32; min-height: 4rem; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8); opacity: 0; transition: opacity .3s ease; }
html.js #caption.on { opacity: 1; }
html.js[data-world="human"] #caption { color: var(--deep); text-shadow: 0 0 18px rgba(255,255,255,.55); }

/* hold ring */
.hold { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; line-height: 1.4;
  background: conic-gradient(var(--red) calc(var(--p, 0) * 1turn), rgba(238,240,246,.25) 0); touch-action: none; }
.hold::before { content: ""; grid-area: 1 / 1; width: 88px; height: 88px; border-radius: 50%; background: var(--black); }
.hold span { grid-area: 1 / 1; position: relative; }
.hint { font-size: 11px; opacity: .75; }

/* boot */
html.js [data-scene="boot"] [data-line="standby"] { top: 14vh; top: 14dvh; }
html.js [data-scene="boot"] #boot-from { top: calc(14vh + 22px); top: calc(14dvh + 22px); opacity: 1; color: var(--red); }
/* The texts and buttons stack from the bottom, so they can never sit on one another; the heart takes the room left above. */
html.js [data-scene="boot"] { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px;
  padding-bottom: max(18px, env(safe-area-inset-bottom)); }
html.js [data-scene="boot"] > [data-line="year"], html.js [data-scene="boot"] > [data-line="premise"], html.js [data-scene="boot"] > .actions { position: static; max-width: 34rem; }
html.js [data-scene="boot"] [data-line="premise"] { font-size: clamp(16px, 4.4vw, 19px); opacity: .85; }
html.js [data-scene="boot"] [data-line="premise"].show { animation: rise .8s ease 3.5s both; }
html.js [data-scene="boot"] .actions { margin-top: 6px; }
#boot-resume { display: flex; gap: 12px; }

/* hunt */
html.js [data-scene="hunt"] .credit { bottom: 22px; font-size: 9px; opacity: .55; }

/* mission */
html.js [data-scene="mission"] .order { top: 13vh; top: 13dvh; font-size: 15px; font-weight: 700; line-height: 1.5; text-shadow: 0 0 12px #000; }
html.js [data-scene="mission"] .actions { bottom: 13vh; bottom: 13dvh; }
html.js [data-scene="mission"] [data-line="failure"] { bottom: 6vh; bottom: 6dvh; font-size: 12px; font-weight: 700; }
html.js [data-scene="mission"] [data-line="shutdown"] { top: 48vh; top: 48dvh; font-size: 12px; font-weight: 700; }

/* denied */
html.js .denied-stack { top: 36vh; top: 36dvh; font-size: clamp(20px, 6vw, 26px); font-weight: 700; line-height: 1.75; text-shadow: 0 0 22px rgba(248,56,94,.55); }
html.js .denied-stack span.show { display: block; animation: none; }

/* awakening */
html.js[data-world="human"] #story { color: var(--deep); }
html.js[data-world="human"] #bar { background: none; color: var(--deep); }
html.js[data-world="human"] #bar-sound[aria-checked="true"] [data-seg="on"], html.js[data-world="human"] #bar-sound[aria-checked="false"] [data-seg="off"] { background: var(--deep); border-color: var(--deep); color: var(--cold); }
html.js[data-world="human"] .scene .voice { text-shadow: 0 0 18px rgba(255,255,255,.5); }
html.js [data-scene="awakening"] [data-line="arm"] { top: 30vh; top: 30dvh; opacity: .8; }
html.js [data-scene="awakening"] .name { top: 35vh; top: 35dvh; font-size: clamp(72px, 26vw, 128px); line-height: 1; color: var(--deep); }
html.js [data-scene="awakening"] .name.show { display: block; }
#name-morph span { display: inline-block; font-family: "Space Mono", monospace; font-weight: 700; letter-spacing: -.02em; transition: opacity .25s; }
#name-morph span.human { font-family: "Fraunces Roman", Georgia, serif; font-weight: 600; padding: 0 .03em; }
html.js [data-scene="awakening"] [data-line="hope"] { top: 60vh; top: 60dvh; }

/* cut */
html.js [data-scene="cut"] [data-line="next"] { top: 50vh; top: 50dvh; }
html.js [data-scene="cut"] .cut-card { top: calc(50vh + 5.2rem); top: calc(50dvh + 5.2rem); }
html.js [data-scene="cut"] .cut-card.show { display: block; }
.cut-card .when { font-size: clamp(16px, 4.8vw, 20px); }
.cut-card .where { font-size: 11px; margin: .5rem 0 1.1rem; }
.cut-card .price { font-size: 10px; margin-top: .9rem; opacity: .85; }
.cut-card .quiet { margin-top: .2rem; }

html.js #real[hidden] { display: none; }

@media (max-height: 600px) {
  html.js [data-scene="boot"] { gap: 6px; padding-bottom: 8px; }
  html.js [data-scene="boot"] .actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 0; }
  html.js [data-scene="boot"] .hint { display: none; }
  html.js [data-scene="cut"] [data-line="next"] { top: 16vh; }
  html.js [data-scene="cut"] .cut-card { top: calc(16vh + 4.6rem); }
  html.js #caption { top: calc(100vh - 9rem); top: calc(100dvh - 9rem); }
  .hold { width: 76px; height: 76px; } .hold::before { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .scene .show { animation: fade .4s ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}