/* Each chapter has its own floral composition and reveal. */
@media (min-width: 601px) {
  .chapter-nav { top: min(calc(46% - 56px), calc(100svh - 480px)); }
}

.stage-florals {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
}

/* White sprays and red peonies form one corner arrangement for the title. */
.hero-wood {
  position: absolute;
  top: auto;
  left: auto;
  right: 38px;
  bottom: 20%;
  width: clamp(340px, 30vw, 500px);
  height: auto;
  transform: rotate(-26deg);
  transform-origin: 70% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.stage-wood-main {
  position: absolute;
  margin: 0;
  padding: 0;
  pointer-events: none;
  will-change: transform;
}

.stage-wood-main > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* The spatial chapter keeps its own broad canopy after the title has faded. */
.stage-wood-main {
  top: -90px;
  left: clamp(200px, 14.5vw, 280px);
  width: clamp(360px, 33vw, 560px);
  opacity: calc(.93 - var(--floral-phase, 0) * .13);
  transform-origin: 25% 0;
  transform: translate3d(
    calc(var(--floral-phase, 0) * -16px),
    calc(var(--floral-phase, 0) * 9px),
    0
  ) rotate(-4deg);
}

/* Text remains above the independent foreground, including during its fade. */
.stage > .hero { z-index: 4; }

/* A low sprig appears only for the spatial chapter, behind the moving photos. */
.stage-shaoyao {
  position: absolute;
  z-index: 1;
  left: -42px;
  bottom: 75px;
  width: clamp(230px, min(22vw, 30svh), 320px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transform: rotate(9deg);
  transform-origin: 35% 100%;
}
.stage-shaoyao > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

.workshop-entry { isolation: isolate; }
.workshop-entry > .entry-copy,
.workshop-entry > .entry-gallery {
  position: relative;
  z-index: 2;
}

.entry-florals {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.entry-florals img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

.entry-florals > div { position: absolute; }

.entry-florals .entry-peony {
  left: 16px;
  bottom: -45px;
  width: clamp(300px, 27vw, 420px);
  transform: rotate(-5deg);
  transform-origin: 30% 100%;
}

.entry-florals .entry-wood {
  top: 70px;
  right: -105px;
  width: clamp(500px, 46vw, 690px);
  opacity: .94;
  transform: rotate(3deg);
  transform-origin: 85% 20%;
}

.entry-florals .entry-shaoyao {
  right: -100px;
  bottom: 0;
  width: clamp(270px, 24vw, 370px);
  transform: rotate(-14deg);
  transform-origin: 60% 70%;
}

@media (min-width: 1800px) {
  .hero-wood { right: calc(2% + 70px); bottom: 21%; }
  .stage-wood-main { top: -100px; left: 15%; }
  .entry-florals .entry-peony { left: 24px; }
  .entry-florals .entry-shaoyao { right: -45px; }
}

@media (max-width: 1100px) and (min-width: 601px) {
  .hero-wood { right: 10px; bottom: 15%; width: 300px; }
  .golden-petals { display: none; }
  .stage-wood-main {
    left: 180px;
    top: -82px;
    width: clamp(320px, 40vw, 420px);
  }
  .stage-shaoyao { left: -65px; width: 245px; bottom: 75px; }
  .entry-florals .entry-peony { width: 300px; left: 0; bottom: -35px; }
  .entry-florals .entry-wood { width: 480px; right: -130px; top: 78px; }
  .entry-florals .entry-shaoyao { width: 275px; right: -110px; bottom: -12px; }
}

@media (max-width: 600px) {
  /* Keep the header, chapter links and central title completely open. */
  .hero-wood {
    right: -35px;
    bottom: 90px;
    width: 260px;
  }
  .stage-wood-main {
    top: 176px;
    left: -190px;
    width: 260px;
    opacity: calc(.84 - var(--floral-phase, 0) * .08);
    transform-origin: 100% 0;
    transform: translate3d(
      calc(var(--floral-phase, 0) * -5px),
      calc(var(--floral-phase, 0) * -8px),
      0
    ) rotate(4deg);
  }
  .entry-florals .entry-peony {
    top: auto;
    bottom: -12px;
    left: 4px;
    width: 240px;
    transform: rotate(-4deg);
  }
  .workshop-entry { padding-bottom: 250px; }
  .entry-florals .entry-wood {
    top: 164px;
    right: -260px;
    width: 370px;
    opacity: .88;
    transform: rotate(8deg);
  }
  .entry-florals .entry-shaoyao {
    right: -96px;
    bottom: -32px;
    width: 245px;
    transform: rotate(-11deg);
  }
  .stage-shaoyao { left: -72px; bottom: 235px; width: 150px; }
}

@media (max-width: 360px) {
  .hero-wood { right: -35px; width: 240px; }
  .stage-wood-main { left: -185px; width: 230px; top: 174px; }
  .entry-florals .entry-wood { right: -280px; }
  .entry-florals .entry-peony { left: 0; width: 220px; }
}

@media (max-height: 650px) and (min-width: 601px) {
  .stage-wood-main {
    top: -126px;
    left: 170px;
    width: 300px;
    opacity: calc(.73 - var(--floral-phase, 0) * .08);
  }
  .chapter-nav { top: 100px; }
  .stage-shaoyao { width: 180px; left: -66px; bottom: 35px; }
  .entry-florals .entry-wood { width: 420px; right: -110px; }
}

@media (max-height: 650px) and (max-width: 600px) {
  .hero-wood { right: -30px; bottom: 50px; width: 200px; }
  .stage-wood-main {
    top: 174px;
    left: -175px;
    width: 215px;
    opacity: .68;
  }
  .stage-shaoyao { left: -90px; width: 145px; bottom: 140px; }
}

@media (max-height: 450px) { .stage-shaoyao { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .stage-florals { --floral-phase: 0 !important; }
  .stage-wood-main {
    will-change: auto;
    animation: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .stage-florals,
  .entry-florals,
  .stage-shaoyao { display: none; }
}