/* ==========================================================================
   Home: the hero scroll. js/field.js draws the documents on .lg-field behind
   the copy; each band carries a pool of background so its text sits on clean ground.
   ========================================================================== */

body.home { overflow-x: clip; }

/* ---------- The field ---------- */
.lg-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- The produce folder, after the app's FolderIcon. The back sits
   behind the field and the flap in front of it, so strips drop between them.
   js/field.js sets --drop (how far below its seat it is) and --open (the flap). ---------- */
.lg-folder {
  position: fixed;
  top: 75%;
  left: 0;
  right: 0;
  width: 188px;
  height: 160px;
  margin-inline: auto;
  pointer-events: none;
  transform: translateY(var(--drop, calc(25vh + 100%)));
}
.lg-folder-back { z-index: -1; }
.lg-folder-front { z-index: 1; }

.lg-folder-back::before,
.lg-folder-back::after,
.lg-folder-flap {
  position: absolute;
  border-radius: 5%;
}
.lg-folder-back::before,
.lg-folder-back::after { content: ""; }

/* Back wall of the body. */
.lg-folder-back::before {
  width: 100%;
  height: 85%;
  bottom: 0;
  background: var(--texture), linear-gradient(var(--palette-neutral-400), var(--palette-neutral-500));
}

/* Tab at the top-left, behind the flap. It only reaches just past the top of
   the back wall, so its edge never shows across the wall. */
.lg-folder-back::after {
  top: 0;
  left: 0;
  width: 40%;
  height: 20%;
  background: var(--texture), var(--palette-neutral-400);
  border-radius: 10%;
}

/* Front flap that rotates open, carrying the lock icon with it. */
.lg-folder-flap {
  width: 100%;
  height: 80%;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transform-origin: 0 100% 0;
  transform: perspective(1200px) rotateX(calc(var(--open, 0) * -40deg)) skew(calc(var(--open, 0) * -10deg), 0deg);
  background: var(--texture), linear-gradient(var(--palette-neutral-200), var(--palette-neutral-400));
}

@media (max-width: 640px) {
  .lg-folder { width: 160px; height: 120px; }
  .lg-folder-flap svg { width: 32px; height: 32px; }
}

.lg-wrap {
  position: relative;
  z-index: 1;
}
body.home .footer {
  position: relative;
  z-index: 1;
}

/* ---------- Nav: the hero carries the logo and actions, so with JS the bar
   stays hidden until the details, then pins to the top. ---------- */
body.home .nav {
  position: relative;
  z-index: 2;
  border-bottom-color: var(--line);
}
.lg-motion body.home .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 300ms ease, visibility 0s linear 300ms;
}
.lg-motion body.home .nav.lg-nav-on {
  transform: none;
  visibility: visible;
  transition: transform 300ms ease, visibility 0s;
}
/* ---------- Bands: each is one screen tall, its content one centred column ---------- */
.lg-band {
  max-width: 860px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.lg-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-inline: 34px;
}
/* With JS, each band's content is pinned mid-screen and js/field.js fades it
   in and out with scroll, so the copy changes in place like slides. */
body.lg-slides .lg-content {
  position: fixed;
  inset: 0;
  max-width: 860px;
  height: fit-content;
  margin: auto;
}

body.home h1 {
  font-size: clamp(42px, 7vw, 83px);
  line-height: 1;
  letter-spacing: -1.5px;
}
body.home h1 .line { display: block; }

.lg-logo { display: block; width: 157px; height: auto; margin: 0 auto 32px; }

.lg-scroll,
.lg-skip {
  display: flex;
  padding: 8px 14px;
  color: var(--ink);
}
.lg-scroll-bob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.lg-scroll-word {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Skip: the scroll cue's look, pinned bottom right. It jumps to the features
   like the nav's links, and fades away once the details are reached. */
.lg-skip {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: opacity 300ms ease;
}
.lg-skip.lg-skip-off {
  opacity: 0;
  pointer-events: none;
}

.lg-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: clamp(36px, 9vw, 72px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--ink);
}

/* The split-flap counter (js/field.js builds it): white cards lit from above,
   each split by a fine seam, with the commas and plus as plain marks. */
.lg-flaps {
  display: flex;
  align-items: flex-end;
  gap: .1em;
  letter-spacing: 0;
}
.lg-card {
  position: relative;
  contain: layout style;
  width: .75em;
  height: 1.25em;
  border-radius: .08em;
  perspective: 4em;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 10%, transparent),
    0 .1em .25em color-mix(in srgb, var(--black) 10%, transparent);
}
.lg-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -.5px;
  background: color-mix(in srgb, var(--black) 20%, transparent);
}
.lg-half {
  position: absolute;
  contain: strict;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.lg-half > span {
  display: block;
  height: 200%;
  line-height: 1.25em;
  text-align: center;
}
.lg-top {
  top: 0;
  border-radius: .08em .08em 0 0;
  transform-origin: 50% 100%;
  background: linear-gradient(var(--white), var(--neutral-50));
}
.lg-bottom {
  bottom: 0;
  border-radius: 0 0 .08em .08em;
  transform-origin: 50% 0;
  background: linear-gradient(var(--neutral-100), var(--white));
}
.lg-bottom > span { margin-top: -.625em; }
.lg-flap { will-change: transform; }

.lg-mark { line-height: 1.25em; }
.lg-mark[hidden] { display: block; visibility: hidden; }

/* The board's label plate, in tracked caps. Its trailing tracking is trimmed
   so the text stays centred. */
.lg-count .lg-of {
  font-size: max(11px, .19em);
  font-weight: 500;
  letter-spacing: .24em;
  margin-right: -.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--faint);
}

.lg-band h2 {
  font-size: clamp(34px, 5vw, 59px);
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.lg-body {
  max-width: 600px;
  margin: 0 auto;
  font-size: 18px;
  color: var(--muted);
}

/* ---------- Lens: an empty slot in the review band; js/field.js draws
   the magnifying glass on the field, centred on it ---------- */
.lg-lens { height: 240px; }

/* ---------- Background pool: sized from each band's copy, so it sits under
   the text the same way in every band, whatever else the band holds. It is
   the page's own textured ground, faded out at the edges by a mask, so it
   blends into the page around it. ---------- */
.lg-copy { 
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lg-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -120px -160px;
  pointer-events: none;
  background: var(--texture), var(--app-background);
  mask-image: radial-gradient(closest-side, var(--ink) 50%, transparent);
}

@media (max-width: 640px) {
  .lg-content { padding-inline: 22px; }
  .lg-lens { height: 120px; }
}

/* ---------- Page load: the curtain (main.css) lifts once the fonts are in and
   the field has drawn, so the strips and the hero appear together. ---------- */
body.home .page-curtain { transition-duration: 600ms; }

/* The scroll cue's word and chevron bob together. */
@keyframes lg-bob {
  0%, 100% { transform: none; }
  50% { transform: translateY(5px); }
}
.lg-motion body.home .lg-scroll-bob {
  animation: lg-bob 2400ms ease-in-out 600ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lg-motion body.home .lg-scroll-bob { animation: none; }
  .lg-motion body.home .nav { transition: none; }
}