/* Five illustrated chapters: archive, guardians, constellation, codex, film. */
.illustrated-chapter { --chapter-p:0; position:relative; margin-top:60px; margin-bottom:40px; }
.illustrated-chapter.chapter-enabled { height:260svh; }
.chapter-stage { position:relative; display:grid; grid-template-columns:1.65fr 1fr; min-height:620px; overflow:hidden; isolation:isolate; background:#18111d; border:1px solid #c5ab9769; border-radius:24px 4px 24px 4px; box-shadow:0 22px 70px #0005; }
.chapter-enabled .chapter-stage { position:sticky; top:108px; height:calc(100svh - 132px); min-height:530px; max-height:850px; }
.chapter-stage::after { content:''; position:absolute; inset:12px; border:1px solid #d3b79e2b; border-radius:16px 2px 16px 2px; z-index:6; pointer-events:none; }
.chapter-visual { position:relative; min-width:0; overflow:hidden; perspective:1200px; isolation:isolate; }
.chapter-backdrop { position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; opacity:.62; transform:translate3d(var(--chapter-look-x,0px),calc(var(--chapter-p) * -32px + var(--chapter-look-y,0px)),0) scale(calc(1 + var(--chapter-p) * .06)); }
.chapter-visual::after { content:''; position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(90deg,transparent 60%,#18111d),linear-gradient(0deg,#18111d,transparent 22%); }
.chapter-copy { align-self:center; padding:50px 42px 50px 22px; position:relative; z-index:7; }
.chapter-copy .eyebrow { color:#c3a3b2; font-size:9px; letter-spacing:.15em; }
.chapter-copy > h2 { font:500 clamp(36px,3.7vw,62px)/.95 var(--serif); color:#f2e5df; margin:16px 0 28px; }
.chapter-captions { display:grid; min-height:165px; }
.chapter-caption { grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(18px); transition:opacity 500ms,transform 600ms var(--moon-ease),visibility 500ms; }
.chapter-caption.is-active { opacity:1; visibility:visible; transform:none; }
.chapter-caption h3 { font:500 28px/1.1 var(--serif); margin:0 0 12px; color:#e9cdbb; }
.chapter-caption p { font:13px/1.8 var(--body); color:#cabcc9; margin-bottom:16px; }
.chapter-caption a { display:inline-flex; align-items:center; min-height:44px; color:#e7d1be; font:10px var(--body); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid #b797a252; }
.chapter-caption a:hover { color:#fff2df; border-color:#e6cbb5; }
.chapter-navigation { display:flex; gap:10px; margin-top:24px; align-items:center; }
.chapter-navigation button { width:44px; height:44px; border:1px solid #b69da746; border-radius:50%; background:#251b2c; color:#cfb5c3; font:14px var(--serif); cursor:pointer; transition:background 300ms,rotate 500ms; }
.chapter-navigation button[aria-pressed=true] { background:#6d4055; color:#ffe9cf; border-color:#e0c4a9; }
.chapter-navigation button:hover { rotate:-12deg; }
.chapter-scroll-hint { margin-top:20px; font:italic 15px var(--serif); color:#b598aa; }
.chapter-scroll-line { height:1px; margin-top:20px; background:#ab879536; transform-origin:left; }
.chapter-scroll-line::after { content:''; display:block; width:100%; height:1px; background:#ebccb1; transform:scaleX(var(--chapter-p)); transform-origin:left; }
.chapter-moon { position:absolute; width:170px; aspect-ratio:1; border:1px solid #e5c6a378; border-radius:50%; left:calc(50% - 85px); top:13%; box-shadow:0 0 55px #e1b6c11c,inset 0 0 40px #ecd0b512; transform:rotate(calc(var(--chapter-p) * 80deg)); }
.chapter-moon::before { content:'☾'; position:absolute; inset:0; text-align:center; color:#dfc6a4; font:140px/170px var(--serif); }
.chapter-petals { position:absolute; inset:0; z-index:5; pointer-events:none; }
.chapter-petals i { position:absolute; left:calc(var(--petal-i) * 13%); top:-12%; width:12px; height:20px; border-radius:90% 8% 85% 12%; background:linear-gradient(120deg,#aa566a,#351629); transform:translateY(calc(var(--chapter-p) * 680px)) rotate(calc(var(--petal-i) * 35deg + var(--chapter-p) * 250deg)); opacity:.65; }
.chapter-petals i:nth-child(even) { width:9px; height:15px; top:10%; }
/* An album opens, then its portrait cards lift from the page. */
.chapter-book { position:absolute; z-index:2; left:8%; width:84%; height:44%; bottom:12%; display:flex; filter:drop-shadow(0 22px 15px #0008); transform:rotateX(calc(42deg - var(--chapter-p) * 30deg)) rotateZ(-6deg); transform-style:preserve-3d; }
.chapter-book-page { position:relative; width:50%; background:#dbc8b3; border:8px double #6e4d47; box-shadow:inset 0 0 45px #58403a52; padding:10px; overflow:hidden; }
.chapter-book-page:first-child { transform-origin:right center; transform:rotateY(calc(-65deg + var(--chapter-p) * 60deg)); border-radius:10px 0 0 10px; }
.chapter-book-page:last-child { transform-origin:left center; transform:rotateY(calc(65deg - var(--chapter-p) * 60deg)); border-radius:0 10px 10px 0; }
.chapter-book-page img { width:100%; height:100%; object-fit:cover; }
.chapter-archive-portraits { position:absolute; inset:9% 13% 30%; z-index:3; display:flex; justify-content:center; align-items:center; gap:12px; }
.chapter-archive-portraits img { width:30%; height:87%; object-fit:cover; object-position:50% 20%; border:5px double #d5b79c; border-radius:42% 42% 3px 3px; box-shadow:0 18px 22px #0006; transform:translateY(calc((1 - var(--chapter-p)) * 90px)) rotate(calc((var(--portrait-i) - 1) * (1 - var(--chapter-p)) * 15deg)); }
.chapter-archive-portraits img:first-child { object-fit:cover; background:#241929; }
/* Three guardians fan out from separate depths. */
.chapter-guardians { position:absolute; inset:9% 4% 12%; z-index:3; }
.chapter-guardian { position:absolute; top:3%; left:50%; width:36%; height:92%; margin-left:-18%; border:5px double #ccb59b; border-radius:45% 45% 4px 4px; background:linear-gradient(#3c283b,#18121d); overflow:hidden; box-shadow:0 20px 45px #0008; transform:translateX(calc((var(--guardian-i) - 1) * (30px + var(--chapter-p) * 185px))) translateY(calc((var(--guardian-i) - 1) * (var(--guardian-i) - 1) * 32px)) rotate(calc((var(--guardian-i) - 1) * (12deg - var(--chapter-p) * 10deg))); }
.chapter-guardian:nth-child(2) { z-index:3; }
.chapter-guardian.is-featured { z-index:5; }
.chapter-guardian img { width:100%; height:100%; object-fit:cover; object-position:center 16%; }
.chapter-guardian img { transition:filter 450ms; }
.chapter-guardian:not(.is-featured) img { filter:brightness(.85); }
.chapter-guardian span { position:absolute; inset:auto 0 0; padding:22px 10px; text-align:center; background:linear-gradient(transparent,#140e1dee); font:24px var(--serif); color:#ead2bb; }
/* Staff faces orbit Mei Mei on a drawn constellation. */
.chapter-constellation { position:absolute; inset:3%; z-index:3; }
.chapter-stars { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:#d6b798; stroke-width:.7; stroke-dasharray:1100; stroke-dashoffset:calc(1100 - var(--chapter-p) * 1100); opacity:.8; }
.chapter-central-mei { position:absolute; width:58%; height:80%; left:21%; bottom:5%; object-fit:contain; mask-image:linear-gradient(#000 75%,transparent 99%); filter:drop-shadow(0 0 20px #a2688530); transform:translateY(calc(var(--chapter-p) * -22px)); }
.chapter-orbit-person { position:absolute; z-index:4; inset:0; transform:translate(var(--orbit-x,25%),var(--orbit-y,20%)); pointer-events:none; }
.chapter-orbit-person figure { position:absolute; left:50%; top:50%; margin:-64px; width:128px; height:128px; }
.chapter-orbit-person img { width:100%; height:100%; object-fit:cover; object-position:center 20%; border:4px double #d8bea4; border-radius:50%; background:#2b1a2d; box-shadow:0 0 30px #ce97b42e; }
.chapter-orbit-person figcaption { text-align:center; font:18px var(--serif); color:#f2d4c0; margin-top:6px; text-shadow:0 2px 8px #000; }
/* A wax-sealed codex opens; its pages turn independently. */
.chapter-envelope { position:absolute; z-index:3; left:10%; bottom:17%; width:64%; height:45%; background:#cdb49d; border:1px solid #edcfae; box-shadow:0 24px 30px #0008; transform:rotate(-8deg) translateY(calc(var(--chapter-p) * 20px)); perspective:700px; }
.chapter-envelope::after { content:''; position:absolute; inset:0; background:linear-gradient(31deg,#baa18b 49.5%,transparent 50%) left/51% 100% no-repeat,linear-gradient(-31deg,#d9c1a8 49.5%,transparent 50%) right/51% 100% no-repeat; pointer-events:none; }
.chapter-envelope::before { content:''; position:absolute; z-index:7; right:-2%; bottom:-2%; width:34%; height:44%; background:url('assets/mms-lace-ornament-v1.webp') right bottom/contain no-repeat; opacity:.7; pointer-events:none; }
.chapter-codex-page::after { content:''; position:absolute; inset:4px; background:url('assets/mms-tracery.svg') center/100% 100% no-repeat; opacity:.35; pointer-events:none; }
.chapter-envelope-flap { position:absolute; z-index:5; inset:0; background:#e0cab3; clip-path:polygon(0 0,100% 0,50% 66%); transform-origin:top center; transform:rotateX(calc(var(--chapter-p) * -165deg)); backface-visibility:hidden; }
.chapter-wax { position:absolute; z-index:6; left:calc(50% - 35px); top:40%; width:70px; height:70px; display:grid; place-items:center; border:4px double #b2757b; border-radius:48%; background:radial-gradient(#853346,#471624); box-shadow:0 5px 9px #0005; color:#eccaa9; font:42px var(--serif); transform:translateY(calc(var(--chapter-p) * 150px)) rotate(calc(var(--chapter-p) * 80deg)); opacity:calc(1 - var(--chapter-p) * .85); }
.chapter-codex-page { position:absolute; inset:8%; padding:18px; background:#ead8c1; color:#422735; border:5px double #967160; transform:translateY(calc(var(--chapter-p) * -65%)) rotate(calc(var(--chapter-p) * 12deg)); }
.chapter-codex-page span { display:block; text-align:center; font:52px var(--serif); margin-top:5%; }
.chapter-codex-page p { font:18px/1.4 var(--serif); margin-top:10px; text-align:center; }
.chapter-codex-mei { position:absolute; z-index:2; right:-9%; bottom:4%; width:57%; height:85%; object-fit:contain; transform:translateY(calc(var(--chapter-p) * -25px)); }
/* A physical strip of illustrated frames pans through the media chapter. */
.chapter-film { position:absolute; inset:13% auto 13% 10%; width:300%; display:flex; gap:24px; padding:22px 0; background:#100c16; border-block:10px dotted #bda28e; transform:translateX(calc(var(--film-p,0) * -66.66%)) rotate(calc(-7deg + var(--chapter-p) * 14deg)); }
.chapter-film figure { flex:1; min-width:0; margin:0; border:1px solid #d7bfa59c; background:#251725; }
.chapter-film img { display:block; width:100%; height:100%; object-fit:cover; }
.chapter-film-spark { position:absolute; inset:0; z-index:3; background:linear-gradient(100deg,transparent 25%,#efcdaf24 49%,transparent 55%); transform:translateX(calc(-100% + var(--chapter-p) * 200%)); pointer-events:none; }
.chapter-still .chapter-stage { min-height:600px; }
.chapter-still .chapter-captions { gap:22px; }
.chapter-still .chapter-caption { grid-area:auto; opacity:1; visibility:visible; transform:none; }
.chapter-still .chapter-navigation,.chapter-still .chapter-scroll-hint,.chapter-still .chapter-scroll-line { display:none; }
/* Each content family has its own entrance and subtle scroll response. */
.js [data-motion-kind].block-revealed { animation:chapter-ink 900ms var(--block-delay,0ms) var(--moon-ease) backwards; }
.js [data-motion-kind=portrait].block-revealed { animation-name:chapter-portrait; animation-duration:1100ms; }
.js [data-motion-kind=archive].block-revealed { animation-name:chapter-archive; }
.js [data-motion-kind=page].block-revealed { animation-name:chapter-page; animation-duration:1000ms; }
.js [data-motion-kind=film].block-revealed { animation-name:chapter-film; }
.js [data-motion-kind=step].block-revealed { animation-name:chapter-step; }
.js [data-motion-kind=ribbon].block-revealed { animation-name:chapter-ribbon; }
.js [data-motion-kind=panorama].block-revealed { animation-name:chapter-panorama; animation-duration:1200ms; }
.block-in-view .owner-card-media img,.block-in-view .channel-portrait img { translate:0 var(--block-drift,0px); scale:calc(1 + var(--block-travel,0) * .035); }
.block-in-view .media-link-card-scene img,.block-in-view .final-cta-media img,.block-in-view .duo-feature-card img { translate:var(--block-drift,0px) 0; scale:1.04; }
.block-in-view .moon-frame::before { opacity:calc(.35 + var(--block-travel,.5) * .5); }
.block-in-view .moon-frame::after { rotate:calc(-5deg + var(--block-travel,.5) * 10deg); }
@keyframes chapter-ink { from { opacity:0; filter:blur(5px); } to { opacity:1; filter:none; } }
@keyframes chapter-portrait { from { opacity:0; clip-path:inset(95% 0 0); } to { opacity:1; clip-path:inset(0); } }
@keyframes chapter-archive { from { opacity:0; transform:perspective(900px) rotateY(-18deg) translateX(-30px); } to { opacity:1; transform:none; } }
@keyframes chapter-page { from { opacity:0; transform:perspective(1200px) rotateX(-16deg) translateY(28px); transform-origin:top; } to { opacity:1; transform:none; } }
@keyframes chapter-film { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0); } }
@keyframes chapter-step { from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:none; } }
@keyframes chapter-ribbon { from { opacity:0; clip-path:inset(0 50%); } to { opacity:1; clip-path:inset(0); } }
@keyframes chapter-panorama { from { opacity:0; clip-path:inset(8% 2%); filter:brightness(.6); } to { opacity:1; clip-path:inset(0); filter:none; } }
@media (max-width:900px) {
  .chapter-stage { grid-template-columns:1.3fr 1fr; }
  .chapter-copy { padding-right:28px; }
  .chapter-orbit-person figure { width:96px; height:96px; margin:-48px; }
  .chapter-guardian { transform:translateX(calc((var(--guardian-i) - 1) * (20px + var(--chapter-p) * 130px))) translateY(12px) rotate(calc((var(--guardian-i) - 1) * 8deg)); }
}
@media (max-width:720px) {
  .illustrated-chapter { margin-top:32px; }
  .chapter-stage { grid-template-columns:1fr; grid-template-rows:minmax(250px,1fr) auto; min-height:610px; border-radius:18px 3px; }
  .chapter-enabled .chapter-stage { top:92px; height:calc(100svh - 108px); min-height:545px; }
  .chapter-visual::after { background:linear-gradient(0deg,#18111d,transparent 24%); }
  .chapter-copy { padding:0 28px 25px; }
  .chapter-copy > h2 { font-size:34px; margin:10px 0 14px; }
  .chapter-caption h3 { font-size:23px; margin-bottom:7px; }
  .chapter-caption p { font-size:11px; line-height:1.65; margin-bottom:5px; }
  .chapter-captions { min-height:135px; }
  .chapter-navigation { margin-top:8px; }
  .chapter-navigation button { width:44px; height:44px; }
  .chapter-scroll-hint { margin-top:8px; font-size:13px; }
  .chapter-scroll-line { margin-top:10px; }
  .chapter-guardians { inset:3% 7% 0; }
  .chapter-guardian { width:34%; height:96%; transform:translateX(calc((var(--guardian-i) - 1) * (20px + var(--chapter-p) * 98px))) translateY(8px) rotate(calc((var(--guardian-i) - 1) * 8deg)); }
  .chapter-guardian span { padding:16px 3px 12px; font-size:19px; }
  .chapter-moon { width:120px; left:calc(50% - 60px); }
  .chapter-moon::before { font-size:100px; line-height:120px; }
  .chapter-orbit-person figure { width:76px; height:76px; margin:-38px; }
  .chapter-orbit-person figcaption { font-size:14px; margin-top:1px; }
  .chapter-constellation { inset:8% 5% 13%; }
  .chapter-central-mei { width:62%; left:19%; bottom:0; height:96%; }
  .chapter-film { inset:9% auto 15% 10%; }
  .chapter-book { bottom:10%; height:42%; }
  .chapter-archive-portraits { inset:4% 15% 35%; gap:6px; }
  .chapter-codex-page { padding:10px; border-width:3px; }
  .chapter-codex-page span { font-size:38px; }
  .chapter-codex-page p { font-size:13px; }
  .chapter-wax { width:48px; height:48px; left:calc(50% - 24px); font-size:30px; }
  .chapter-still .chapter-stage { grid-template-rows:340px auto; }
}
html.motion-paused [data-motion-kind],html.motion-paused [data-motion-kind].block-revealed { animation:none!important; opacity:1; transform:none; clip-path:none; filter:none; }
html.motion-paused .block-in-view img { translate:none; scale:1; }
html.motion-paused .chapter-guardian img { filter:none; }
html:not(.js) .chapter-caption { grid-area:auto; opacity:1; visibility:visible; transform:none; margin-bottom:20px; }
html:not(.js) .chapter-navigation,html:not(.js) .chapter-scroll-hint { display:none; }
html.motion-hidden [data-motion-kind] { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  [data-motion-kind],[data-motion-kind].block-revealed { animation:none!important; opacity:1!important; transform:none!important; clip-path:none!important; filter:none!important; }
  .chapter-caption,.chapter-backdrop { transition:none; }
}