/* Scroll-driven project background/art (JS). Handoff 2026-04-24. */

.project-background-stage-shell,
.project-background-stage {
  display: none;
}

html.has-project-sticky-scrub .projects-area {
  position: relative;
  isolation: isolate;
}

html.has-project-sticky-scrub .project-background-stage-shell {
  position: sticky;
  top: 0;
  z-index: 0;
  display: block;
  block-size: 100vh;
  margin-block-end: -100vh;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
}

@supports (block-size: 100svh) {
  html.has-project-sticky-scrub .project-background-stage-shell {
    block-size: 100svh;
    margin-block-end: -100svh;
  }
}

@supports (block-size: 100dvh) {
  html.has-project-sticky-scrub .project-background-stage-shell {
    block-size: 100dvh;
    margin-block-end: -100dvh;
  }
}

html.has-project-sticky-scrub .project-background-stage {
  position: relative;
  display: block;
  block-size: 100%;
  overflow: hidden;
  isolation: isolate;
}

html.has-project-sticky-scrub .project-background-layer--base,
html.has-project-sticky-scrub [data-bg-layer],
html.has-project-sticky-scrub .project-background-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: none;
}

html.has-project-sticky-scrub .project-background-layer--base {
  z-index: 0;
  background: var(--color-surface-page);
  opacity: 1;
}

html.has-project-sticky-scrub [data-bg-layer] {
  z-index: 1;
  opacity: 0;
}

html.has-project-sticky-scrub [data-bg-layer="prelude"] {
  background: var(--color-surface-page);
}

html.has-project-sticky-scrub [data-bg-layer="featured"] {
  background: var(--color-surface-featured);
}

html.has-project-sticky-scrub [data-bg-layer="madebymad"] {
  background: var(--color-surface-made-by-mad);
}

html.has-project-sticky-scrub [data-bg-layer="odds"] {
  background: var(--color-surface-odds-ends);
}

html.has-project-sticky-scrub [data-bg-layer="curves"] {
  background: var(--color-surface-in-curves);
}

html.has-project-sticky-scrub .project-background-art {
  z-index: 2;
  opacity: 0;
  --project-art-blur: 32px;
}

html.has-project-sticky-scrub .project-background-art__inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

html.has-project-sticky-scrub .project-background-art img,
html.has-project-sticky-scrub .project-background-art--odds .humans-shader-slot {
  filter: blur(var(--project-art-blur));
}

html.has-project-sticky-scrub .project-background-art--featured img {
  inline-size: 100%;
  max-inline-size: none;
  block-size: auto;
}

html.has-project-sticky-scrub .project-background-art--odds .humans-shader-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

html.has-project-sticky-scrub .project-background-art--odds canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
}

html.has-project-sticky-scrub .project-background-art--curves img {
  position: absolute;

  /* Match .section--curves .section-header__art img (Figma 1301:5915, frame 390) */
  --in-curves-mobile-frame: 390;

  inline-size: min(2185px, calc(100vw * 2185 / var(--in-curves-mobile-frame)));
  max-inline-size: none;
  block-size: auto;
  aspect-ratio: 2185 / 1448;
  object-fit: cover;
  object-position: 50% 50%;
  inset: auto;
  left: calc(100% + 100vw * 147.5 / var(--in-curves-mobile-frame));
  top: calc(50% - 100vw * 189 / var(--in-curves-mobile-frame));
  transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
  /* Figma 1301:5883 — mobile frame 390×852; Bike 484×359, object-cover; center at 50% + 369.5px (852-tall frame). */
  html.has-project-sticky-scrub .project-background-art--madebymad img {
    position: absolute;
    inset: auto;
    left: 50%;
    top: calc(50% + 100svh * 369.5 / 852);
    transform: translate(-50%, -50%);
    inline-size: min(484px, calc(100vw * 484 / 390));
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 484 / 359;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* Match stage height: dvh tracks Safari toolbar; keeps Figma 390×852 proportion on dynamic viewport. */
  @supports (min-height: 100dvh) {
    html.has-project-sticky-scrub .project-background-art--madebymad img {
      top: calc(50% + 100dvh * 369.5 / 852);
    }
  }
}

@media (min-width: 1024px) {
  /* Match in-section art framing (Figma 1512 frame). */
  html.has-project-sticky-scrub .project-background-art--madebymad img {
    --madebymad-frame: 1512;

    position: absolute;
    inline-size: min(1428px, calc(100vw * 1428 / var(--madebymad-frame)));
    max-inline-size: none;
    block-size: auto;
    object-fit: cover;
    inset: auto;
    left: 50%;
    top: calc(100vw * 325 / var(--madebymad-frame));
    transform: translateX(-50%);
  }

  html.has-project-sticky-scrub .project-background-art--curves img {
    --in-curves-frame: 1512;

    position: absolute;
    inline-size: min(2185px, calc(100vw * 2185 / var(--in-curves-frame)));
    max-inline-size: none;
    block-size: auto;
    object-fit: cover;
    inset: auto;
    left: calc(54.17% + 100vw * 10.5 / var(--in-curves-frame));
    top: calc(50% - 100vw * 117.25 / var(--in-curves-frame));
    transform: translate(-50%, -50%);
  }
}

html.has-project-sticky-scrub [data-color-ref] {
  background: var(--color-surface-page, var(--color-white));
}

html.has-project-sticky-scrub .section--prelude-color-ref {
  background: var(--color-surface-page);
  --section-accent: var(--color-text-primary);
  --section-text: var(--color-text-primary);
  --section-meta: var(--color-text-muted);
}

html.has-project-sticky-scrub .project-color-refs {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

html.has-project-sticky-scrub .projects-area [data-project] {
  position: relative;
  z-index: 1;
  padding-block: 0;
  background: transparent;
}

html.has-project-sticky-scrub .projects-area .section-header {
  position: sticky;
  inset-block-start: 0;
  min-block-size: 100vh;
}

@supports (min-block-size: 100svh) {
  html.has-project-sticky-scrub .projects-area .section-header {
    min-block-size: 100svh;
  }
}

@supports (min-block-size: 100dvh) {
  html.has-project-sticky-scrub .projects-area .section-header {
    min-block-size: 100dvh;
  }
}

html.has-project-sticky-scrub .projects-area [data-project] .section-header__art {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

html.has-project-sticky-scrub [data-project="odds"] .section--odds__shader {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

html.has-project-sticky-scrub.is-project-stage-detached .project-background-stage-shell {
  opacity: 0;
}

html.has-project-sticky-scrub.is-project-stage-detached .projects-area [data-project="curves"] {
  background: var(--color-surface-in-curves);
}

html.has-project-sticky-scrub.is-project-stage-detached .projects-area [data-project="curves"] .section-header__art {
  opacity: 1;
}

html.has-project-sticky-scrub.is-project-stage-detached .projects-area [data-project="curves"] .section-header__art img {
  filter: none;
}