/* ammtech.au: the whole rebrand is six colours and two faces. Everything
   else derives from scrollcraft.css. Nothing here restyles a device.       */

:root {
  --sc-canvas:      #07090F;   /* near-black with a blue-cool bias, never #000 */
  --sc-surface:     #0E1220;
  --sc-ink:         #EEF2FA;
  --sc-ink-soft:    #9AA6BE;   /* tinted from the blue, not flat grey */
  --sc-accent:      #2C4CFE;   /* the wordmark blue. ONE accent. */
  --sc-accent-ink:  #FFFFFF;

  --sc-font-display: "Archivo", "Archivo Black", system-ui, sans-serif;
  --sc-font-text:    "Geist", "Inter", system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --sc-shadow-color: 228 60% 3%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 12px;

  /* The brand gradient. Referenced by the rendered world only; it never
     paints text or a page ground. Declared here so the page has one source. */
  --brand-a: #009FFC;
  --brand-b: #5400FF;
}

/* Light-on-dark type needs a touch more weight, leading and tracking than
   the same face on paper, or it reads thin. */
.sc-display { font-weight: 800; letter-spacing: -0.03em; }
.sc-display--xl { line-height: 0.96; }
.sc-display--lg { line-height: 1.0; }
.sc-display--md { font-weight: 700; }
.sc-lede { color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-ink-soft)); font-weight: 400; line-height: 1.5; max-width: 42ch; }
body { letter-spacing: 0; }

/* ------------------------------------------------------------- the world */
.world {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Above the poster legs (the engine stacks those at 100 to 120). When the
     renderer cannot run the script removes this element and the legs show. */
  z-index: 200;
  display: block;
}

/* Corner-free scrim: density only in the bottom third where copy lives, and
   lighter than the stock band so the world keeps its blacks. A sibling of the
   copy, never a child, so the contrast pass can measure it. */
.scrim {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 64%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 24%, transparent) 42%,
    transparent 62%);
}

/* ------------------------------------------------------------------ copy */
:root { --rail-col: 9rem; }   /* the map's column; lead copy starts past it */
.copy { display: grid; gap: var(--sc-5); }
.copy .sc-display + .sc-lede { margin-top: 0; }
.sc-copy--lead  { bottom: clamp(3.5rem, 13vh, 10rem); left: calc(var(--sc-gutter) + var(--rail-col)); }
.sc-copy--trail { bottom: clamp(3.5rem, 13vh, 10rem); }
.sc-copy--trail .sc-lede { margin-inline-start: auto; }

/* Two lines of display, not three: one rung down from xl, a wider block. */
.copy--hero { max-width: min(52rem, 74vw); }
.copy--hero .sc-display--lg { font-size: var(--sc-t-3xl); }

/* The peak copy sits low and left so the mark, centred, is never covered. */
.copy--peak { max-width: min(40rem, 60vw); }

/* Arrival: standing in the room beneath the mark. The CTA is the object. */
.copy--arrival {
  top: auto; translate: -50% 0;
  bottom: clamp(2.5rem, 9vh, 7rem);
  max-width: min(38rem, 84vw);
  gap: var(--sc-4);
  align-items: center; justify-items: center;
}
.copy--arrival .sc-lede { text-align: center; }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--sc-3);
  padding: 0.95rem 1.6rem;
  min-height: 3.25rem;
  font-family: var(--sc-font-display);
  font-weight: 700; font-size: var(--sc-t-base); letter-spacing: -0.01em;
  color: var(--sc-accent-ink);
  background: var(--sc-accent);
  border-radius: var(--sc-r-md);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: background-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.cta:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); box-shadow: var(--sc-e3), var(--sc-edge); }
.cta:active { transform: translateY(1px); box-shadow: var(--sc-e1); }
.cta:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }

.fine {
  margin: var(--sc-4) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.3rem 1.1rem;
  font-size: var(--sc-t-xs); letter-spacing: 0.04em;
  color: var(--sc-ink-soft);
}
.fine a { color: var(--sc-ink); text-decoration: none; }
.fine a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- chrome */
.chrome {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--sc-z-chrome);
  padding: clamp(1rem, 2.4vw, 1.75rem) var(--sc-gutter);
  pointer-events: none;
}
.brand { display: inline-block; pointer-events: auto; }
.brand img { width: clamp(7.5rem, 12vw, 10.5rem); height: auto; }
.brand:focus-visible { outline-offset: 6px; }

/* The map. A vertical route on the left edge, slanted like the logo's
   traces, with a bead that rides the track and a tick per waypoint.  */
.map {
  position: fixed; z-index: var(--sc-z-chrome);
  left: var(--sc-gutter); top: 50%;
  translate: 0 -50%;
  height: min(46vh, 26rem);
  width: 1px;
  --pr: 0;
}
.map::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in oklab, var(--sc-ink) 18%, transparent);
}
.map__legs { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.map__legs li { position: absolute; left: 0; top: calc(var(--at, 0) * 100%); }
.map__leg {
  position: relative;
  display: block;
  appearance: none; background: none; border: 0;
  padding: 0.4rem 0 0.4rem 1.15rem;
  margin: -0.4rem 0 0 -0.32rem;
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.55;
  transition: opacity 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.map__leg::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0.62rem; height: 1px;
  background: currentColor;
  translate: 0 -50%;
  transform: rotate(-28deg); transform-origin: 0 50%;
}
.map__leg:hover, .map__leg:focus-visible { opacity: 1; color: var(--sc-ink); }
.map__leg[aria-current] { opacity: 1; color: var(--sc-ink); }
.map__leg--quiet { padding-left: 0.8rem; }
.map__leg--quiet::before { width: 0.4rem; }
.map__bead {
  position: absolute; left: 50%; top: calc(var(--pr, 0) * 100%);
  width: 7px; height: 7px; border-radius: 50%;
  translate: -50% -50%;
  background: var(--sc-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 28%, transparent);
  will-change: top;
}

/* ------------------------------------------------------- poster capture */
/* ?poster=1 puts the page in a capture state: the scene alone, at a pinned
   position. Everything that is not the world is hidden. */
.is-poster .chrome, .is-poster .map, .is-poster [data-sc-world-copy], .is-poster .sc-grain { display: none !important; }

/* ------------------------------------------------------------------ nojs */
.nojs {
  position: relative; z-index: 100;
  padding: var(--sc-section) var(--sc-gutter);
  max-width: var(--sc-measure);
  margin-inline: auto;
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  /* The hero display floors at 3.4rem on desktop, which wraps a phone to six
     lines. One rung down. */
  .sc-display--xl { font-size: var(--sc-t-2xl); }
  .sc-display--lg { font-size: var(--sc-t-xl); }
  .sc-display--md { font-size: var(--sc-t-lg); }
  .sc-lede { font-size: var(--sc-t-base); max-width: none; }
  .sc-copy--lead, .sc-copy--trail { bottom: clamp(4.5rem, 12vh, 7rem); left: var(--sc-gutter); }
  .copy--hero { max-width: none; }
  .copy--hero .sc-display--lg { font-size: var(--sc-t-2xl); }
  .copy--peak { max-width: none; }
  .copy--arrival { max-width: none; inset-inline: var(--sc-gutter); left: auto; translate: 0 0; }
  .cta { width: 100%; }
  .brand img { width: 6.6rem; }
  .map { left: 0.9rem; top: 19vh; translate: 0 0; height: 26vh; }
  .map__leg { font-size: 0.6rem; padding-left: 0.95rem; }
  .map__leg:not([aria-current]) { color: transparent; }
  .map__leg:not([aria-current])::before { color: var(--sc-ink-soft); }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .map__bead { transition: none; }
}