/* Animated details sit behind copy or at the edge of the illustration. */
.living-block { position:relative; isolation:isolate; }
.living-detail { position:absolute; right:17px; top:10px; width:30px; height:64px; z-index:2; pointer-events:none; color:#d8bba0; opacity:.55; transform:rotate(var(--living-turn,0deg)); transform-origin:top; }
.living-thread { display:block; height:25px; width:1px; background:#d4b09888; margin:auto; }
.living-charm { display:block; font:24px/28px var(--serif); text-align:center; font-style:normal; transform-origin:50% -25px; animation:living-pendulum 5s var(--living-offset,0s) ease-in-out infinite alternate paused; }
.living-spark { position:absolute; right:-4px; top:25px; font:13px var(--serif); opacity:.5; animation:living-star 4s var(--living-offset,0s) ease-in-out infinite alternate paused; }
.living-border { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; overflow:visible; }
.living-border rect { fill:none; stroke:#d6b79c; stroke-width:.8px; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--living-draw,0)); opacity:.65; }
.living-in-view .living-charm,.living-in-view .living-spark { animation-play-state:running; }
.living-block:where(.rule-card,.rules-detail-card,.staff-rules-card) .living-detail { right:10px; width:19px; top:0; }
.living-block:where(.rule-card,.rules-detail-card,.staff-rules-card) .living-thread { height:34px; width:8px; background:linear-gradient(#9b496c,#543043); clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%); }
.living-block:where(.rule-card,.rules-detail-card) .living-charm { font-size:15px; line-height:20px; }
.living-block:where(.media-link-card,.duo-feature-card) .living-border { inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); }
.living-block:where(.media-link-card,.duo-feature-card) .living-border rect { stroke-dasharray:.015 .009; stroke-dashoffset:calc(var(--living-draw,0) * -.2); }
.living-block:where(.owner-card,.admin-channel-card) .living-detail { width:40px; height:80px; }
.living-block:where(.owner-card,.admin-channel-card) .living-thread { height:40px; }
.living-block:where(.role-catalog-card) .occupied-role-tags { transform:translateY(var(--living-lift,0px)); }
.living-block:where(.role-catalog-card) .living-charm { font-size:18px; }
.living-block .moon-frame::after { translate:0 var(--living-lift,0px); }
@keyframes living-pendulum { from { rotate:-10deg; } to { rotate:10deg; } }
@keyframes living-star { from { opacity:.2; scale:.8; } to { opacity:.85; scale:1.1; } }

.moon-passage { --passage-progress:.5; --passage-reveal:1; position:relative; margin-block:70px; }
.moon-passage.passage-enabled { height:180svh; }
.passage-pin { display:grid; grid-template-columns:1.15fr 1fr; position:relative; border:1px solid #c8aa9661; border-radius:4px 30px 4px 30px; background:#19121d; overflow:hidden; isolation:isolate; min-height:530px; }
.passage-enabled .passage-pin { position:sticky; top:106px; height:min(720px,calc(100svh - 128px)); min-height:530px; }
.passage-visual { position:relative; isolation:isolate; overflow:hidden; min-height:360px; }
.passage-backdrop { position:absolute; inset:-5%; width:110%; height:110%; object-fit:cover; opacity:.7; transform:translate(var(--passage-look-x,0px),calc(var(--passage-look-y,0px) - var(--passage-progress) * 22px)) scale(calc(1 + var(--passage-progress) * .12)); }
.passage-otherworld { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; clip-path:circle(0% at var(--passage-light-x,50%) var(--passage-light-y,50%)); transition:clip-path 700ms var(--moon-ease); }
.passage-lit .passage-otherworld { clip-path:circle(38% at var(--passage-light-x,50%) var(--passage-light-y,50%)); }
.passage-unveiled .passage-otherworld { clip-path:circle(90% at 54% 38%); }
.passage-visual::after { content:''; position:absolute; z-index:8; inset:0; background:linear-gradient(90deg,transparent 65%,#19121d),linear-gradient(0deg,#19121d,transparent 35%); pointer-events:none; }
.passage-astrolabe { position:absolute; z-index:1; inset:8%; width:84%; height:84%; fill:none; stroke:#dfc3a7; stroke-width:.7; transform:rotate(calc(var(--passage-progress) * 110deg)); opacity:.7; }
.passage-astrolabe path { stroke-dasharray:1200; stroke-dashoffset:calc(1200 - var(--passage-progress) * 1200); }
.passage-astrolabe .passage-ring { animation:living-orbit 35s linear infinite paused; transform-origin:300px 300px; }
.living-in-view .passage-ring { animation-play-state:running; }
.passage-person { position:absolute; z-index:calc(3 + var(--person-center,0)); width:48%; height:86%; left:calc(50% + (var(--person-i) - 1) * 27%); bottom:0; margin-left:-24%; transform:translate(var(--person-shift,0px),var(--person-rise,0px)); }
.passage-person:nth-child(2) { --person-center:1; }
.passage-person img { width:100%; height:100%; object-fit:contain; object-position:center bottom; mask-image:linear-gradient(#000 65%,transparent 100%); animation:living-breathe 6s var(--person-delay,0s) ease-in-out infinite alternate paused; }
.living-in-view .passage-person img { animation-play-state:running; }
.passage-person.is-side { opacity:var(--person-opacity,var(--passage-reveal)); }
.passage-person.is-main { z-index:6; width:66%; margin-left:-33%; height:99%; }
.puppet-square { position:absolute; width:108%; aspect-ratio:1; left:-4%; bottom:0; transform-origin:54.2% 35.7%; transform:translate(var(--puppet-head-x,0px),var(--puppet-head-y,0px)) rotate(var(--puppet-lean,0deg)) scale(var(--puppet-scale,1)); transition:transform 550ms var(--moon-ease); }
.puppet-breath { position:absolute; inset:0; animation:puppet-breathe 6s -2s ease-in-out infinite alternate paused; transform-origin:54.2% 35.7%; }
.passage-person .puppet-square img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; mask-image:none; animation:none; pointer-events:none; }
.passage-person .puppet-square .puppet-body { mask-image:linear-gradient(#000 76%,transparent 100%); }
.puppet-square .puppet-eye { z-index:2; clip-path:ellipse(4.9% 1.35% at 54.2% 35.7%); translate:var(--puppet-eye-x,0px) var(--puppet-eye-y,0px); transition:translate 200ms var(--moon-ease); }
.passage-person .puppet-square .puppet-blink { z-index:3; clip-path:ellipse(5.2% 1.8% at 54.2% 35.7%); opacity:0; animation:puppet-blink 5.8s 1.7s infinite paused; }
.living-in-view .puppet-breath,.living-in-view .passage-person .puppet-blink { animation-play-state:running; }
.passage-touched .puppet-breath { animation:puppet-nod 800ms var(--moon-ease) both; }
.passage-touched .passage-person .puppet-blink { animation:puppet-touch-blink 800ms linear both; }
.passage-key { position:absolute; z-index:10; top:18px; right:18px; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid #e2c4a77a; background:#201522cc; color:#ead3b6; cursor:pointer; transition:background 250ms,box-shadow 250ms; }
.passage-key span { font:27px/1 var(--serif); transition:rotate 650ms var(--moon-ease); }
.passage-key[aria-pressed=true] { background:#603748; box-shadow:0 0 28px #ddb4a33b; }
.passage-key[aria-pressed=true] span { rotate:180deg; }
.passage-key:focus-visible { outline:2px solid #edd6b2; outline-offset:4px; }
.passage-key:disabled { display:none; }
/* Flying birds stay above the cast and behind every portrait, including Feitan. */
.passage-raven { position:absolute; z-index:2; width:28%; aspect-ratio:1; left:4%; top:4%; transform:translate(var(--bird-x,0px),var(--bird-y,0px)) rotate(var(--bird-turn,-10deg)); pointer-events:none; }
.passage-raven.is-second { left:72%; top:7%; width:22%; transform:translate(var(--bird-x,0px),var(--bird-y,0px)) scaleX(-1) rotate(var(--bird-turn,15deg)); }
.passage-raven i { position:absolute; inset:0; background:url('assets/mms-raven-flight-v1.webp') center/contain no-repeat; }
.passage-raven .bird-body { clip-path:polygon(34% 28%,65% 28%,73% 100%,28% 100%); }
.passage-raven .bird-left { clip-path:polygon(0 0,45% 0,54% 55%,33% 72%,0 68%); transform-origin:48% 55%; animation:living-wing-left 1.5s ease-in-out infinite alternate paused; }
.passage-raven .bird-right { clip-path:polygon(55% 0,100% 0,100% 69%,64% 74%,48% 57%); transform-origin:51% 55%; animation:living-wing-right 1.5s ease-in-out infinite alternate paused; }
.living-in-view .passage-raven i { animation-play-state:running; }
.passage-flowers { position:absolute; z-index:7; inset:auto -8% -9% auto; width:55%; aspect-ratio:1; background:url('assets/mms-lace-ornament-v1.webp') right bottom/contain no-repeat; opacity:.75; transform:translateY(calc((1 - var(--passage-progress)) * 80px)) rotate(calc(9deg - var(--passage-progress) * 16deg)); pointer-events:none; }
.passage-motes { position:absolute; inset:0; z-index:8; pointer-events:none; }
.passage-motes i { position:absolute; top:calc(var(--mote-i) * 11%); left:calc(var(--mote-i) * 13%); width:3px; height:3px; border-radius:50%; background:#ecd1b2; opacity:.5; animation:living-mote 7s calc(var(--mote-i) * -.9s) ease-in-out infinite paused; }
.living-in-view .passage-motes i { animation-play-state:running; }
.passage-copy { align-self:center; position:relative; z-index:9; padding:44px 40px 44px 18px; }
.passage-copy .eyebrow { color:#c7a7b7; font-size:9px; letter-spacing:.18em; }
.passage-copy h2 { font:500 clamp(38px,4vw,64px)/1 var(--serif); letter-spacing:-.025em; margin:16px 0 20px; color:#f3e3db; }
.passage-copy > p:not(.eyebrow) { font:13px/1.8 var(--body); color:#cdbcc9; }
.passage-links { display:grid; gap:10px; margin-top:22px; }
.passage-links a { display:flex; align-items:center; gap:12px; min-height:58px; padding:12px 14px; background:#261a2a; border:1px solid #c7a19b47; border-radius:7px 2px; color:#e8d1c5; font:12px var(--body); transform:translateX(calc((1 - var(--passage-reveal)) * var(--link-shift,20px) * .15)); transition:background 250ms,border-color 250ms; }
.passage-links a:hover { background:#41243a; border-color:#e4c4aa9c; }
.passage-links a span { font:22px var(--serif); color:#cba786; }
.passage-links a b { font-weight:500; min-width:0; overflow-wrap:anywhere; }
.passage-links a em { margin-left:auto; font:16px var(--serif); }
.passage-hint { margin-top:18px; font:italic 15px var(--serif); color:#ad8ca3; }
@keyframes living-orbit { to { rotate:360deg; } }
@keyframes living-breathe { from { translate:0 0; } to { translate:0 -9px; } }
@keyframes living-wing-left { from { rotate:-8deg; } to { rotate:8deg; } }
@keyframes living-wing-right { from { rotate:8deg; } to { rotate:-8deg; } }
@keyframes living-mote { 0%,100% { opacity:0; translate:0 18px; } 35%,65% { opacity:.7; translate:12px -20px; } }
@keyframes puppet-breathe { from { translate:0 0; scale:1; } to { translate:0 -5px; scale:1.008; } }
@keyframes puppet-blink { 0%,91%,100% { opacity:0; } 93%,95% { opacity:1; } }
@keyframes puppet-touch-blink { 0%,18%,45%,70%,100% { opacity:0; } 25%,35%,78%,86% { opacity:1; } }
@keyframes puppet-nod { 0%,100% { translate:0 0; rotate:0deg; } 35% { translate:0 5px; rotate:1deg; } 70% { translate:0 -2px; rotate:-.4deg; } }

/* A second scene on every page opens like a miniature lace theatre. */
.passage-theatre { --curtain:#482338; --curtain-dark:#241322; }
.passage-tone-silver { --curtain:#3d3b4a; --curtain-dark:#211e2d; }
.passage-tone-wine { --curtain:#522231; --curtain-dark:#2a1423; }
.passage-theatre .passage-pin { grid-template-columns:1fr 1.15fr; border-radius:30px 4px 30px 4px; background:#1c1420; }
.passage-theatre .passage-copy { grid-column:1; grid-row:1; padding:44px 18px 44px 40px; }
.passage-theatre .passage-visual { grid-column:2; grid-row:1; }
.passage-theatre .passage-visual::after { background:linear-gradient(90deg,#1c1420,transparent 30%),linear-gradient(0deg,#1c1420,transparent 35%); }
.passage-theatre .passage-backdrop { opacity:.6; }
.passage-theatre .passage-person.is-main { width:66%; margin-left:-33%; }
.passage-theatre .passage-person.is-side { width:47%; margin-left:-23.5%; left:calc(50% + (var(--person-i) - 1) * 30%); height:88%; bottom:5%; transform:translate(var(--person-shift,0px),var(--person-rise,0px)) rotate(calc((var(--person-i) - 1) * (1 - var(--passage-reveal)) * 9deg)); }
.passage-mirror { position:absolute; z-index:1; inset:9% 22% 4%; border:1px solid #d4b49a99; border-radius:48% 48% 4px 4px; box-shadow:0 0 0 7px #cfb18f12,0 0 0 8px #cfb18f44; background:linear-gradient(140deg,#e6ccd023,transparent 55%); transform:scale(calc(.87 + var(--passage-progress) * .13)); }
.passage-mirror i { position:absolute; top:14%; left:calc(50% + (var(--mirror-i,0)) * 25%); width:1px; height:58%; background:linear-gradient(transparent,#dfc5a98c,transparent); rotate:calc(var(--passage-progress) * 24deg - 12deg); }
.passage-mirror i:first-child { --mirror-i:-1; }
.passage-mirror i:last-child { --mirror-i:1; }
.passage-curtain { position:absolute; z-index:8; top:-2%; bottom:2%; width:52%; background:linear-gradient(90deg,var(--curtain-dark),transparent 22%,var(--curtain) 45%,var(--curtain-dark) 65%,var(--curtain) 82%,var(--curtain-dark)); border-bottom:1px solid #d4b79555; opacity:.93; pointer-events:none; }
.passage-curtain::after { content:''; position:absolute; inset:0; background:url('assets/mms-lace-ornament-v1.webp') center bottom/220px auto repeat-x; opacity:.28; }
.passage-curtain.is-left { left:-2%; border-radius:0 0 70% 0; transform-origin:left top; transform:translateX(calc(var(--passage-reveal) * -77%)) rotate(calc(var(--passage-reveal) * -8deg)); }
.passage-curtain.is-right { right:-2%; border-radius:0 0 0 70%; transform-origin:right top; transform:translateX(calc(var(--passage-reveal) * 77%)) rotate(calc(var(--passage-reveal) * 8deg)); }
.passage-unveiled .passage-curtain.is-left { transform:translateX(-77%) rotate(-8deg); }
.passage-unveiled .passage-curtain.is-right { transform:translateX(77%) rotate(8deg); }
.passage-unveiled .passage-person.is-side { opacity:1; }
.passage-theatre .passage-raven { top:4%; left:4%; width:26%; }
.passage-theatre .passage-raven.is-second { top:7%; left:72%; width:21%; }
.passage-theatre .passage-flowers { z-index:8; width:46%; left:-6%; right:auto; rotate:-12deg; }
.passage-petals { position:absolute; z-index:9; inset:0; pointer-events:none; }
.passage-petals i { position:absolute; left:calc(var(--petal-i) * 15%); top:calc(10% + var(--petal-i) * 8%); width:7px; height:12px; border-radius:70% 0 70% 30%; background:#a76b86; opacity:.6; transform:translate(calc(var(--passage-progress) * var(--petal-i) * -9px),calc(var(--passage-progress) * var(--petal-i) * 16px)) rotate(calc(var(--passage-progress) * var(--petal-i) * 30deg)); animation:living-star 4s calc(var(--petal-i) * -.6s) ease-in-out infinite alternate paused; }
.living-in-view .passage-petals i { animation-play-state:running; }
@media (max-width:720px) {
  .bento-card,.owner-card,.admin-channel-card { transform-style:flat; }
  .owner-card-copy,.channel-card-copy,.media-link-copy { transform:none; }
  .js [data-motion-kind=archive].block-revealed,.js [data-motion-kind=page].block-revealed { animation-name:living-mobile-entry; }
  .js [data-motion-kind=panorama].block-revealed,.js [data-motion-kind=ink].block-revealed { animation-name:living-mobile-fade; }
  .moon-passage { margin-block:38px; }
  .passage-pin { grid-template-columns:1fr; grid-template-rows:minmax(190px,1fr) auto; min-height:610px; border-radius:4px 22px; }
  .passage-enabled .passage-pin { top:92px; height:min(770px,calc(100svh - 108px)); min-height:540px; }
  .passage-visual { min-height:170px; }
  .passage-visual::after { background:linear-gradient(0deg,#19121d,transparent 32%); }
  .passage-copy { padding:0 24px 24px; }
  .passage-copy h2 { font-size:34px; margin:10px 0 12px; }
  .passage-copy > p:not(.eyebrow) { font-size:11px; line-height:1.65; margin-bottom:12px; }
  .passage-links { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; }
  .passage-links a { position:relative; flex-direction:column; align-items:flex-start; gap:4px; min-height:76px; padding:9px; font-size:10px; line-height:1.45; }
  .passage-links a span { font-size:18px; line-height:1; }
  .passage-links a em { position:absolute; right:8px; top:9px; font-size:13px; }
  .passage-hint { margin-top:12px; font-size:13px; }
  .passage-raven { width:24%; }
  .passage-raven.is-second { width:20%; }
  .passage-theatre .passage-raven { width:24%; }
  .passage-theatre .passage-raven.is-second { width:20%; }
  .passage-key { top:12px; right:12px; width:44px; height:44px; }
  .passage-theatre .passage-pin { grid-template-columns:1fr; }
  .passage-theatre .passage-visual { grid-column:1; grid-row:1; }
  .passage-theatre .passage-copy { grid-column:1; grid-row:2; padding:0 24px 24px; }
  .passage-theatre .passage-visual::after { background:linear-gradient(0deg,#1c1420,transparent 32%); }
  .passage-theatre .passage-person.is-main { width:66%; margin-left:-33%; }
  .passage-theatre .passage-curtain { opacity:.85; }
  .living-detail { right:10px; opacity:.45; }
}
@keyframes living-mobile-entry { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
@keyframes living-mobile-fade { from { opacity:0; } to { opacity:1; } }
html.motion-hidden .living-detail i,html.motion-hidden .moon-passage * { animation-play-state:paused!important; }
html.motion-paused .living-detail *,html.motion-paused .moon-passage * { animation:none!important; }
html.motion-paused .living-border rect { stroke-dashoffset:0; }
html.motion-paused .occupied-role-tags { transform:none!important; }
html.motion-paused .passage-person.is-side { opacity:1; }
html.motion-paused .puppet-square,html.motion-paused .puppet-eye { transform:none; translate:none; }
@media (prefers-reduced-motion:reduce) {
  .living-detail *,.moon-passage * { animation:none!important; transition:none!important; }
  .living-border rect { stroke-dashoffset:0; }
  .passage-person.is-side { opacity:1; }
}