/* colorplan — shared hero layout.
   A tall .track drives a sticky 100svh .stage. The .bloom layer is
   technique-specific (filled by each demo); the .overlay (type, logotype,
   url) is identical everywhere so we compare bloom techniques fairly.
   Everything is driven by --p (0..1), set on .stage by shared/js/scroll.js. */

/* Scroll is fully locked: the document never scrolls. Wheel/touch/keys
   feed a virtual progress (see scroll.js) so the stage stays pinned. */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--paper);
}

.track { display: contents; }   /* no longer a scroll spacer */

.stage {
  position: fixed;
  inset: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--paper);
  --p: 0;
}

/* technique layer (svg / canvas / webgl / lottie) fills this */
.bloom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* vertical colorplan logotype, top-left */
.logotype {
  position: absolute;
  top: 5vmin;
  left: 5vmin;
  height: min(30vh, 300px);
  width: auto;
}

/* www.colorplan.com, bottom-right (it's a vertical lockup) */
.url {
  position: absolute;
  bottom: 5vmin;
  right: 5vmin;
  height: min(13vh, 150px);
  width: auto;
}

/* MADE FOR / MAKERS lockup — assembles as you scroll */
.lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 460px);
  /* locked in place — no translate. Only fades in as the bloom grows. */
  transform: translate(-50%, -50%);
  opacity: clamp(0, calc(var(--p) * 1.7 - 0.15), 1);
  will-change: opacity;
}

/* small scroll hint, fades out as the bloom starts */
.hint {
  position: absolute;
  left: 50%;
  bottom: 4vmin;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: clamp(0, calc(0.7 - var(--p) * 4), 0.7);
  z-index: 3;
}

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