/* Lumafield platform model — scroll-driven layer-reveal module */

@font-face {
  font-family: "Monument Grotesk";
  src: url("fonts/MonumentGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monument Grotesk";
  src: url("fonts/MonumentGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Monument Grotesk Semi-Mono";
  src: url("fonts/MonumentGroteskSemiMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

#lf-platform-module {
  /* Scroll distance devoted to each of the four layers. Total pinned scroll =
     4 × this. Raise for a slower, more deliberate reveal. */
  --lfpm-stage: 75vh;
  /* The pinned card's offset from the viewport top. */
  --lfpm-pin-top: 7vh;
  display: block;
  width: 100%;
  font-family: "Monument Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #fff;
}

/* The track reserves the full pinned scroll length (JS sizes it to
   pin-length + max card height + the adopted next section on desktop). The
   module ADOPTS the page's next section into the sticky, directly below the
   card: the browser itself keeps it glued there (no scroll-synced JS, which
   loses the race against compositor-thread wheel scrolling), the card's
   growth pushes it down through normal layout, and when the pin ends the
   sticky rests at the track bottom, leaving the section exactly in flow. */
.lfpm-track {
  position: relative;
  overflow-anchor: none;
}

.lfpm-sticky {
  position: sticky;
  top: var(--lfpm-pin-top);
  /* height: auto — wraps the card exactly */
}

/* The visible module box. JS sets its height from the revealed stack: it
   starts just taller than the capture layer + its paragraphs and grows by
   each layer's band as that layer appears (smoothed by a JS chase — no CSS
   transition, so the track height can stay exactly in sync). */
.lfpm-card {
  position: relative;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.lfpm-viewport {
  max-width: 1350px;
  height: 100%;
  margin: 0 auto;
  padding: 56px 48px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end; /* stack + rail bottom-anchor: the card's top edge
                            rises to admit each new layer */
  gap: 56px;
}

/* ---- Artwork stack (left) ---- */

.lfpm-stack-col {
  flex: 1 1 54%;
  align-self: stretch;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lfpm-stack {
  position: relative; /* JS sets explicit width/height from the art's aspect */
}

.lfpm-stack > svg {
  display: block;
  width: 100%;
  height: 100%;
  /* the reveal's rise-transform swings layers below the canvas edge;
     don't let the svg viewport clip them (the card still crops) */
  overflow: visible;
}

/* The reveal drives opacity/transform on these groups every frame. */
.lfpm-stack #capture,
.lfpm-stack #fixed-ground-plane,
.lfpm-stack #analyze,
.lfpm-stack #decide,
.lfpm-stack #control {
  will-change: opacity, transform;
}

/* Shown when the SVG fails to load (e.g. opened via file://). */
.lfpm-error {
  position: absolute;
  inset: 40% 10% auto;
  text-align: center;
  font-family: "Monument Grotesk Semi-Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Text rail (right) ---- */

.lfpm-rail {
  flex: 1 1 46%;
  position: relative;
  height: var(--lfpm-stack-h, 100%);
  min-width: 0;
}

.lfpm-panel {
  position: absolute;
  left: 0;
  top: var(--lfpm-anchor, 50%);
  transform: translateY(calc(-50% + var(--lfpm-rise, 0px)));
  max-width: 420px;
  opacity: 0;
  will-change: opacity, transform;
}

.lfpm-kicker {
  font-family: "Monument Grotesk Semi-Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd23f;
  margin-bottom: 14px;
}

.lfpm-panel p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
}
.lfpm-panel p + p { margin-top: 0.85em; }

/* ---- Scroll hint ---- */

.lfpm-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  font-family: "Monument Grotesk Semi-Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.lfpm-hint-arrow {
  display: inline-block;
  margin-left: 8px;
  animation: lfpm-bob 1.6s ease-in-out infinite;
}
@keyframes lfpm-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ---- Narrow screens: artwork above, text below ---- */

@media (max-width: 759px) {
  #lf-platform-module {
    --lfpm-pin-top: 3dvh;
  }
  .lfpm-viewport {
    flex-direction: column;
    justify-content: center;
    align-items: center; /* undo the desktop bottom-anchor (row axis flips) */
    gap: 24px;
    padding: 24px 20px 32px;
  }
  /* Column layout: growth is applied to this column's height (JS) with the
     artwork bottom-anchored inside, so upper layers reveal as it grows and
     the card sizes naturally around column + text. */
  .lfpm-stack-col {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    overflow: hidden;
  }
  .lfpm-rail {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 190px;
  }
  .lfpm-panel {
    top: 0;
    transform: translateY(var(--lfpm-rise, 0px));
    max-width: none;
  }
  .lfpm-panel p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .lfpm-hint-arrow { animation: none; }
}