/* One generated film includes the photo, peeled path, leaf and Big Boss. */
#join.signup-garden {
  position: relative;
  isolation: isolate;
  max-width: none;
  overflow: hidden;
  padding-block: clamp(140px, 11vw, 190px) 72px;
  scroll-margin-top: 0; /* The document already reserves the fixed header. */
  background: var(--paper);
  color: var(--ink);
}

#join .signup-garden-world {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 1726 / 1080;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 96%, transparent);
  mask-image: linear-gradient(to bottom, #000 96%, transparent);
}

#join .signup-garden-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* The complete film and poster fill the same scene: no character cutout,
   inset video card, or independently positioned strip can leave a gap. */
#join .play-break-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

/* Watch the lower-right action region, rather than the upper photo edge. */
#join .signup-play-region {
  position: absolute;
  left: 68%;
  top: 53%;
  width: 31%;
  height: 42%;
  pointer-events: none;
}

#join .play-break-picture img,
#join .play-break-picture video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  pointer-events: none;
}

#join .play-break-picture video {
  opacity: 0;
}

#join [data-play-state="playing"] .play-break-picture video[data-play-active="true"] {
  opacity: 1;
}

/* Heading and real form follow reading order on the empty left paper. */
#join .interest-layout {
  position: relative;
  display: block;
  width: min(46%, 560px);
  max-width: none;
  margin-inline: 0;
}

#join .interest-intro {
  min-width: 0;
}

#join .interest-intro h2 {
  font-size: clamp(40px, 4.15vw, 58px);
  line-height: 1.08;
  max-width: 16ch;
  margin-block-end: 20px;
}

#join .interest-intro > p {
  max-width: 45ch;
  margin-block-end: 14px;
}

#join .interest-intro .interest-eyebrow {
  font-size: 26px;
  margin-block-end: 14px;
}

#join .interest-intro > .signup-garden-room {
  font: 500 27px / 1.15 Caveat, cursive;
  color: #66406f;
  margin-block: 24px 0;
}

#join .interest-form {
  position: relative;
  min-width: 0;
  width: 100%;
  margin-block-start: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-motion="off"] #join .play-break-picture video {
  opacity: 0;
}

@media (max-width: 860px) {
  #join.signup-garden {
    container-type: inline-size;
    padding: 0 0 52px;
  }

  /* Keep the film intact and use its empty paper for the introduction.
     On the smallest panes its width follows the pane rather than a 640px floor. */
  #join .signup-garden-world {
    width: max(100%, min(520px, 133%));
  }

  #join .interest-layout {
    --signup-inset: 24px;
    --signup-scene-width: max(100cqw, min(520px, 133cqw));
    --signup-copy-top: min(180px, calc(var(--signup-scene-width) * .275));
    width: min(calc(100% - var(--signup-inset) * 2), 560px);
    margin-inline: 0;
    /* The empty paper stays physically left, including with RTL text. */
    margin-left: var(--signup-inset);
    margin-right: auto;
    margin-block-start: 0;
    padding-block-start: var(--signup-copy-top);
  }

  #join .interest-intro {
    display: flow-root;
  }

  /* This invisible space follows the physical right-hand strip and cat.
     Text wraps beside them, then uses the full width once the film ends.
     Containing the float also keeps the form below the whole scene. */
  #join .interest-intro::before {
    content: '';
    float: right;
    width: max(0px, calc(100% + var(--signup-inset) + var(--signup-scene-width) * .35 - 100cqw));
    height: calc(var(--signup-scene-width) * 1080 / 1726 - var(--signup-copy-top));
    margin-left: 14px;
  }

  #join .interest-intro h2 {
    font-size: clamp(28px, 6cqw, 48px);
    max-width: 16ch;
  }

  #join .interest-intro > p {
    font-size: 16px;
  }

  #join .interest-intro .interest-eyebrow {
    font-size: clamp(20px, 3.8cqw, 24px);
    text-wrap: balance;
  }

  #join .interest-intro > .signup-garden-room {
    font-size: 25px;
  }
}

@media (max-width: 380px) {
  #join .interest-layout {
    --signup-inset: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #join .play-break-picture video {
    opacity: 0 !important;
  }
}