/* Amrita — Locus (the mapping sequence) · owned by js/locus.js
   Frameless: no card, no border. The stage holds the screen while the section scrolls past (a scroll length of
   about five screens), and the picture fades into the page at every edge over a soft slate pool. */

.locus {
  --lc-ink: #fff;
  --lc-ink-2: rgba(255, 255, 255, .8);
  --lc-ink-3: rgba(255, 255, 255, .56);
  --lc-warm: #fff3e0;
  --lc-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --lc-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --lc-pool: 46, 51, 62;
  position: relative;
  width: 100%;
  height: 560vh; height: 560svh;          /* the scroll length of the sequence; the stage is sticky inside it */
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 860px) { .locus { height: 500vh; height: 500svh; } }
/* reduced motion: one screen, the stages are stills chosen with the picker */
.locus.is-static { height: auto; }
@media (prefers-reduced-motion: reduce) { .locus { height: auto; } }

.locus__stage {
  position: sticky; top: 0;
  width: 100%; height: 100vh; height: 100svh;
  overflow: hidden; isolation: isolate;
}
.locus.is-static .locus__stage { position: relative; height: min(100svh, 900px); min-height: 520px; }
/* the pool: a deep slate light-well that fades to nothing before the edges. Its strength (--lc-form, set by
   js/locus.js) follows how far the place has formed: faint behind the bare shot, full from the scan on. */
.locus__stage::before {
  content: ""; position: absolute; inset: -10% -6%; z-index: 0; pointer-events: none;
  opacity: var(--lc-form, 1);
  background:
    radial-gradient(ellipse 66% 58% at 50% 54%, rgba(var(--lc-pool), .8) 0%, rgba(var(--lc-pool), .66) 30%, rgba(var(--lc-pool), .42) 55%, rgba(var(--lc-pool), .14) 78%, rgba(var(--lc-pool), 0) 100%);
}
@media (max-width: 860px) {
  .locus__stage::before { background: radial-gradient(ellipse 80% 48% at 50% 54%, rgba(var(--lc-pool), .84) 0%, rgba(var(--lc-pool), .66) 44%, rgba(var(--lc-pool), .3) 70%, rgba(var(--lc-pool), 0) 90%); }
}

.locus__canvas {
  /* --lc-top (set by js/locus.js) is a top band kept clear for the readout on a portrait stage; 0 elsewhere */
  position: absolute; left: 0; top: var(--lc-top, 0px); z-index: 1; width: 100%; height: calc(100% - var(--lc-top, 0px)); display: block;
  touch-action: pan-y;                    /* a sideways finger orbits; vertical scrolls the page */
  cursor: grab;
  opacity: 0; transition: opacity 1.2s var(--ease-out, ease);
  /* the picture dissolves into the page at every edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.locus__stage.is-ready .locus__canvas { opacity: 1; }
.locus__stage.is-dragging .locus__canvas { cursor: grabbing; }

/* ---------- the readout ---------- */
.locus__hud {
  position: absolute; z-index: 3; pointer-events: none;
  left: max(var(--gutter, 24px), env(safe-area-inset-left, 0px));
  top: calc(var(--head-h, 76px) + 28px);
  max-width: min(30em, calc(100% - 2 * var(--gutter, 24px)));
}
.locus__kicker {
  margin: 0; display: flex; align-items: baseline; gap: 0 10px; flex-wrap: wrap;
  font-family: var(--lc-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 0 3px rgba(var(--lc-pool), .5), 0 0 14px rgba(var(--lc-pool), .75);
}
.locus__brand { color: #fff; }
.locus__dot { color: var(--lc-ink-3); }
.locus__stage-name { color: var(--lc-warm); }
.locus__count { color: var(--lc-ink-2); margin-left: 6px; letter-spacing: .1em; }
.locus__line {
  margin: 12px 0 0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; color: var(--lc-ink);
  text-shadow: 0 1px 2px rgba(var(--lc-pool), .45), 0 0 22px rgba(var(--lc-pool), .7);
  min-height: 3em;
}

/* ---------- the stage picker (it scrolls to a stage; under reduced motion it switches the still) ---------- */
.locus__steps {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: max(26px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(var(--lc-pool), .42); border: 0;           /* frameless: a soft fill, no outline */
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  max-width: calc(100% - 2 * var(--gutter, 16px));
}
.locus__step {
  appearance: none; border: 0; background: transparent; color: var(--lc-ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  font-family: var(--lc-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.locus__step-n { color: var(--lc-ink-3); font-size: 11px; }
.locus__step:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.locus__step.is-on { background: rgba(255, 255, 255, .92); color: #2c303a; }
.locus__step.is-on .locus__step-n { color: rgba(44, 48, 58, .6); }
@media (max-width: 860px) {
  .locus__step { padding: 0 10px; min-height: 44px; }
  .locus__step-name { display: none; }
  .locus__step.is-on .locus__step-name { display: inline; }
}

/* ---------- the previz view: an invisible placement box; js/locus.js draws the previz camera's view into it with
   feathered edges that dissolve into the pool. No border, no outline, no shadow: nothing frames it. ---------- */
.locus__inset {
  position: absolute; z-index: 2; pointer-events: none;
  right: calc(max(var(--gutter, 24px), env(safe-area-inset-right, 0px)) + 4vw);
  bottom: 120px;
  width: clamp(180px, 22vw, 340px); aspect-ratio: 16 / 9;
  opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s var(--ease-out, ease);
}
.locus__inset.is-on { opacity: 1; transform: none; }
.locus__inset-label {
  position: absolute; left: 9%; bottom: calc(100% - 6px); white-space: nowrap;
  font-family: var(--lc-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lc-warm);
  text-shadow: 0 0 3px rgba(var(--lc-pool), .6), 0 0 12px rgba(var(--lc-pool), .8);
}
@media (max-width: 860px) {
  /* clear of the picker by 24 px or more: the picker is 54 px tall at its own bottom offset */
  .locus__inset { right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(max(26px, env(safe-area-inset-bottom, 0px) + 18px) + 80px); width: min(58vw, 250px); }
  /* phones: the label sits under the view, in the faded band above the picker, never over the point cloud */
  .locus__inset-label { left: auto; right: 9%; bottom: auto; top: calc(100% + 4px); }
}

.locus__hint, .locus__status {
  position: absolute; z-index: 3; margin: 0; pointer-events: none;
  font-family: var(--lc-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lc-ink-3);
}
.locus__hint { right: max(var(--gutter, 24px), env(safe-area-inset-right, 0px)); top: calc(var(--head-h, 76px) + 30px); transition: opacity .6s; }
.locus__stage:not(.is-ready) .locus__hint, .locus__stage.was-dragged .locus__hint { opacity: 0; }
.locus__status { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.locus__status:empty { display: none; }
@media (max-width: 860px) { .locus__hint { display: none; } }
@media (hover: none) { .locus__hint { display: none; } }