/* ALL BLACK Construtora. Page-local styles.
   The engine (scrollcraft.css / scrollcraft.js) is never edited: this file only
   sets tokens and styles our own markup. */

/* ------------------------------------------------------------------ fonts -- */
/* AB Lambda holds only the capital A (and accented As), drawn WITHOUT the
   crossbar of the ALL BLACK wordmark. unicode-range makes it win for those
   characters; every other letter falls through to Syncopate. */
@font-face {
  font-family: "AB Lambda";
  src: url("fonts/ab-lambda.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0041, U+00C0-00C5;
}
@font-face {
  font-family: "Syncopate";
  src: url("fonts/syncopate-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Syncopate";
  src: url("fonts/syncopate-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* Six roles. Concrete, night, and one warm light that stays OFF until the
     house is lit. */
  --sc-canvas:     #0b0c0e;
  --sc-surface:    #14161a;
  --sc-ink:        #f1eee9;
  --sc-ink-soft:   #aaa7a2;
  --sc-accent:     #ffae4a;
  --sc-accent-ink: #14100b;
  --sc-shadow-color: 30 20% 3%;

  --sc-font-display: "AB Lambda", "Syncopate", "Arial Black", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --lit: 0;              /* 0 = site dark and monochrome, 1 = house lit, page lit */
  --pr: 0;               /* 0..1 position along the flight */
  --rail: 9rem;         /* room the tape takes on the left edge */
  --bar-h: 4.6rem;

  /* the colour of "the light": ink until the lights come on, then amber */
  --hot: color-mix(in oklab, var(--sc-accent) calc(var(--lit) * 100%), var(--sc-ink));
}

html { background: var(--sc-canvas); }
body { min-height: 100svh; }

/* ------------------------------------------------------------- the loader -- */
/* The ALL BLACK mark fills from the ground up like a building going up. The fill is
   the real loading progress (fonts, hero image, near plane), not a timer. */
.loader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .loader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 200;
  background: var(--sc-canvas);
  --p: 0;
}
.loader__logo {
  position: relative;
  width: clamp(12rem, 34vw, 21rem);
  aspect-ratio: 4008 / 1620;
  color: var(--sc-ink);
}
.loader__ghost, .loader__fill {
  position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: url("assets/logo-full.svg") center / contain no-repeat;
          mask: url("assets/logo-full.svg") center / contain no-repeat;
}
.loader__ghost { opacity: 0.14; }
.loader__fill {
  clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0);
  will-change: clip-path;
}
/* leaving: the curtain lifts, uncovering the page from the bottom up */
html.is-loading .loader.is-leaving {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 760ms var(--sc-ease-in-out);
}
html.is-loading .loader.is-leaving .loader__logo { opacity: 0; transform: translateY(-1.2rem); transition: opacity 320ms var(--sc-ease-out), transform 520ms var(--sc-ease-out); }
@media (prefers-reduced-motion: reduce) {
  html.is-loading .loader.is-leaving { clip-path: none; opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
}

/* ---------------------------------------------------------------- the bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2.4vh, 1.5rem) clamp(1rem, 2.6vw, 2.2rem);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__brand { display: block; line-height: 0; color: var(--sc-ink); }
.logo {
  display: block;
  width: clamp(6.4rem, 9.5vw, 8.6rem);
  aspect-ratio: 4008 / 1620;
  background: currentColor;
  -webkit-mask: url("assets/logo-full.svg") center / contain no-repeat;
          mask: url("assets/logo-full.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------- the CTA -- */
/* Angular, like the mark: two opposite corners are cut. One label for the whole
   page: "Iniciar meu projeto". */
.cta {
  --cut: 0.62rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 1.55rem;
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
  color: var(--sc-accent-ink);
  background: var(--sc-ink);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.cta--bar { background: transparent; color: var(--sc-ink); position: relative; isolation: isolate; }
.cta--bar::before { /* hairline frame that follows the cut corners */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  clip-path: inherit;
}
.cta--bar::after {
  content: ""; position: absolute; inset: 1px; z-index: -1;
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  clip-path: polygon(calc(var(--cut) - 0.4px) 0, 100% 0, 100% calc(100% - var(--cut) + 0.4px), calc(100% - var(--cut) + 0.4px) 100%, 0 100%, 0 calc(var(--cut) - 0.4px));
  transition: background-color 160ms var(--sc-ease-out);
}
.cta--lit { background: var(--hot); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; border-radius: 0; clip-path: none; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-accent)); }
  .cta--lit:hover { background: color-mix(in oklab, var(--hot) 88%, white); }
  .cta--bar:hover { background: transparent; }
  .cta--bar:hover::after { background: color-mix(in oklab, var(--sc-canvas) 55%, var(--sc-ink)); }
  .cta--bar:hover { color: var(--sc-ink); }
}

/* ------------------------------------------------------------ world layers -- */
.world-pan {
  position: absolute; inset: -2.5%;     /* 5% bleed so the pointer shift never shows an edge */
  transform: translate3d(calc(var(--px, 0) * -1.1%), calc(var(--py, 0) * -0.8%), 0);
  will-change: transform;
}
.world-fg {
  position: absolute; inset: -3% -3% -6% -3%;
  z-index: 130;                          /* above every leg (the engine uses 100 to 120) */
  mix-blend-mode: multiply;
  pointer-events: none;
  /* The grass is the near plane: it leans toward the pointer and, as the house
     rises, sinks out of the frame so the finished house is not behind it. */
  transform: translate3d(calc(var(--px, 0) * 2.4%), calc(var(--py, 0) * 1.4% + 3vh + var(--pr) * 24vh), 0) scale(1.04);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  opacity: clamp(0.12, calc(0.96 - var(--pr) * 2.6), 1);
}
.world-fg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* <main> only wraps the world and the spacer; it must not itself be a block in the flow */
main { display: contents; }

/* Posters sit in a <picture> (portrait art for phones), which the engine's own
   rule for a leg's direct children does not reach. */
.sc-world__seg > picture { position: absolute; inset: 0; display: block; z-index: 0; }
.sc-world__seg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ scrims -- */
/* A scrim only where text sits. Two, because the copy sits in two zones: the
   sky (top) and the ground (bottom). The middle of the frame is the house. */
.scrim { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; }
/* The copy sits in corners, so the density goes in corners: the house in the middle
   of the frame is never dimmed to fix a headline. */
.scrim--bl {
  left: 0; right: auto; bottom: 0; width: min(76%, 64rem); height: 62%;
  background: radial-gradient(ellipse 100% 100% at 0% 100%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 28%,
    color-mix(in oklab, var(--sc-canvas) 54%, transparent) 56%,
    color-mix(in oklab, var(--sc-canvas) 20%, transparent) 80%,
    transparent 100%);
}
.scrim--br {
  left: auto; right: 0; bottom: 0; width: 58%; height: 40%;
  background: radial-gradient(ellipse 100% 100% at 100% 100%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 64%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 26%, transparent) 66%,
    transparent 100%);
}
.scrim--top {
  top: 0; height: 36%;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 76%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 46%, transparent) 46%,
    transparent 100%);
}
/* the peak line sits in the middle of the sky, where the sunset is brightest */
.scrim--sky {
  top: 0; height: 60%;
  background: radial-gradient(60% 46% at 50% 26%,
    color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 42%, transparent) 60%,
    transparent 100%);
}

/* -------------------------------------------------------------------- type -- */
.hd {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 0.62rem + 2.35vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--sc-ink);
  /* light text on dark: one step more line height than the light-on-light default */
}
.hd--hero {
  font-size: clamp(1.5rem, 0.7rem + 4.5vw, 4.3rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.hd--small { font-size: clamp(0.95rem, 0.6rem + 1.45vw, 1.7rem); line-height: 1.22; }
.hd--peak  { font-size: clamp(1.7rem, 0.7rem + 4.9vw, 4.6rem); line-height: 1.06; letter-spacing: -0.012em; }
/* the words that light up with the house */
.lit { color: var(--hot); }

.tx {
  margin: 1.1rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  line-height: 1.58;
  letter-spacing: 0.002em;
  color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-canvas));
  text-wrap: pretty;
}
.hd--hero + .tx { margin-top: 1.4rem; }
.hd--hero ~ .cta { margin-top: 2rem; }

/* -------------------------------------------------------- copy anchoring -- */
/* The engine's .sc-copy classes are for act mode; the world copy layer is ours.
   Anchors vary on purpose: lead, top-trail, split, trail, low, sky, close. */
.copy { position: absolute; z-index: 1; will-change: opacity, transform; }
.copy--lead     { left: calc(var(--sc-gutter) + var(--rail)); bottom: clamp(2.4rem, 11vh, 7rem); max-width: min(62rem, calc(100vw - var(--sc-gutter) * 2 - var(--rail))); }
.copy--top-trail{ right: var(--sc-gutter); top: clamp(5rem, 11vh, 8.4rem); max-width: min(34rem, 56vw); text-align: right; }
.copy--tl       { left: calc(var(--sc-gutter) + var(--rail)); top: clamp(5rem, 11vh, 8.4rem); max-width: min(34rem, 52vw); }
.copy--br       { right: var(--sc-gutter); bottom: clamp(2.4rem, 11vh, 7rem); max-width: min(28rem, 50vw); text-align: right; }
.copy--br .tx   { margin: 0; }
.copy--trail    { right: var(--sc-gutter); bottom: clamp(2.4rem, 11vh, 7rem); max-width: min(34rem, 58vw); text-align: right; }
.copy--trail .tx { margin-left: auto; }
.copy--low      { left: 50%; bottom: clamp(2.4rem, 12vh, 7rem); translate: -50% 0; width: min(44rem, calc(100vw - var(--sc-gutter) * 2 - var(--rail))); text-align: center; }
.copy--sky      { left: 50%; top: clamp(5.6rem, 14.5vh, 9.5rem); translate: -50% 0; width: min(54rem, calc(100vw - var(--sc-gutter) * 2)); text-align: center; }
.copy--close    { left: calc(var(--sc-gutter) + var(--rail)); width: max-content; max-width: calc(100vw - var(--sc-gutter) * 2 - var(--rail)); bottom: clamp(4.2rem, 8vh, 5.4rem); }
.copy--legal { left: calc(var(--sc-gutter) + var(--rail)); right: var(--sc-gutter); bottom: clamp(0.8rem, 2.2vh, 1.4rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 2rem;
  padding-top: 0.85rem; border-top: 1px solid var(--sc-hairline);
  font: 600 0.7rem/1.4 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.copy--legal p { margin: 0; }
.copy--legal a { color: var(--sc-ink); text-decoration: none; transition: color 140ms var(--sc-ease-out); }
.copy--legal a:hover, .copy--legal a:focus-visible { color: var(--hot); }
.copy--close .hd { max-width: 17ch; font-size: clamp(1.2rem, 0.55rem + 2.3vw, 2.6rem); }
.close__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-top: 1.2rem; }
.contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; font-size: 0.95rem; color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-canvas)); }
.contact a { text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); transition: border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .contact a:hover { color: var(--sc-ink); border-color: var(--hot); } }

/* ---------------------------------------------------------------- the tape -- */
/* A construction tape, fixed to the left edge. Ticks every 12px like a ruler;
   six stamps (the stages); a marker whose reading is the height of the build.
   Everything is ink until the lights come on, then it goes warm with the house. */
.tape {
  --th: 100%;                                    /* JS keeps the pixel height in --tape-h */
  position: fixed; z-index: var(--sc-z-chrome);
  left: clamp(0.7rem, 2.2vw, 1.9rem);
  top: clamp(6rem, 19svh, 10rem); bottom: clamp(2.6rem, 11svh, 6rem);
  width: 4.2rem;
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
}
.tape > * { pointer-events: auto; }
.tape::before {                                   /* a scrim only where the labels sit */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -2.4rem -3.2rem -2.4rem -3rem;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 58%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 55%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.tape__ruler {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0.8rem;
  background:
    repeating-linear-gradient(to top, color-mix(in oklab, var(--sc-ink) 46%, transparent) 0 1px, transparent 1px 60px) 0 0 / 0.8rem 100% no-repeat,
    repeating-linear-gradient(to top, color-mix(in oklab, var(--sc-ink) 26%, transparent) 0 1px, transparent 1px 12px) 0 0 / 0.42rem 100% no-repeat;
  border-right: 1px solid color-mix(in oklab, var(--sc-ink) 28%, transparent);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tape__fill {
  position: absolute; left: 0.8rem; bottom: 0; top: 0; width: 2px; margin-left: -1px;
  background: var(--hot);
  transform-origin: 50% 100%;
  transform: scaleY(var(--tp, 0));
  will-change: transform;
}
.tape__stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.stop { position: absolute; left: 0; bottom: calc(var(--at, 0) * 100%); height: 0; width: 100%; }
.stop a {
  position: absolute; left: 0; top: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 2.75rem;                                   /* touch target */
  padding-right: 0.5rem;
  color: var(--sc-ink); text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 10px hsl(var(--sc-shadow-color) / 0.75);
  opacity: 0.56;
  transition: opacity 200ms var(--sc-ease-out);
}
.stop a::before {                                         /* the notch across the ruler */
  content: ""; width: 1.05rem; height: 2px; margin-left: 0; flex: none;
  background: currentColor;
}
.stop__name, .stop__cota { font-family: var(--sc-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; line-height: 1.4; }
.stop__cota { display: block; font-size: 0.58rem; opacity: 0.7; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.stop a { flex-wrap: nowrap; }
.stop__name { display: block; }
.stop a > .stop__name, .stop a > .stop__cota { grid-column: 2; }
.stop.is-past a { opacity: 0.86; }
.stop.is-current a { opacity: 1; }
.stop.is-near a { opacity: 0; }                           /* the marker's reading takes this spot */
.stop a:focus-visible { opacity: 1; outline: 2px solid var(--hot); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .stop a:hover { opacity: 1; } }

.tape__marker {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0;
  transform: translate3d(0, calc(var(--mk, 0) * -1px), 0);
  will-change: transform; pointer-events: none;
}
.tape__marker::before {                                   /* the level line across the ruler */
  content: ""; position: absolute; left: 0; top: -1px; width: 1.75rem; height: 2px;
  background: var(--hot);
}
.tape__marker::after {                                    /* a small chamfered tab, like the mark */
  content: ""; position: absolute; left: 1.75rem; top: -0.28rem; width: 0.56rem; height: 0.56rem;
  background: var(--hot); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.marker__label, .marker__read {
  position: absolute; left: 2.6rem; white-space: nowrap;
  font-family: var(--sc-font-display); text-transform: uppercase; font-weight: 700;
  color: var(--hot);
}
.marker__label { top: -1.45rem; font-size: 0.5rem; letter-spacing: 0.22em; opacity: 0.75; }
.marker__read  { top: -0.7rem;  font-size: 0.8rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- responsive -- */
@media (max-width: 860px) {
  :root { --rail: 2.9rem; }
  .tape { width: 2.4rem; left: 0.55rem; top: 6.2rem; bottom: 2.6rem; }
  .stop__name, .stop__cota { display: none; }
  .stop a { min-height: 2.75rem; min-width: 2.75rem; }
  .stop a::before { width: 0.7rem; }
  .marker__label { display: none; }
  .marker__read { left: 1.5rem; font-size: 0.66rem; top: -0.55rem; }
  .tape__marker::before { width: 1rem; }
  .tape__marker::after { left: 1rem; }
  .copy--lead, .copy--close { left: calc(var(--sc-gutter) + var(--rail)); }
  .copy--top-trail { max-width: min(20rem, 70vw); top: 6.4rem; }
  .copy--tl { top: 6.4rem; max-width: 70vw; }
  .copy--br { left: calc(var(--sc-gutter) + var(--rail)); right: var(--sc-gutter); max-width: none; text-align: left; bottom: clamp(2rem, 8vh, 4rem); }
  .copy--trail { left: calc(var(--sc-gutter) + var(--rail)); right: var(--sc-gutter); max-width: none; text-align: left; bottom: clamp(2rem, 8vh, 4rem); }
  .copy--trail .tx { margin-left: 0; }
  .copy--low { width: calc(100vw - var(--sc-gutter) - var(--rail) - var(--sc-gutter)); left: calc(var(--sc-gutter) + var(--rail)); translate: 0 0; text-align: left; bottom: clamp(2rem, 8vh, 4rem); }
  .copy--sky { top: 6.4rem; width: calc(100vw - var(--sc-gutter) * 2); }
  .copy--lead { bottom: clamp(2rem, 8vh, 4rem); }
  .copy--close { bottom: 4.6rem; }
  .copy--legal { font-size: 0.6rem; letter-spacing: 0.12em; gap: 0.2rem 1.4rem; bottom: 0.7rem; padding-top: 0.7rem; }
  .hd--hero { font-size: clamp(1.1rem, 0.2rem + 5.1vw, 2.2rem); }
  .hd--peak { font-size: clamp(1.5rem, 0.6rem + 5.4vw, 2.6rem); }
  .cta--bar { min-height: 2.5rem; padding: 0 1rem; font-size: 0.62rem; }
  .scrim--bl { width: 100%; height: 58%; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 26%, color-mix(in oklab, var(--sc-canvas) 38%, transparent) 62%, transparent 100%); }
  .scrim--br { display: none; }
  .scrim--top { height: 34%; }
}
/* phones: the contacts sit on one line, so the closing block stays short enough
   not to climb over the house on a 640px-tall screen */
@media (max-width: 860px) {
  .close__row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; margin-top: 1.1rem; }
  .close__row .cta { flex: 0 0 100%; justify-content: center; }
  .contact { font-size: 0.82rem; gap: 0.2rem 1.1rem; }
  .copy--close .hd { max-width: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .copy--close { bottom: 4.4rem; }
  .copy--lead { bottom: 1.2rem; }
  .cta { min-height: 2.6rem; }
}
@media (max-width: 420px) {
  .bar .cta--bar { padding: 0 0.8rem; letter-spacing: 0.12em; font-size: 0.58rem; }
}

/* ------------------------------------------------------------ swipe hint -- */
.swipe { display: none; }
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .swipe {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    position: fixed; z-index: var(--sc-z-chrome);
    right: 0.85rem; top: 52%; translate: 0 -50%;
    pointer-events: none; text-align: center;
    color: var(--sc-ink);
    text-shadow: 0 1px 10px hsl(var(--sc-shadow-color) / 0.8);
    transition: opacity 260ms var(--sc-ease-out), visibility 0s linear 0s;
  }
  .swipe.is-gone { opacity: 0; visibility: hidden; transition: opacity 200ms var(--sc-ease-out), visibility 0s linear 200ms; }
  .swipe__txt { font-family: var(--sc-font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; writing-mode: vertical-rl; white-space: nowrap; }
  .swipe__arrow { animation: swipe-nudge 1.7s var(--sc-ease-in-out) infinite; }
}
@keyframes swipe-nudge {
  0%, 100% { transform: translateY(-3px); opacity: 0.55; }
  50%      { transform: translateY(5px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .swipe__arrow { animation: none; } }

/* ---------------------------------------------------------- reduced motion -- */
/* No clip is ever fetched under reduced motion, so the posters are the film. The
   last leg's poster is its FIRST frame (house done, daylight); this still of the
   lit house fades in over it, driven by scroll (--endp), so the story still ends
   where it should. */
.end-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .end-poster { display: block; position: absolute; inset: 0; z-index: 1; opacity: var(--endp, 0); pointer-events: none; }
  .end-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .world-pan, .world-fg { transform: none !important; }
  .tape__marker, .tape__fill { transition: none; }
}