/* ==========================================================================
   book.html: page styles on top of styles.css (design system v3)
   ========================================================================== */

.book-title { font-style: normal; }

/* ---------- Intro: title, buy row, flip book ---------- */
.book-intro { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 84px); }
.book-intro__copy { display: grid; gap: 18px; justify-items: start; }
.book-intro__copy > * { margin: 0; }
.book-intro__copy h1 { max-width: 13ch; }
.book-intro .lede { max-width: 30ch; margin: -4px 0 0; font-weight: 500; }
.book-intro__pitch { max-width: 46ch; }
.book-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.book-intro .btn-row { margin-top: 6px; }
.book-retail { font-size: 1rem; }
.book-intro__cover { display: grid; justify-items: center; }
.book-swing { display: grid; justify-items: center; width: 100%; }
.book-intro .flip { width: min(100%, 320px); }
/* "2-Hour" gets a yellow marker underline (white text stays readable on blue) */
.book-intro .hl { background-image: linear-gradient(transparent 84%, var(--yellow) 84%, var(--yellow) 97%, transparent 97%); }
.book-flipnote { margin: 22px 0 0; color: var(--yellow); }
.book-flipnote__back,
.book-intro__cover:has(.flip-toggle:checked) .book-flipnote__front { display: none; }
.book-intro__cover:has(.flip-toggle:checked) .book-flipnote__back { display: inline; }
.book-intro .flip__back { background: #0757D6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 30px 50px -22px rgba(0, 0, 0, 0.6); }
@media (max-width: 899px) {
  .book-intro .flip { width: min(68%, 260px); }
}

/* ---------- Press: sits straight under the blue intro, no rule ---------- */
.book-press { padding-bottom: 0; }
.book-press__title { margin-bottom: 22px; color: var(--muted); text-align: center; font-weight: 500; }

/* ---------- Why + what’s inside: the light-up paragraph shares a row with the contents ---------- */
.book-kicker { margin: 0 0 12px; color: var(--blue); font-weight: 650; }
.book-why__copy h2 { max-width: 15ch; }
.book-why__lit { margin-top: 22px; max-width: 30ch; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.8rem); line-height: 1.28; letter-spacing: -0.012em; }
.book-why__copy > p:last-child { margin-top: 22px; max-width: 46ch; }
.book-inside__intro { margin: 10px 0 0; color: var(--muted); }
.book-inside { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 640px) { .book-inside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.book-inside li { padding: 22px; border-radius: 16px; background: var(--cream); }
.book-inside h4 { margin-bottom: 6px; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
.book-inside p { font-size: 1rem; line-height: 1.5; }
.book-inside__sample { margin: 14px 0 0; }

/* ---------- Plan your first party (checklist on the one dark section) ---------- */
.book-plan__head > * { margin: 0; }
.book-plan__head > * + * { margin-top: 16px; }
@media (min-width: 900px) { .book-plan__head { position: sticky; top: 100px; align-self: start; } }
/* the group photo, as a print: step 9 in real life */
.book-plan__head .book-plan__photo { margin-top: 30px; padding: 10px 10px 14px; border-radius: 8px; background: var(--white); rotate: -1.5deg; box-shadow: 0 24px 44px -24px rgba(0, 0, 0, 0.7); }
.book-plan__photo .photo { aspect-ratio: 4 / 3; border-radius: 4px; }
.book-plan__photo figcaption { margin-top: 10px; padding-inline: 4px; color: var(--ink); font-weight: 600; font-size: 1rem; }
.book-plan__head .book-plan__more { margin-top: 26px; }
.book-plan__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.book-plan__card .plan-lights { grid-column: 1; grid-row: 1; margin: 0; }
.book-plan__card .plan-count { grid-column: 2; grid-row: 1; margin: 0; color: var(--white); font-weight: 650; font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.book-plan__card .plan { grid-column: 1 / -1; grid-row: 2; margin-top: 22px; }
.book-plan__card .plan-done { grid-column: 1 / -1; grid-row: 3; background: var(--yellow); color: var(--ink); }
.book-plan .plan-lights i { background: rgba(255, 255, 255, 0.14); }
.book-plan .plan label { color: var(--ink); line-height: 1.45; }
.book-plan .plan li:nth-child(1)::before,
.book-plan .plan li:nth-child(7)::before { display: block; margin-bottom: 4px; color: var(--yellow); font-weight: 650; font-size: 0.95rem; }
.book-plan .plan li:nth-child(1)::before { content: "Before the party"; }
.book-plan .plan li:nth-child(7)::before { content: "At the party"; margin-top: 16px; }

/* ---------- About the author: a cut-out portrait popping out of a yellow tile ---------- */
.book-author__photo { position: relative; width: min(100%, 470px); justify-self: center; }
.book-author__frame { position: relative; }
.book-author__frame::before { content: ""; position: absolute; inset: 27% 0 0; border-radius: var(--r-lg); background: var(--yellow); }
.book-author__frame img { position: relative; width: 100%; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.book-author__photo .nametag { position: absolute; left: -14px; bottom: 54px; width: clamp(128px, 31%, 156px); rotate: -6deg; }
.book-author__photo .nametag__hello { font-size: clamp(1.3rem, 3.4vw, 1.65rem); }
.book-author__photo .nametag__name { font-size: clamp(1.6rem, 4.4vw, 2rem); }
.book-author__photo figcaption { margin-top: 12px; text-align: center; }
@media (max-width: 899px) { .book-author__photo { width: min(100%, 380px); } .book-author__photo .nametag { left: -4px; } }

/* ---------- FAQ + buy card: questions on the right, the book on the left ---------- */
.book-faq__grid { display: grid; gap: 28px clamp(32px, 5vw, 64px); grid-template-areas: "head" "faq" "buy"; }
.book-faq__head { grid-area: head; }
.book-faq__head p { margin-top: 12px; color: var(--muted); }
.book-faq .faq { grid-area: faq; display: grid; gap: 10px; border-top: 0; }
.book-faq .faq details { padding-inline: 22px; border: 0; border-radius: 16px; background: var(--white); }
.book-faq .faq summary { padding-block: 18px; }
.book-faq .faq details > div { padding-bottom: 20px; }
.book-faq .faq details > div p { font-size: 1rem; }
.book-buy { grid-area: buy; }
@media (min-width: 900px) {
  .book-faq__grid { grid-template-columns: 0.8fr 1.2fr; grid-template-rows: auto 1fr; grid-template-areas: "head faq" "buy faq"; align-items: start; }
}
.book-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; padding: clamp(20px, 2.4vw, 26px); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
.book-buy__cover { flex: none; width: 74px; border-radius: 2px 5px 5px 2px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.45); rotate: -4deg; transition: rotate 0.35s var(--bounce); }
.book-buy:hover .book-buy__cover { rotate: 0deg; }
.book-buy__text { flex: 1 1 150px; min-width: 0; }
.book-buy__text p { margin-top: 4px; color: var(--muted); font-size: 1rem; }
.book-buy__btn { flex: 1 1 100%; }

/* ==========================================================================
   Motion (book page). Shared pieces (.words, .lit, .reveal, .stagger,
   .parallax, header progress) live in motion.css. Everything here is off
   for reduced motion, and scroll-linked pieces also need animation-timeline
   support; without them the page shows its finished state.
   Only individual translate/scale/rotate/opacity/clip-path/filter and
   colour properties are animated, so hover + checked states keep working.
   ========================================================================== */
@keyframes bk-swing {
  0% { opacity: 0; translate: 60px 110px; rotate: 0.3 1 0 -62deg; scale: 0.74; }
  45% { opacity: 1; }
  70% { translate: 0 -8px; rotate: 0.3 1 0 8deg; scale: 1.03; }
  100% { opacity: 1; translate: 0 0; rotate: 0.3 1 0 0deg; scale: 1; }
}
@keyframes bk-write { from { clip-path: inset(-20% 100% -20% -5%); } to { clip-path: inset(-20% -5% -20% -5%); } }
@keyframes bk-star { 0% { opacity: 0; scale: 0.2; rotate: -50deg; } 60% { opacity: 1; scale: 1.35; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes bk-away { to { translate: 0 -120px; scale: 0.92; } }
@keyframes bk-away-slow { to { translate: 0 -48px; } }
@keyframes bk-logo { from { opacity: 0; translate: 0 28px; filter: grayscale(1) blur(6px); } to { opacity: 0.65; translate: 0 0; filter: grayscale(1) blur(0); } }
@keyframes bk-hl { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
/* party lights: no 0% / 100% keyframes, so each light starts and ends on
   whatever the checklist says (on if that step is ticked, off if not) */
@keyframes bk-light {
  12% { background-color: #FFF8C2; box-shadow: 0 0 24px 7px rgba(255, 224, 0, 0.95); scale: 1 1.45; }
  24%, 74% { background-color: var(--yellow); box-shadow: 0 0 14px 2px rgba(255, 224, 0, 0.7); scale: 1 1; }
}
/* the "Nick" name tag gets slapped onto the photo; ends on its own -6deg */
@keyframes bk-tag {
  0% { opacity: 0; scale: 1.7; rotate: -26deg; translate: -30px -60px; }
  55% { opacity: 1; scale: 0.94; rotate: 3deg; translate: 0 0; }
  78% { scale: 1.03; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes bk-drop { from { opacity: 0; translate: -20px -60px; scale: 1.3; } to { opacity: 1; translate: 0 0; scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: title words rise (motion.css), the rest of the copy follows in order,
     stars pop on one by one, and the book is tossed in and swings flat */
  .book-intro__copy > .lede { animation-delay: 0.3s; }
  .book-intro__copy > .book-intro__pitch { animation-delay: 0.4s; }
  .book-intro__copy > .book-rating { animation-delay: 0.5s; }
  .book-intro__copy > .btn-row { animation-delay: 0.6s; }
  .book-intro__copy > .book-retail { animation-delay: 0.7s; }
  .book-rating .stars svg { animation: bk-star 0.55s 0.8s var(--bounce) both; }
  .book-rating .stars svg:nth-child(2) { animation-delay: 0.88s; }
  .book-rating .stars svg:nth-child(3) { animation-delay: 0.96s; }
  .book-rating .stars svg:nth-child(4) { animation-delay: 1.04s; }
  .book-rating .stars svg:nth-child(5) { animation-delay: 1.12s; }

  .book-intro__cover { perspective: 1600px; }
  .book-swing { animation: bk-swing 1.5s 0.15s cubic-bezier(0.2, 0.75, 0.25, 1) backwards; }
  .book-flipnote { animation: bk-write 0.8s 1.35s cubic-bezier(0.6, 0, 0.3, 1) backwards; }

  @supports (animation-timeline: view()) {
    /* Hero: as you scroll on, the book floats up faster than the copy */
    .book-intro__cover { animation: bk-away linear both; animation-timeline: view(); animation-range: exit -10% exit 100%; }
    .book-intro__copy { animation: bk-away-slow linear both; animation-timeline: view(); animation-range: exit -10% exit 100%; }

    /* Press logos arrive one after another */
    .book-press .press img { animation: bk-logo linear both; animation-timeline: view(); animation-range: cover 4% cover 22%; }
    .book-press .press img:nth-child(2) { animation-range: cover 7% cover 25%; }
    .book-press .press img:nth-child(3) { animation-range: cover 10% cover 28%; }
    .book-press .press img:nth-child(4) { animation-range: cover 13% cover 31%; }
    .book-press .press img:nth-child(5) { animation-range: cover 16% cover 34%; }
    .book-press .press img:nth-child(6) { animation-range: cover 19% cover 37%; }

    /* Why: once the paragraph has lit up, the highlighter swipes under the punchline */
    .book-why__lit .hl { background-repeat: no-repeat; animation: bk-hl linear both; animation-timeline: --lit; animation-range: cover 50% cover 60%; }


    /* Party lights: a decoration pass switches all ten on, left to right, as the
       checklist scrolls in, then hands them back to the ticked steps */
    .book-plan .plan-lights { view-timeline-name: --lights; }
    .book-plan .plan-lights i { animation: bk-light linear; animation-timeline: --lights; animation-range: cover 6% cover 62%; }
    .book-plan .plan-lights i:nth-child(2) { animation-range-start: cover 9%; }
    .book-plan .plan-lights i:nth-child(3) { animation-range-start: cover 12%; }
    .book-plan .plan-lights i:nth-child(4) { animation-range-start: cover 15%; }
    .book-plan .plan-lights i:nth-child(5) { animation-range-start: cover 18%; }
    .book-plan .plan-lights i:nth-child(6) { animation-range-start: cover 21%; }
    .book-plan .plan-lights i:nth-child(7) { animation-range-start: cover 24%; }
    .book-plan .plan-lights i:nth-child(8) { animation-range-start: cover 27%; }
    .book-plan .plan-lights i:nth-child(9) { animation-range-start: cover 30%; }
    .book-plan .plan-lights i:nth-child(10) { animation-range-start: cover 33%; }

    /* Author: the name tag is slapped onto the photo */
    .book-author__photo .nametag { animation: bk-tag linear both; animation-timeline: view(); animation-range: entry 40% cover 32%; }

    /* Buy row: the little book drops into the card */
    .book-buy__cover { animation: bk-drop linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
  }
}