:root {
  --max-frank-size: 1300px;
  --frank-size: min(var(--max-frank-size, 1300px), 165svw);
}

/* Reserve space for hero/parallax layers to reduce CLS */
/* 750x750 native image size */
.frank-layer.frank-background,
.frank-layer.frank-bottom,
.frank-layer.frank-top,
.frank-brain {
  height: var(--frank-size, 1300px);
  max-height: var(--frank-size, 1300px);
}

/* 750x1125 native image size */
.frank-layer.frank-bottom {
  height: calc(var(--frank-size, 1300px) * 1.5);
  max-height: calc(var(--frank-size, 1300px) * 1.5);
}

.frank-layer {
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: var(--frank-size);
  height: var(--frank-size);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain; /* width auto, height 100% */
  will-change: transform;
  transition: transform 180ms cubic-bezier(.22,.9,.25,1);
  pointer-events: none;
  position: fixed;
  left: 50%;
  top: calc(100svh - var(--frank-size));
  transform: translateX(-50%) translateY(0);
}

/* Make background and bottom fixed to the viewport bottom */
.frank-layer.frank-background {
  z-index: 900; /* back-most fixed layer */
  background-image: url('../images/optimized/FrankBackground/FrankBackground-quant.png');
  background-image: image-set(
    url('../images/optimized/FrankBackground/FrankBackground.avif') type('image/avif'),
    url('../images/optimized/FrankBackground/FrankBackground.webp') type('image/webp'),
    url('../images/optimized/FrankBackground/FrankBackground-quant.png') type('image/png')
  );
}

.frank-layer.frank-bottom {
  height: calc(var(--frank-size) * 1.5);
  background-image: url('../images/optimized/FrankBottom/FrankBottom-quant.png');
  background-image: image-set(
    url('../images/optimized/FrankBottom/FrankBottom.avif') type('image/avif'),
    url('../images/optimized/FrankBottom/FrankBottom.webp') type('image/webp'),
    url('../images/optimized/FrankBottom/FrankBottom-quant.png') type('image/png')
  );
  z-index: 1100; /* sits above belowfold but below the top-scrolling layer */
}

/* frank-top should scroll with document (keep it positioned in flow near content) */
.frank-layer.frank-top {
  background-image: url('../images/optimized/FrankTop/FrankTop-quant.png');
  background-image: image-set(
    url('../images/optimized/FrankTop/FrankTop.avif') type('image/avif'),
    url('../images/optimized/FrankTop/FrankTop.webp') type('image/webp'),
    url('../images/optimized/FrankTop/FrankTop-quant.png') type('image/png')
  );
  z-index: 1200; /* top-most fixed layer for parallax */
}

.frank-background { background-image: url('../images/FrankBackground.png'); }
 .frank-background {
  background-image: url('../images/optimized/FrankBackground/FrankBackground-quant.png');
  background-image: image-set(
    url('../images/optimized/FrankBackground/FrankBackground.avif') type('image/avif'),
    url('../images/optimized/FrankBackground/FrankBackground.webp') type('image/webp'),
    url('../images/optimized/FrankBackground/FrankBackground-quant.png') type('image/png')
  );
 }
/* .frank-brain styles intentionally removed: brain will be controlled by HTML/CSS authoring */
.frank-brain {
  /* border: 1px solid red; */
  /* Basic flow block that sits in document flow but can be offset if needed. */
  position: relative;
  display: block;
  margin: 0 auto;
  /* fill available column width but don't exceed configured frank size */
  box-sizing: border-box;
  width: var(--frank-size);
  height: var(--frank-size);
  left: 50%;
  margin-left: calc(var(--frank-size) * -0.5);
  margin-bottom: calc(var(--frank-size) * -0.15);
  /* position the brain so its top aligns to viewport bottom minus frank size
    (equivalent to calc(100vh - var(--frank-size))). This keeps the brain
    positioned using CSS only and updates automatically on resize. */
  /* Align the brain so its top matches the top of the frank hero at page top */
  margin-top: calc(100svh - var(--frank-size) * 0.9);
  /* keep the div sized by width and a square aspect ratio to match the
    original hero images; using aspect-ratio lets the element size itself
    correctly and avoids hard-coding a tall pixel height that can crop. */
  aspect-ratio: 1 / 1;
  height: auto;
  background-image: url('../images/optimized/FrankBrain/FrankBrain-quant.png');
  background-image: image-set(
    url('../images/optimized/FrankBrain/FrankBrain.avif') type('image/avif'),
    url('../images/optimized/FrankBrain/FrankBrain.webp') type('image/webp'),
    url('../images/optimized/FrankBrain/FrankBrain-quant.png') type('image/png')
  );
  background-position: center center;
  background-repeat: no-repeat;
  /* contain ensures the entire brain image is visible inside the box */
  background-size: contain;
  pointer-events: none;
}

/* Subtle initial offset so layers overlap nicely on small scrolls */
.frank-background, .frank-bottom, .frank-top {
   /* enforce identical starting position for all layers; no !important so JS can animate */
   transform: translateX(-50%) translateY(0);
}

/* Respect users who prefer reduced motion: disable transforms/transitions */
@media (prefers-reduced-motion: reduce) {
  .frank-layer {
    transition: none !important;
    will-change: auto !important;
    transform: none !important;
    position: static !important; /* fall back to document flow so content is immediately readable */
    width: 100% !important;
    height: auto !important;
  }
  #belowfold { z-index: 1000 !important; }
}

/* Place #belowfold between the fixed background and fixed bottom */
#belowfold { position: relative; z-index: 1000; }