/* ==========================================================================
   PLOP! — the hero, which is a composition on a table rather than a hero.

   No full-bleed photograph with a headline centred on top of it. One large
   print lies slightly off-angle; the headline is a separate object beside and
   over it; a sticker, a ticket and a paper tab lie around them. Underneath the
   print, half hidden, are a yellow disc and a blue strip that you are not meant
   to notice yet.

   The first scroll does not move the hero upward. It DISTURBS it: the print
   slides diagonally off, uncovering the disc and pushing the strip aside, and
   the disc becomes the bridge into the PLAY chapter.

   That scroll motion uses the individual `translate` and `rotate` properties,
   not `transform`, on purpose — the entrance in motion.css owns `transform`,
   and the two compose instead of fighting over one property.
   ========================================================================== */

.hero {
  padding-block: clamp(6rem, 14vh, 9rem) var(--leaf);
  overflow: clip;
}

.hero__table {
  width: var(--measure);
  margin-inline: auto;
  position: relative;
  display: grid;
  align-items: center;
}

/* --- what is hiding underneath ------------------------------------------ */
.hero__under {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__disc {
  position: absolute;
  right: 6%;
  bottom: -4%;
  width: clamp(9rem, 22vw, 17rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--butter);
  /* it starts almost entirely behind the print and is pushed out into view */
  translate: calc(var(--hero-p, 0) * -6%) calc(var(--hero-p, 0) * -14%);
  scale: calc(1 + var(--hero-p, 0) * .1);
}
.hero__strip {
  position: absolute;
  left: 2%;
  bottom: 12%;
  width: clamp(10rem, 30vw, 26rem);
  height: clamp(2.2rem, 4vw, 3.4rem);
  background: var(--cobalt);
  rotate: -3deg;
  translate: calc(var(--hero-p, 0) * -18%) 0;
}

/* --- the print ----------------------------------------------------------- */
.hero__print {
  grid-area: 1 / 1;
  justify-self: end;
  width: min(66%, 780px);
  z-index: 2;
  --tilt: -2.2deg;
  rotate: calc(var(--tilt) + var(--hero-p, 0) * 6deg);
  translate: calc(var(--hero-p, 0) * 16%) calc(var(--hero-p, 0) * 9%);
}
/* motion.css put the base tilt on `transform` for the entrance; once the
   entrance is done the tilt lives on `rotate` and transform steps out */
.hero__print.is-in { transform: none; }
.hero__tape { top: -1rem; left: 14%; rotate: -8deg; }

/* --- the words ----------------------------------------------------------- */
.hero__words {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: center;
  width: min(58%, 620px);
  z-index: 4;
  translate: calc(var(--hero-p, 0) * -6%) 0;
}
.hero__descriptor { color: var(--cobalt); margin-bottom: .7rem; }
.hero__headline { position: relative; }
.hero__underline {
  display: block;
  width: min(60%, 320px);
  height: 22px;
  margin-top: .3rem;
}

.hero__sticker {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  z-index: 5;
  --tilt: 5deg;
  margin-top: -1.2rem;
  margin-right: 2%;
  background: var(--turquoise);
}

.hero__actions {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: -1.5rem;
}
.hero__cta { --tilt: -2deg; }
.hero__tab { --tilt: 2.5deg; }

.hero__hint {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: end;
  z-index: 5;
  margin-bottom: -4.2rem;
  margin-left: .4rem;
  opacity: calc(1 - var(--hero-p, 0) * 2.4);
}

/* ==========================================================================
   Phone. Not the desktop composition shrunk: a narrow play surface where the
   print is cropped by the viewport, the wordmark-sized headline overlaps its
   lower edge, and a slice of the yellow disc is already visible below the fold
   so there is visibly something under the table.
   ========================================================================== */
@media (max-width: 899px) {
  .hero { padding-top: clamp(5rem, 18vh, 7rem); }
  .hero__table { display: block; }

  .hero__print {
    width: 92%;
    margin-left: 8%;
    margin-right: -12%;          /* runs off the right edge, clipped by .hero */
    --tilt: -2.6deg;
  }
  .hero__words {
    width: 100%;
    margin-top: -2.6rem;
    position: relative;
    translate: none;
  }
  .hero__sticker { position: absolute; top: -.6rem; left: 4%; margin: 0; }
  .hero__actions { margin: 1.4rem 0 0; }
  .hero__hint { margin: .9rem 0 0; }

  .hero__under { inset: auto 0 -3rem 0; height: 12rem; }
  .hero__disc { right: -3rem; bottom: -5rem; width: 11rem; }
  .hero__strip { left: -2rem; bottom: 1rem; width: 12rem; height: 2rem; }
}

/* ==========================================================================
   The bridge. The yellow disc from under the hero print reappears here as the
   thing that opens PLAY — the same object, doing a second job. It comes back
   twice more: as the PLAY token in Build Your Day, and as the paper sun that
   goes down over the last photograph.
   ========================================================================== */
.bridge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: var(--measure);
  margin: 0 auto;
  padding-block: clamp(1rem, 4vw, 3rem);
}
.bridge__disc {
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 14vw, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: var(--lift-card);
  rotate: -4deg;
}
.bridge__word {
  font-family: var(--display);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: var(--track-display);
  rotate: 4deg;
}
.bridge__note { max-width: 12ch; }