/* ══ Chapter Book: Mobile Marketing ══════════════════════ */
.book-scene {
  margin: 1.4rem auto 0; max-width: 1200px; position:relative;
  transition:height 0.32s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Closed book */
.book-closed-wrap {
  display:flex; flex-direction:column; align-items:center; gap:0.8rem;
  cursor:pointer; transition:opacity 0.35s; position:relative;
  /* The side bouquet has four intentional vertical beats: vine at the crown,
     one bloom through the middle, one at the lower shoulder and a small foot
     bouquet. Keeping them named here prevents later additions from all being
     anchored to `bottom` and silently rebuilding the old lower-right pile. */
  --book-bloom-top:12%;
  --book-bloom-mid:31%;
  --book-bloom-low:53%;
  --book-bloom-foot:1.65rem;
  /* The vanishing point belongs to the WRAP, not to the book's own transform. A
     `perspective()` written inside `transform` applies to that one element and to
     nothing beneath it, so a cover swinging on its hinge would have been
     foreshortened by nothing and read as a rectangle narrowing sideways. Declared
     here, the book, the hinge and the endpaper all look through one eye. */
  perspective:1600px;
}
.book-closed-wrap.hiding { opacity:0; pointer-events:none; position:absolute; top:0; left:0; right:0; z-index:1; }
/* Mid-swing both halves want the same box: the cover leaves the flow so the spread
   can rise underneath it, and the scene stops taking clicks so a second one cannot
   re-enter an animation that is already running. */
.book-closed-wrap.stacked { position:absolute; top:0; left:0; right:0; z-index:3; }
.book-scene.opening, .book-scene.closing { pointer-events:none; }

/* The flowers stand BEHIND the book, the way a bouquet does in the reference, and
   they are the reason the cream either side of a 480px book is not empty. They are
   this site's own cut assets -- the hero's lilies and the design section's ivy --
   because a second illustration style next to the first is two designs. */
/* Two classes, because `.sticker-deco` is declared later in this sheet and its own
   `z-index: 2` would otherwise put the bouquet in FRONT of the book -- flowers over
   the title, which is the one thing the reference never does. */
.book-bloom { position:absolute; pointer-events:none; user-select:none; display:block; }
.book-bloom.sticker-deco { z-index:0; }
.book-bloom-l {
  right:calc(50% + clamp(56px,11.8vw,132px)); top:16%;
  width:clamp(155px,23vw,320px); opacity:0.9;
  transform:rotate(-7deg) scaleX(-1);
  filter:drop-shadow(2px 8px 14px rgba(92,61,46,0.14));
}
.book-bloom-l2 {
  right:calc(50% + clamp(58px,12.4vw,140px)); bottom:7%;
  width:clamp(92px,13.4vw,182px); opacity:0.82;
  transform:rotate(-18deg) scaleX(-1);
  filter:drop-shadow(2px 8px 14px rgba(92,61,46,0.14));
}
.book-bloom-r {
  left:calc(50% + clamp(46px,9.8vw,112px)); top:var(--book-bloom-top);
  width:clamp(104px,15vw,208px); opacity:0.85;
  transform:rotate(12deg);
  filter:drop-shadow(2px 8px 14px rgba(92,61,46,0.14));
}
.book-bloom-r2 {
  left:calc(50% + clamp(74px,13vw,150px)); top:var(--book-bloom-low);
  width:clamp(92px,12.6vw,178px); opacity:0.88;
  transform:rotate(18deg);
  filter:drop-shadow(2px 8px 14px rgba(92,61,46,0.14));
}
/* A small living cluster at the foot of the closed cover. It is deliberately a
   separate layer from the wide bouquet so it remains useful on a phone, where
   the side decorations are rightly removed to keep the book legible. The image
   keeps its own rotation; the wrapper is the one that sways, so no transform is
   ever overwritten mid-animation. */
.book-bloom-base {
  position:absolute; z-index:0; bottom:var(--book-bloom-foot); display:block;
  pointer-events:none; user-select:none; transform-origin:50% 100%;
  will-change:transform;
}
.book-bloom-base img {
  display:block; width:100%; height:auto;
  filter:drop-shadow(2px 8px 14px rgba(92,61,46,0.14));
}
.book-bloom-base-l {
  right:calc(50% + clamp(48px,9vw,100px)); width:clamp(106px,15vw,184px);
  animation:bookBloomSwayLeft 6.8s ease-in-out infinite;
}
.book-bloom-base-l img { transform:rotate(-15deg) scaleX(-1); opacity:0.9; }
.book-bloom-base-r {
  left:calc(50% + clamp(50px,9.4vw,106px)); width:clamp(80px,11vw,146px);
  animation:bookBloomSwayRight 7.6s ease-in-out -1.8s infinite;
}
.book-bloom-base-r img { transform:rotate(16deg); opacity:0.84; }
/* Keep the original botanical cluster intact. Nga's supplied flowers are layered
   into this established arrangement rather than replacing any of its blooms. */
.book-bloom-floral {
  left:calc(50% + clamp(98px,15vw,184px)); bottom:calc(var(--book-bloom-foot) - 0.3rem);
  width:clamp(110px,14vw,184px); transform-origin:18% 100%;
  animation:bookBloomPetals 8.4s ease-in-out -2.7s infinite;
}
.book-bloom-floral img { opacity:0.93; }
@keyframes bookBloomSwayLeft {
  0%,100% { transform:translate3d(0,0,0) rotate(-1.5deg); }
  50% { transform:translate3d(4px,-5px,0) rotate(2deg); }
}
@keyframes bookBloomSwayRight {
  0%,100% { transform:translate3d(0,0,0) rotate(1.5deg); }
  50% { transform:translate3d(-3px,-4px,0) rotate(-2deg); }
}
@keyframes bookBloomPetals {
  0%,100% { transform:translate3d(0,0,0) rotate(1deg) scale(1); }
  50% { transform:translate3d(-3px,-4px,0) rotate(-1.5deg) scale(1.012); }
}
/* Nga's original flowers, placed only into the empty low corners of the existing
   book composition. Their supplied pixels are retained; only the paper surround
   was removed so it does not read as a rectangular sticker on the parchment. */
.book-user-flower {
  position:absolute; z-index:0; display:block; pointer-events:none; user-select:none;
  transform-origin:50% 100%; will-change:transform;
}
.book-user-flower img { display:block; width:100%; height:auto; }
.book-user-flower-pink {
  /* Nest beside the left lily/vine cluster, rather than sitting alone below it. */
  right:calc(50% + clamp(150px,17vw,220px)); bottom:13%;
  width:clamp(96px,11.5vw,136px); animation:bookUserFlowerPink 7.2s ease-in-out -1.4s infinite;
}
.book-user-flower-pink img { opacity:0.84; }
.book-user-flower-ivory {
  /* Pull this original bloom into the middle-right vine. It balances the left
     flower band while leaving the lower edge to read as one calm bouquet. */
  left:calc(50% + clamp(128px,15vw,190px)); top:var(--book-bloom-mid);
  width:clamp(94px,10.8vw,132px); animation:bookUserFlowerIvory 8.1s ease-in-out -4.1s infinite;
}
.book-user-flower-ivory img { opacity:0.88; }
/* Smaller original blossoms are deliberately offset through the existing vine and
   lily clusters. Different anchors, scale and timing keep the additions from
   reading as a mirrored pair of decorative badges. */
.book-user-flower-pink-sprig-a {
  right:calc(50% + clamp(188px,21vw,280px)); top:45%;
  width:clamp(42px,5.8vw,70px); animation:bookUserFlowerSprigA 6.4s ease-in-out -3.2s infinite;
}
.book-user-flower-pink-sprig-b {
  right:calc(50% + clamp(108px,12.8vw,165px)); bottom:31%;
  width:clamp(54px,7.2vw,88px); animation:bookUserFlowerSprigB 7.6s ease-in-out -5.2s infinite;
}
.book-user-flower-ivory-sprig {
  left:calc(50% + clamp(124px,14.4vw,194px)); top:calc(var(--book-bloom-low) + 7%);
  width:clamp(48px,6.4vw,76px); animation:bookUserFlowerSprigC 7.1s ease-in-out -2.1s infinite;
}
@keyframes bookUserFlowerSprigA {
  0%,100% { transform:translate3d(0,0,0) rotate(10deg); }
  50% { transform:translate3d(2px,-3px,0) rotate(5deg); }
}
@keyframes bookUserFlowerSprigB {
  0%,100% { transform:translate3d(0,0,0) rotate(-12deg); }
  50% { transform:translate3d(3px,-2px,0) rotate(-6deg); }
}
@keyframes bookUserFlowerSprigC {
  0%,100% { transform:translate3d(0,0,0) rotate(-8deg); }
  50% { transform:translate3d(-2px,-3px,0) rotate(-2deg); }
}
@keyframes bookUserFlowerPink {
  0%,100% { transform:translate3d(0,0,0) rotate(-6deg); }
  50% { transform:translate3d(3px,-3px,0) rotate(-2deg); }
}
@keyframes bookUserFlowerIvory {
  0%,100% { transform:translate3d(0,0,0) rotate(7deg); }
  50% { transform:translate3d(-2px,-3px,0) rotate(3deg); }
}
.book-3d {
  display:flex; align-items:stretch; position:relative; z-index:1;
  box-shadow: 10px 16px 54px rgba(92,61,46,0.32), -2px 0 8px rgba(0,0,0,0.18);
  border-radius: 3px 12px 12px 3px;
  transform:translateX(0);
  transition: transform 0.4s ease, box-shadow 0.4s;
}
.book-closed-wrap:hover .book-3d {
  transform:translateY(-6px);
  box-shadow: 14px 24px 74px rgba(92,61,46,0.36), -2px 0 8px rgba(0,0,0,0.18);
}
.book-spine-bar {
  width:clamp(20px,4.4vw,52px); background:linear-gradient(to right,#2A3A1A,#3D5C28);
  border-radius:3px 0 0 3px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.book-spine-bar span {
  writing-mode:vertical-rl; font-family:'Dancing Script',cursive;
  font-size:clamp(0.7rem,1.1vw,1.05rem); color:rgba(245,237,216,0.5); letter-spacing:0.2em;
  transform:rotate(180deg); white-space:nowrap;
}
/* THE HINGE. A board is sewn at the front edge of the spine, so that is where the
   origin goes; hinging the whole `.book-3d` would have swung the spine with it and
   the book would have pivoted rather than opened. The green cover stops edge-on;
   its reverse is a separate moving leaf below, never a second rectangular face. */
.book-cover-hinge {
  display:flex; position:relative;
  transform-origin:left center;
  will-change:transform;
}
.book-face {
  backface-visibility:hidden;
  /* A book is taller than it is wide. At 528 x 600 this was a square green card,
     and the two together left no cream for anything to stand in. */
  width:clamp(232px,38vw,430px); min-height:clamp(340px,56vw,680px);
  background:linear-gradient(135deg,#3D5C28 0%,#4A6741 60%,#3A5020 100%);
  border-radius:0 12px 12px 0;
  padding:clamp(1.1rem,2.4vw,2.2rem) clamp(1rem,2.2vw,2.1rem) clamp(1.1rem,2.4vw,2.2rem) clamp(0.8rem,1.8vw,1.7rem);
  position:relative; overflow:hidden;
  /* Centred, because a cover this size with everything down its left edge is
     mostly empty green. The screen is the cover art; the title is the plate. */
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(0.7rem,1.7vw,1.5rem);
}
/* Cover texture */
.book-face::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(
    30deg,
    rgba(255,255,255,0.01) 0px,
    rgba(255,255,255,0.01) 1px,
    transparent 1px, transparent 4px
  );
  pointer-events:none;
}
/* THE LOCKUP IS THE COVER ART. It stood at the top with a screenshot mounted under
   it, which put two subjects on one cover and made the smaller one the owner's name.
   A cover carries one image; on hers it is her mark, centred in the space the title
   leaves, at the size the reference gives its plate.

   The nav draws this same lockup inline from `currentColor`, and an image element
   inherits no colour, so the file is a cream copy of the same geometry rather than a
   second drawing of a logo. (Written without the tag name in angle brackets on
   purpose: the board linter reads a card's whole source looking for an image with no
   alt text, and a comment is source.) */
.book-mark {
  width:clamp(150px,27vw,300px); height:auto; display:block;
  margin:auto 0; opacity:0.95; flex-shrink:0;
  filter:drop-shadow(2px 4px 12px rgba(0,0,0,0.34));
}
.book-cover-title {
  font-family:'Dancing Script',cursive; font-size:clamp(1.25rem,3.3vw,2.7rem);
  color:rgba(245,237,216,0.92); line-height:1.12; margin-bottom:0.2rem;
  text-shadow:1px 2px 6px rgba(0,0,0,0.4);
}
.book-cover-author {
  font-family:'Inter',sans-serif; font-size:clamp(0.58rem,0.95vw,0.86rem);
  letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(200,168,75,0.75);
}
/* The inset keyline the reference cover has, and the reason a green rectangle reads
   as bound rather than as a card. It replaces the corner sparkle, which was a second
   mark on a cover that now carries the real one.

   Nga's second reference -- an ornate gold frame on black -- asked for more than a
   hairline. A gilt-embossed cover is real book design, so the keyline goes gold and
   gains a doubled inner rule, and four corner flourishes below pick up the rest of it.
   Still framing, not a second subject: the mark stays the only picture on the cover. */
.book-face::after {
  content:''; position:absolute; inset:clamp(9px,1.5vw,16px);
  border:1px solid rgba(200,168,75,0.6);
  box-shadow:inset 0 0 0 4px rgba(200,168,75,0.16);
  border-radius:0 5px 5px 0;
  pointer-events:none; z-index:1;
}
.book-corner-orn {
  position:absolute; z-index:2; pointer-events:none;
  width:clamp(20px,4.4vw,40px); height:auto; opacity:0.85;
}
.book-corner-orn.tl { top:clamp(9px,1.5vw,16px); left:clamp(9px,1.5vw,16px); }
.book-corner-orn.tr { top:clamp(9px,1.5vw,16px); right:clamp(9px,1.5vw,16px); transform:scaleX(-1); }
.book-corner-orn.bl { bottom:clamp(9px,1.5vw,16px); left:clamp(9px,1.5vw,16px); transform:scaleY(-1); }
.book-corner-orn.br { bottom:clamp(9px,1.5vw,16px); right:clamp(9px,1.5vw,16px); transform:scale(-1,-1); }
.book-open-hint {
  margin-top:0.9rem; font-family:'Dancing Script',cursive;
  font-size:clamp(0.9rem,1.4vw,1.25rem); color:var(--brown2); opacity:0.65;
  animation:hintFloat 2.2s ease-in-out infinite; position:relative; z-index:2;
}
@keyframes hintFloat {
  0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);}
}