/* ==========================================================================
   PLOP! — the chapters.

   Six moments on one table. Each one is an open composition: a large print, a
   smaller print overlapping it, a stamp, a headline and one hand-written note.
   Not a card, not a panel, not a section with a background colour — the objects
   themselves are the structure, and the table runs underneath all of them.

   Every chapter transitions into the next one differently, because the brief is
   right that a site whose sections all arrive the same way has one idea rather
   than six: PLAY is uncovered by the hero print sliding off, SPLASH arrives
   through a blue paper cutout that spreads, PARTIES arrives by folding a corner
   of the sheet, CREATE is carried in on three paint marks, FOOD simply lies
   next to the last chapter, and FAMILY quietens everything down.
   ========================================================================== */

.chapter { overflow: clip; }

.chapter__spread {
  display: grid;
  /* minmax(0, 1fr) and not 1fr: a plain 1fr column has a min-content floor, so
     one long word in a display face silently widens its column and pushes the
     whole spread past the table's measure */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  row-gap: clamp(1rem, 3vw, 2rem);
}

.chapter__main { grid-row: 1; z-index: 2; width: 100%; }
.chapter__second {
  position: absolute;
  z-index: 4;
  width: clamp(9rem, 20vw, 16rem);
}
/* A chapter headline is a step below the page's biggest voice. d-huge is
   reserved for the standalone statements — MAKE A SPLASH, BUILD YOUR DAY, the
   last two lines — which have a whole column to themselves; a chapter headline
   shares its row with a photograph and has to fit beside it. */
.chapter__headline {
  z-index: 3;
  position: relative;
  font-size: clamp(2.2rem, 7.2vw, 5.1rem);
}
.chapter__body { z-index: 3; }
.chapter__note { z-index: 3; }
.chapter__stamp { z-index: 5; align-self: start; justify-self: start; }
.chapter__cta { z-index: 5; justify-self: start; }

/* --- 01 PLAY ------------------------------------------------------------- */
/* the print on the left, the headline pushed over its top-right corner, the
   second print dropped across its bottom-left */
.chapter--play .chapter__main    { grid-column: 1 / 8; --tilt: -1.6deg; }
.chapter--play .chapter__headline { grid-column: 8 / 13; grid-row: 1; margin-top: clamp(1rem, 6vw, 5rem); }
.chapter--play .chapter__body    { grid-column: 8 / 13; grid-row: 2; }
.chapter--play .chapter__stamp   { grid-column: 1 / 3; grid-row: 2; }
.chapter--play .chapter__second  { left: 2%; bottom: -2.5rem; --tilt: 4deg; }

/* --- 02 SPLASH ----------------------------------------------------------- */
/* A blue paper cutout spreads across the screen and the photograph appears
   through it. Two masks driven by the section's own --p: the paper is a little
   bigger than the photograph, so a rim of blue shows all the way round.
   The blob is an SVG shape, not a circle — a cut piece of paper has corners. */
.chapter--splash {
  position: relative;
  padding-block: clamp(7rem, 18vw, 12rem);
  --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M42 22 Q92 2 142 20 Q196 38 186 92 Q177 148 128 177 Q79 205 38 172 Q-3 139 9 87 Q21 35 42 22Z' fill='%23000'/%3E%3C/svg%3E");
}
.chapter--splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--turquoise);
  -webkit-mask: var(--blob) no-repeat center / calc(var(--p, 1) * 290%) calc(var(--p, 1) * 290%);
  mask: var(--blob) no-repeat center / calc(var(--p, 1) * 290%) calc(var(--p, 1) * 290%);
  z-index: 0;
}
.splash__blob {
  position: absolute;
  inset: 1.6rem 0;
  z-index: 1;
  -webkit-mask: var(--blob) no-repeat center / calc(var(--p, 1) * 268%) calc(var(--p, 1) * 268%);
  mask: var(--blob) no-repeat center / calc(var(--p, 1) * 268%) calc(var(--p, 1) * 268%);
}
.splash__photo { height: 100%; }
.splash__photo picture, .splash__photo img { height: 100%; object-fit: cover; }

.splash__words {
  position: relative;
  isolation: isolate;
  z-index: 3;
  color: #fff;
  min-height: clamp(18rem, 46vw, 34rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .6rem;
  text-shadow: 0 2px 14px rgba(10, 40, 60, .38);
}
/* white type over bright water needs more than a text-shadow; this is a soft
   pool of shade under the words, with no edge anywhere near the blob's rim */
.splash__words::before {
  content: '';
  position: absolute;
  inset: -3rem -4rem -4rem -4rem;
  z-index: -1;
  background: radial-gradient(120% 95% at 22% 92%, rgba(6, 44, 62, .68), rgba(6, 44, 62, .30) 48%, transparent 74%);
  pointer-events: none;
}
.splash__stamp { align-self: flex-start; border-color: rgba(255,255,255,.7); color: #fff; }
.splash__note { color: rgba(255,255,255,.92); }

/* flat graphic droplets. Six per burst, thrown once, then gone. */
.droplets { position: absolute; inset: 0; z-index: 4; overflow: hidden; }
.droplet {
  position: absolute;
  width: var(--size, 10px);
  height: var(--size, 10px);
  margin: calc(var(--size, 10px) / -2);
  border-radius: 50% 50% 50% 20%;
  opacity: .9;
  transition: transform 900ms cubic-bezier(.25,.5,.4,1), opacity 900ms linear;
  will-change: transform;
}
.droplet.is-out {
  transform: translate3d(var(--dx), var(--dy), 0) rotate(40deg);
  opacity: 0;
}

/* --- 03 PARTIES: the fold ------------------------------------------------ */
/* The previous composition is printed on a large sheet; one corner turns and
   the birthday photograph is underneath. Two layers and a clip-path, not a 3D
   page-turn engine: the corner is a triangle that grows and the sheet above it
   is clipped back by the same amount. */
.fold { position: relative; --f: calc(var(--p, 1) * 130%); }
.fold__corner {
  position: absolute;
  top: 0; right: 0;
  width: var(--f);
  height: var(--f);
  max-width: 130%;
  max-height: 130%;
  background: linear-gradient(218deg, var(--paper-warm) 0 62%, rgba(60,40,20,.20) 62% 68%, transparent 68%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transform-origin: top right;
  z-index: 6;
  pointer-events: none;
  opacity: calc(1 - var(--p, 1) * .9);
}
.chapter--party .chapter__main    { grid-column: 5 / 13; --tilt: 1.4deg; }
.chapter--party .chapter__headline { grid-column: 1 / 6; grid-row: 1; align-self: end; margin-bottom: -1.5rem; }
.chapter--party .chapter__body    { grid-column: 1 / 7; grid-row: 2; }
.chapter--party .chapter__note    { grid-column: 7 / 11; grid-row: 2; align-self: center; }
.chapter--party .chapter__stamp   { grid-column: 11 / 13; grid-row: 2; justify-self: end; }

.chapter--party .chapter__cta     { grid-column: 1 / 6; grid-row: 3; }

/* --- 04 CREATE ----------------------------------------------------------- */
/* Three paint marks carry this transition instead of a second fold. */
.paintmarks {
  position: absolute;
  top: calc(var(--leaf) * -.35);
  left: 0; right: 0;
  height: 8rem;
  pointer-events: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.paintmark {
  display: block;
  width: clamp(6rem, 16vw, 14rem);
  height: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--c);
  rotate: var(--tilt, 0deg);
  opacity: .9;
  /* a loaded brush: fat in the middle, dry at both ends */
  clip-path: polygon(0 42%, 6% 12%, 22% 4%, 48% 0, 74% 6%, 92% 16%, 100% 46%,
                     94% 78%, 76% 94%, 50% 100%, 24% 96%, 8% 82%);
}

.chapter--create .chapter__main    { grid-column: 6 / 13; --tilt: 1.8deg; }
.chapter--create .chapter__headline { grid-column: 1 / 6; grid-row: 1; margin-top: clamp(1rem, 5vw, 4rem); }
.chapter--create .chapter__body    { grid-column: 1 / 6; grid-row: 2; }
.chapter--create .chapter__note    { grid-column: 6 / 10; grid-row: 2; }
.chapter--create .chapter__stamp   { grid-column: 11 / 13; grid-row: 2; justify-self: end; }

.chapter--create .chapter__second  { right: 1%; bottom: -3rem; --tilt: -5deg; }

/* --- 05 FOOD ------------------------------------------------------------- */
.chapter--food .chapter__main    { grid-column: 1 / 6; --tilt: -2deg; }
.chapter--food .chapter__headline { grid-column: 6 / 13; grid-row: 1; }
.chapter--food .chapter__body    { grid-column: 6 / 11; grid-row: 2; }
.chapter--food .chapter__stamp   { grid-column: 6 / 8; grid-row: 3; }
.chapter--food .chapter__second  { left: 24%; top: 44%; --tilt: 6deg; }

/* the food labels are small paper tags on a string, not menu cards */
.foodtags {
  grid-column: 6 / 13;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
}
.foodtag {
  position: relative;
  padding: .4rem .8rem .4rem 1.3rem;
  background: var(--c, var(--butter));
  color: #fff;
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: var(--track-label);
  box-shadow: var(--lift-scrap);
  rotate: var(--tilt, 0deg);
  clip-path: polygon(0 50%, .7rem 0, 100% 0, 100% 100%, .7rem 100%);
}
/* the punched hole in the tag */
.foodtag::before {
  content: '';
  position: absolute;
  left: .78rem; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--table-now);
}

/* --- 06 FAMILY ----------------------------------------------------------- */
/* The rhythm changes. One photograph dominates, the decorative objects stop,
   and the only thing over the picture is the headline. */
.chapter--family { padding-block: 0; position: relative; }
.family__photo { position: relative; }
.family__photo img { height: clamp(26rem, 78vh, 46rem); object-fit: cover; }
.family__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 14, 10, .62) 0%, rgba(20, 14, 10, .18) 42%, transparent 70%);
}
.family__words {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: clamp(2rem, 6vw, 4rem);
  color: var(--paper);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-start;
}
.family__stamp { border-color: rgba(255,255,255,.6); color: var(--paper); }

/* --- the drawing line ---------------------------------------------------- */
.scrawl {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  width: clamp(12rem, 26vw, 24rem);
  height: auto;
}
.scrawl--play { right: 2%; top: 8%; }

/* ==========================================================================
   Phone. The spreads collapse to one column, the overlapping second prints
   come inline instead of being absolutely positioned over the first, and the
   decorative object count drops — two or three visible at a time, never a
   scatter of tiny stickers over the words.
   ========================================================================== */
@media (max-width: 899px) {
  .chapter__spread { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .chapter__main { width: 100%; }
  .chapter__second {
    position: static;
    width: clamp(8rem, 42vw, 13rem);
    align-self: flex-end;
    margin-top: -3.5rem;
    margin-right: -1rem;
    z-index: 5;
  }
  .chapter--play .chapter__second { align-self: flex-start; margin-left: -1rem; margin-right: 0; }
  .chapter__headline { margin: 0 !important; }
  .chapter--party .chapter__headline { margin-bottom: 0 !important; }

  .scrawl--play { display: none; }        /* it would sit over the headline */
  .paintmarks { top: calc(var(--leaf) * -.25); height: 5rem; }

  .splash__words { min-height: 62vh; }
  .family__photo img { height: 72vh; }
  .family__words { width: 88%; bottom: 2.4rem; }
  .foodtags { margin-top: 0; }
}