/* Image to Background (Zoom), Osmo: after the services, a creator's product video grows from a circle under the
   headline to fill the screen as the section scrolls, then holds behind three lines under an ink veil while they
   scroll past, and the closing call slides up over it. The recipe's values in the house type and colours; the start
   stays the recipe's circle, opening to the square full frame (Josh, 2026-09-25: "a circle that expands like the
   OG"). The demo's play badge and product name are left out, the clip plays on its own.
   Viewport units are svh / lvh instead of dvh, so a phone's toolbar never reflows the section mid-scroll.
   Motion: zoom.js. */
.background-zoom, .background-zoom-after {
  --ink: #24363f;
  --ink-48: color-mix(in srgb, var(--ink) 48%, transparent);
  position: relative;
  z-index: 25;                               /* in the page flow over the fixed hero, like the other sections */
  font-size: clamp(14px, 1.111vw, 18px);     /* the recipe sizes everything in em */
}

.background-zoom {
  color: var(--ink);
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(50svh - 15em);
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  overflow: clip;
}

.background-zoom__h {
  text-align: center;
  letter-spacing: -.045em;
  max-width: 10em;
  margin-top: 0;
  margin-bottom: -.375em;
  font-family: 'Archivo Black', 'Arial Black', 'Archivo', sans-serif;
  font-size: 6em;
  font-weight: 400;
  line-height: .95;
  text-wrap: balance;
}

.background-zoom__h.is--margin-top {
  margin-top: 33svh;
}

.background-zoom__h1-span {
  color: var(--ink-48);
}

.background-zoom__start {
  aspect-ratio: 1;
  border-radius: 16em;
  width: 16em;
  position: relative;
}

.background-zoom__content {
  border-radius: inherit;
  will-change: width, height, transform;
  background-color: var(--ink);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  overflow: hidden;
}

.background-zoom__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.background-zoom__dark {
  opacity: 0;
  background-color: var(--ink);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.background-zoom__end {
  width: 100vw;
  height: 100lvh;                            /* covers the screen with or without the phone toolbar */
}

.background-zoom__text {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  align-items: center;
  width: 100%;
  padding-bottom: calc(50svh - 12em);
  display: flex;
  position: relative;
  color: #fff;                               /* over the clip and its ink veil */
}

.background-zoom-after {
  color: var(--ink);
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 2.5em;
  width: 100%;
  min-height: 100svh;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
}
.background-zoom-after .background-zoom__h { margin-bottom: 0; }

/* three of the homepage's product cut-outs around the call, behind it; zoom.js pops them in on scroll */
.background-zoom-after > :not(.bz-pop) { position: relative; z-index: 1; }
.bz-pop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  rotate: var(--r);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
[data-pop="gummies"]  { --x: 11%; --y: 16%; --w: clamp(110px, 11vw, 190px); --r: -8deg; }
[data-pop="serum"]    { --x: 79%; --y: 12%; --w: clamp(46px, 4.4vw, 76px);  --r: 9deg; }
[data-pop="lipstick"] { --x: 67%; --y: 60%; --w: clamp(170px, 17vw, 290px); --r: 12deg; }

/* the house ink button (ugc-style) */
.background-zoom-after__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  background: var(--ink);
  color: #fff;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.background-zoom-after__cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .background-zoom-after__cta:hover { background: var(--pop-pink, #ff2fd6); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
}
.background-zoom-after__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media screen and (max-width: 767px) {
  .background-zoom__h {
    font-size: 3.75em;
  }
  /* the creator stands left of centre in the landscape clip: keep her in the tall crop */
  .background-zoom__img { object-position: 35% 50%; }
  .background-zoom-after__cta { font-size: 16px; }
  /* phones: the call takes the width, so the products sit above and below it */
  [data-pop="gummies"]  { --x: 6%;  --y: 9%;  --w: 25vw; }
  [data-pop="serum"]    { --x: 80%; --y: 8%;  --w: 10vw; }
  [data-pop="lipstick"] { --x: 28%; --y: 70%; --w: 44vw; }
}

/* reduced motion: no zoom. The clip sits full-bleed under the headline, the lines follow in ink on white, and it
   shows its poster instead of playing (zoom.js) */
@media (prefers-reduced-motion: reduce) {
  .background-zoom__start { width: 100vw; aspect-ratio: auto; height: 100svh; margin-top: 2em; border-radius: 0; }
  .background-zoom__end { display: none; }
  .background-zoom__text { color: var(--ink); padding-block: 2em; }
  .background-zoom__h.is--margin-top { margin-top: 0; }
  .background-zoom-after__cta { transition: none; }
}