/* style.css — one file, mobile first. Two layouts: "overlay" (default) and "split" (wide screens, see bottom). */

:root {
  --bg: #0b0b0c;
  --fg: #f2f2f2;
  --dim: #a3a3a3;
  --accent: #f2c230;   /* the yellow of the robot's hip actuators. Change it here and it changes everywhere. */
  --pad: clamp(16px, 4vw, 32px);
  --font-head: -apple-system, "Segoe UI", Inter, Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; background: var(--bg); color: var(--fg); }
body { margin: 0; font-family: var(--font-mono); overflow-x: hidden; }

/* ---------- a scene: full screen, snaps to the top ---------- */
.scene {
  position: relative;
  height: 100vh;        /* fallback for old browsers */
  height: 100svh;       /* svh, not dvh: nothing jumps when the mobile address bar collapses */
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* one scene per swipe: a fling on a phone cannot skip past the next snap point */
  background: var(--bg);
}

/* media fills the scene; --focal (set per scene in index.html) decides what survives the crop */
.media { position: absolute; inset: 0; }
.media video, .media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focal, 50% 50%);
}
/* scrim behind the text so it stays readable on bright frames (overlay layout only) */
.media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(11,11,12,.85) 0%, rgba(11,11,12,.55) 45%, transparent 100%);
}

/* ---------- text block: bottom of the screen in the overlay layout ---------- */
.text {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--pad);
  padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  padding-left: calc(var(--pad) + env(safe-area-inset-left));
  padding-right: calc(var(--pad) + env(safe-area-inset-right));
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.js .scene:not(.in-view) .text { opacity: 0; transform: translateY(8px); }   /* fade-in, only when JS runs */

.text p { margin: 0; }
.overline {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); margin-bottom: .75em !important;
}
h2 {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 5vmin + 0.6rem, 4.25rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance;
  margin: 0 0 .4em;
}
.en { font-size: .9rem; line-height: 1.5; max-width: 46ch; color: var(--fg); }
[lang="zh-Hans"] { font-size: .85rem; line-height: 1.6; color: var(--dim); margin-top: .5em !important; }

/* "tap to play" only appears when JS could not autoplay (Low Power Mode, reduced motion) */
.tap { display: none; font-size: .75rem; color: var(--accent); margin-top: .75em !important; }
.needs-tap .tap { display: block; }
.needs-tap { cursor: pointer; }

/* ---------- links & focus ---------- */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the scroll hint sits bottom-right on phones, so the hero caption stops short of it */
.hero .text { padding-right: calc(var(--pad) + 36px + env(safe-area-inset-right)); }

/* ---------- outro: text only, centred (extra right padding keeps it clear of the dots) ---------- */
.scene.outro {
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad); padding-right: calc(var(--pad) + 22px + env(safe-area-inset-right));
}
.outro .text { position: static; max-width: 34rem; padding: 0; }
.outro .en, .outro [lang="zh-Hans"] { max-width: none; }
.links { list-style: none; padding: 0; margin: 1.5em 0; font-size: .9rem; }
.links li { margin: .4em 0; }
.now { font-size: .75rem; color: var(--dim); }

/* ---------- progress dots (built by scenes.js) ---------- */
.dots {
  position: fixed; z-index: 3; top: 50%; transform: translateY(-50%);
  right: max(10px, env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0;
}
.dots button {
  width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.dots button::before {                     /* the 8 px dot itself; the 20 px button is the tap target */
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--dim); background: transparent;
}
.dots button.current::before { background: var(--accent); border-color: var(--accent); }

/* ---------- scroll hint on scene 1 ---------- */
.hint {
  position: absolute; z-index: 2; color: var(--dim);
  bottom: calc(8px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right));
  transition: opacity .3s;
}
.hint.gone { opacity: 0; }

/* ---------- short landscape phones (sideways, ~844×390): keep overlay, text bottom-left ---------- */
@media (orientation: landscape) and (max-height: 559px) {
  .text { right: auto; max-width: 60%; }
  /* the text block is taller here, so the scrim covers the whole height and darkens the left side too */
  .media::after {
    height: 100%;
    background: linear-gradient(to top, rgba(11,11,12,.85) 0%, rgba(11,11,12,.5) 50%, transparent 100%),
                linear-gradient(to right, rgba(11,11,12,.55) 0%, transparent 65%);
  }
}

/* ---------- SPLIT layout: laptops, desktops, tablets sideways ---------- */
@media (orientation: landscape) and (min-height: 560px) {
  .scene:not(.outro) { display: grid; grid-template-columns: 62fr 38fr; }
  .media { position: relative; inset: auto; min-height: 0; overflow: hidden; }
  .media::after { display: none; }                          /* no scrim needed */
  .text, .hero .text {
    position: relative; inset: auto; align-self: center;
    padding: clamp(24px, 4vw, 64px); max-width: 30rem;
  }
  /* portrait video: blurred poster fills the column, the video sits on top uncropped */
  .portrait .media::before {
    content: ""; position: absolute; inset: 0;
    background: var(--poster) center / cover no-repeat;
    filter: blur(40px) brightness(.45); transform: scale(1.1);
  }
  .portrait .media video { position: relative; object-fit: contain; }
  .hint { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---------- reduced motion: no fade, no smooth scroll ---------- */
@media (prefers-reduced-motion: reduce) {
  .text, .hint { transition: none; }
  html { scroll-behavior: auto; }
}