/* ---------- My Story: spiral-bound book ---------- */
body.story { overflow: hidden; height: 100svh; }
.story .nav { position: fixed; top: 0; left: 0; right: 0; }
.desk {
  position: relative; z-index: 2; height: 100svh; display: grid; place-items: center;
  padding: calc(var(--nav-h) + 4px) 70px 84px 30px;
  perspective: 2600px; perspective-origin: 50% 45%;
}
.book-wrap { position: relative; width: min(1180px, 86vw); aspect-ratio: 1.58; max-height: calc(100svh - var(--nav-h) - 100px); }
.book-wrap[data-tall] { aspect-ratio: auto; height: calc(100svh - var(--nav-h) - 100px); width: calc((100svh - var(--nav-h) - 100px) * 1.58); max-width: 86vw; }
.book {
  position: absolute; inset: 0; transform-style: preserve-3d;
  filter: drop-shadow(0 40px 50px rgba(74, 61, 140, .28));
}
.book__cover-shadow { position: absolute; inset: -6px -8px -10px -6px; border-radius: 6px 14px 14px 6px; background: linear-gradient(135deg, #6D5BBA, #4A3D8C); z-index: 0; }
.book__cover-shadow::after { content: ""; position: absolute; inset: 4px; border-radius: 4px 12px 12px 4px; border: 1px solid rgba(255, 255, 255, .14); }

/* static pages (the base of each side) */
.page {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: var(--paper); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.page--left { left: 0; border-radius: 4px 0 0 4px; }
.page--right { right: 0; border-radius: 0 10px 10px 0; }
.page--left::after, .page--right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 5; }
.page--left::after { right: 0; background: linear-gradient(to right, rgba(74, 61, 140, 0), rgba(74, 61, 140, .10)); }
.page--right::after { left: 0; background: linear-gradient(to left, rgba(74, 61, 140, 0), rgba(74, 61, 140, .12)); }

/* leaves that flip */
.leaf {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
  transform-origin: 0% 50%; transform-style: preserve-3d;
  transform: rotateY(var(--a, 0deg));
  transition: transform 1.05s cubic-bezier(.4, .05, .25, 1);
  will-change: transform;
  z-index: 10;
}
.leaf.is-scrub { transition: none; }
.leaf.is-flipped { --a: -180deg; }
.leaf__face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--paper);
}
.leaf__face--front { border-radius: 0 10px 10px 0; }
.leaf__face--back { transform: rotateY(180deg); border-radius: 4px 0 0 4px; }
.leaf__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: var(--sh, 0); transition: opacity .3s; }
.leaf__face--front::after { background: linear-gradient(to right, rgba(74, 61, 140, .35), rgba(74, 61, 140, 0) 45%); }
.leaf__face--back::after { background: linear-gradient(to left, rgba(74, 61, 140, .35), rgba(74, 61, 140, 0) 45%); }
.leaf__face--front::before, .leaf__face--back::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 5; }
.leaf__face--front::before { left: 0; background: linear-gradient(to right, rgba(74, 61, 140, .14), rgba(74, 61, 140, 0)); }
.leaf__face--back::before { right: 0; background: linear-gradient(to left, rgba(74, 61, 140, .12), rgba(74, 61, 140, 0)); }

/* page tints */
.tint-lilac { background: #EFEBFB; } .tint-peach { background: #FFF1E6; } .tint-mint { background: #E6F6EC; } .tint-sky { background: #E9F5FE; } .tint-rose { background: #FCE9EF; } .tint-butter { background: #FFF8DC; }

/* ring spine */
.spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; z-index: 40; pointer-events: none; display: flex; flex-direction: column; justify-content: space-evenly; padding: 26px 0; }
.ring { position: relative; width: 0; height: 22px; }
.ring::before { content: ""; position: absolute; left: -26px; width: 52px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, #cfcbd4 0%, #fcfbfa 30%, #b8b3ae 80%, #9e9a95 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, .18), inset 0 1px 1px rgba(255, 255, 255, .8); }
.ring::after { content: ""; position: absolute; left: -22px; width: 10px; height: 10px; top: 50%; margin-top: -5px; border-radius: 50%; background: var(--lilac-2); box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .25), 34px 0 0 0 var(--lilac-2), inset -1px -1px 2px rgba(255, 255, 255, .6); }
.hole-row { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; z-index: 30; pointer-events: none; display: flex; flex-direction: column; justify-content: space-evenly; padding: 26px 0; }

/* side tabs */
.tabs { position: absolute; right: -44px; top: 48px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.tab {
  width: 44px; padding: 16px 0; border-radius: 0 10px 10px 0;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--violet); background: var(--paper); box-shadow: 6px 4px 12px rgba(74, 61, 140, .14);
  transition: transform .3s var(--ease-out), background .3s, color .3s; text-align: center;
}
.tab:hover { transform: translateX(3px); }
.tab.is-active { transform: translateX(6px); color: var(--violet-ink); }
.tab[data-tint="lilac"] { background: #DCD4F5; } .tab[data-tint="peach"] { background: #FFE8D6; } .tab[data-tint="mint"] { background: #D7F1E1; } .tab[data-tint="sky"] { background: #E0F2FE; } .tab[data-tint="rose"] { background: #F9D9E3; }

/* ---------- page content ---------- */
.pg { position: absolute; inset: 0; padding: clamp(22px, 3.2vw, 46px) clamp(22px, 3.4vw, 50px); display: flex; flex-direction: column; }
.pg--left { padding-right: clamp(54px, 4.9vw, 76px); padding-bottom: clamp(16px, 2vw, 30px); }
.pg--right { padding-left: clamp(34px, 4vw, 60px); }
.pg__num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .26em; color: var(--violet); text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.pg__num::after { content: ""; flex: 1; height: 1px; background: rgba(109, 91, 186, .25); }
.pg__chapter { font-family: var(--font-hand); font-weight: 700; font-size: clamp(42px, 5vw, 76px); line-height: .9; color: var(--violet); margin: 10px 0 0; }
.pg__text { font-family: var(--font-display); font-size: var(--fs, clamp(16px, 1.5vw, 23px)); line-height: 1.5; color: var(--ink); margin: auto 0; max-width: 36ch; }
.pg__text::first-letter { font-size: 1.6em; line-height: .8; font-style: italic; color: var(--violet); }
.pg__foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; }
.pg__deco { position: absolute; right: 20px; bottom: 18px; width: 26px; opacity: .7; }
.pg__deco svg { width: 100%; shape-rendering: crispEdges; }

/* photo collage: polaroids & taped prints */
.collage { position: relative; flex: 1; min-height: 0; margin: 8px 0 4px; }
.photo { position: absolute; background: #fff; padding: 5px 5px 18px; box-shadow: 0 14px 26px -12px rgba(74, 61, 140, .45), 0 2px 6px rgba(74, 61, 140, .12); transform: rotate(var(--r, 0deg)); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.96) contrast(1.02); }
.photo::after { content: ""; position: absolute; inset: 6px 6px 22px; box-shadow: inset 0 0 40px rgba(60, 40, 20, .08); pointer-events: none; }
.photo--tape::before { content: ""; position: absolute; left: 50%; top: -10px; width: 68px; height: 20px; margin-left: -34px; transform: rotate(var(--tr, -3deg)); background: rgba(255, 244, 194, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); opacity: .9; z-index: 2; }
.photo--tape.photo--tape-rose::before { background: rgba(249, 217, 227, .8); }
.photo--tape.photo--tape-mint::before { background: rgba(215, 241, 225, .85); }
.photo--tape.photo--tape-sky::before { background: rgba(224, 242, 254, .85); }
.photo--corner::before, .photo--corner::after { display: none; }
.pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--violet) 60%); box-shadow: 0 3px 5px rgba(0, 0, 0, .25); z-index: 3; }

/* cover */
.cover { background: linear-gradient(145deg, #E9E4FA, #DCD4F5 70%, #D3C9F2); color: var(--violet); }
.cover .pg { justify-content: space-between; }
.cover__kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; opacity: .75; display: flex; align-items: center; gap: 12px; }
.cover__kicker::after { content: ""; flex: 1; height: 1px; background: rgba(109, 91, 186, .3); }
.cover__title { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(44px, 5.4vw, 84px); line-height: .95; letter-spacing: -.02em; filter: drop-shadow(0 10px 20px rgba(109, 91, 186, .2)); }
.cover__name { font-family: var(--font-hand); font-weight: 700; font-size: clamp(22px, 2.3vw, 34px); margin-top: 12px; opacity: .9; }
.cover__hint { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; opacity: .75; }
.cover__hint span { display: inline-block; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.cover__flowers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cover__flowers .pf { filter: none; }
.inside-cover { background: linear-gradient(135deg, #DCD4F5, #CFC4EF); }
.inside-cover .pg { justify-content: flex-end; align-items: flex-end; text-align: right; }
.inside-cover .pg.cover-photo { justify-content: center; align-items: center; padding: 7% 12% 7% 9%; }
.cover-photo .photo { position: relative; --r: -2.5deg; width: auto; height: 100%; max-width: 100%; padding: 8px 8px 30px; }
.cover-photo .photo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.end-page { background: #FFF8DC; }
.end-page .pg { justify-content: center; align-items: center; text-align: center; gap: 12px; }
.end-page .hand { font-size: clamp(30px, 3vw, 46px); }

/* progress + arrows */
.book-ui { position: fixed; left: 0; right: 0; bottom: 22px; z-index: 60; display: flex; justify-content: center; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--violet); }
.book-ui__btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--violet); display: grid; place-items: center; background: rgba(255, 253, 240, .7); transition: background .3s, color .3s, transform .3s var(--ease-out); }
.book-ui__btn:hover { background: var(--violet); color: var(--cream); transform: scale(1.06); }
.book-ui__btn[disabled] { opacity: .3; pointer-events: none; }
.book-ui__dots { display: flex; gap: 8px; }
.book-ui__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(109, 91, 186, .25); transition: background .3s, transform .3s; }
.book-ui__dots i.is-on { background: var(--violet); transform: scale(1.3); }

/* ---------- mobile: vertical story ---------- */
.story-mobile { display: none; }
@media (max-width: 760px), (max-height: 540px) {
  body.story { overflow: auto; height: auto; }
  .desk, .book-ui { display: none; }
  .story-mobile { display: block; position: relative; z-index: 2; padding: calc(var(--nav-h) + 10px) 18px 60px; }
  .story-mobile .page-head { padding: 0 2px 20px; }
  .mcover { position: relative; margin: 0 0 30px; padding: 8px 8px 26px; background: #fff; transform: rotate(-1.5deg); box-shadow: 0 18px 30px -16px rgba(74, 61, 140, .45); }
  .mcover img { width: 100%; display: block; }
  .mcard { position: relative; margin: 0 0 34px; padding: 26px 22px 24px 34px; border-radius: 6px 14px 14px 6px; box-shadow: 0 20px 36px -18px rgba(74, 61, 140, .4); }
  .mcard__rings { position: absolute; left: -8px; top: 0; bottom: 0; width: 20px; display: flex; flex-direction: column; justify-content: space-evenly; }
  .mcard__rings i { display: block; width: 20px; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #cfcbd4 0%, #fcfbfa 30%, #b8b3ae 80%, #9e9a95 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .2); }
  .mcard .pg__text { font-size: 17px; margin: 14px 0 18px; max-width: none; }
  .mcard__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .mcard__photos .photo { position: relative; --r: 0deg; }
  .mcard__photos .photo:nth-child(odd) { --r: -2deg; } .mcard__photos .photo:nth-child(even) { --r: 2deg; }
  .mcard__photos .photo img { aspect-ratio: 4 / 5; }
  .mcard__photos .photo--wide { grid-column: span 2; } .mcard__photos .photo--wide img { aspect-ratio: 3 / 2; }
  .mcard__photos .photo:only-child, .mcard__photos .photo:nth-child(3):last-child { grid-column: span 2; } .mcard__photos .photo:nth-child(3):last-child img { aspect-ratio: 4 / 3; }
}