/* A hand-drawn character chapter: scroll is the timeline, pointer light reveals another scene. */
.moon-character-chapter { position:relative; height:330svh; background:#100c15; isolation:isolate; }
.character-pin { position:sticky; top:86px; height:calc(100svh - 86px); min-height:540px; overflow:hidden; }
.character-stage { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate; background:#100c15; }
.character-backdrop { position:absolute; inset:-5%; z-index:-2; background:linear-gradient(90deg,#100c1599,#160e1a35 50%,#100c1570),url('assets/mms-scene-garden-v2.webp') center/cover; transform:scale(var(--character-bg-scale,1)); }
.character-stage::after { content:''; position:absolute; inset:0; z-index:5; background:linear-gradient(0deg,#100c15 0%,#100c15aa 12%,transparent 45%),linear-gradient(90deg,#100c1580,transparent 65%); pointer-events:none; }
.character-moon { position:absolute; z-index:-1; width:48vmin; aspect-ratio:1; top:8%; left:51%; border:1px solid #ddc3a767; border-radius:50%; background:radial-gradient(circle,#d4bcc522,#d4bcc508 67%,transparent 70%); box-shadow:0 0 0 14px #d7b99e09,0 0 0 15px #d7b99e20; transform:translateX(-50%) rotate(var(--character-moon-turn,0deg)); }
.character-moon::before { content:'☾'; position:absolute; top:-34px; left:calc(50% - 19px); font:58px var(--serif); color:#e0c7aa; }
.character-cast { position:absolute; z-index:1; left:61%; top:50%; height:107%; aspect-ratio:1; transform:translate(-50%,-47%) scale(var(--character-scale,1)) rotate(var(--character-turn,0deg)); transform-origin:54% 37%; will-change:transform; }
.character-puppet { width:100%; height:100%; transform:translate(var(--character-mouse-x,0px),var(--character-mouse-y,0px)); transition:transform 650ms var(--moon-ease); }
.character-puppet img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.character-eye { z-index:2; clip-path:ellipse(4.9% 1.35% at 54.2% 35.7%); translate:var(--character-eye-x,0px) var(--character-eye-y,0px); transition:translate 260ms var(--moon-ease); }
.character-blink { z-index:3; clip-path:ellipse(5.2% 1.8% at 54.2% 35.7%); opacity:0; animation:mei-blink 5.8s 1.7s infinite; animation-play-state:paused; }
.character-stage.is-active .character-blink { animation-play-state:running; }
@keyframes mei-blink { 0%,92%,100% { opacity:0; } 94%,96% { opacity:1; } }
.character-reveal { position:absolute; z-index:3; inset:0; width:100%; height:100%; pointer-events:none; }
.character-birds { position:absolute; z-index:4; inset:0; pointer-events:none; }
.raven-flight { position:absolute; width:min(53vw,660px); aspect-ratio:1; margin:0; will-change:transform; }
.raven-flight-one { left:-9%; top:27%; transform:translate(var(--raven-one-x,0px),var(--raven-one-y,0px)) rotate(var(--raven-one-turn,-12deg)); }
.raven-flight-two { right:-12%; top:-12%; width:min(50vw,620px); transform:translate(var(--raven-two-x,0px),var(--raven-two-y,0px)) rotate(var(--raven-two-turn,20deg)) scaleX(-1); }
.raven-flight-three { left:39%; top:3%; width:20vw; opacity:.4; filter:blur(1.5px); transform:translate(var(--raven-three-x,0px),var(--raven-three-y,0px)) rotate(-8deg); z-index:-1; }
.raven-flight img { position:absolute; inset:0; width:100%; height:100%; }
.raven-body { clip-path:polygon(38% 40%,66% 40%,72% 72%,91% 100%,42% 100%,28% 77%); }
.raven-wing-left { clip-path:polygon(0 0,45% 0,54% 55%,33% 72%,0 68%); transform-origin:48% 55%; animation:raven-left-wing 1700ms ease-in-out infinite alternate; animation-play-state:paused; }
.raven-wing-right { clip-path:polygon(55% 0,100% 0,100% 69%,64% 74%,48% 57%); transform-origin:51% 55%; animation:raven-right-wing 1700ms ease-in-out infinite alternate; animation-play-state:paused; }
.character-stage.is-active .raven-wing-left,.character-stage.is-active .raven-wing-right { animation-play-state:running; }
@keyframes raven-left-wing { from { rotate:-5deg; scale:1 .96; } to { rotate:7deg; scale:1 1.04; } }
@keyframes raven-right-wing { from { rotate:5deg; scale:1 .96; } to { rotate:-7deg; scale:1 1.04; } }
.character-captions { position:absolute; z-index:7; inset:auto 5% 112px; max-width:470px; min-height:170px; pointer-events:none; }
.character-caption { position:absolute; inset:auto 0 0; opacity:0; translate:0 16px; transition:opacity 500ms,translate 650ms var(--moon-ease); }
.character-caption.is-current { opacity:1; translate:0 0; pointer-events:auto; }
.character-caption .eyebrow { color:#d5b9c2; font-size:9px; letter-spacing:.22em; margin-bottom:16px; }
.character-caption h2,.character-caption h3 { color:#f1e4de; font:500 clamp(42px,5vw,72px)/1 var(--serif); margin:0 0 18px; letter-spacing:-.025em; text-transform:none; }
.character-caption h2 em,.character-caption h3 em { color:#d9a7bd; font-weight:500; }
.character-caption p:not(.eyebrow) { color:#dcc8d4; max-width:350px; font-size:13px; line-height:1.85; margin-bottom:20px; text-shadow:0 2px 12px #100c15; }
.character-caption .text-link { font-size:10px; pointer-events:auto; }
.character-bottom { position:absolute; z-index:8; bottom:30px; left:5%; right:5%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.character-hint { margin:0; font:italic 18px/1.4 var(--serif); color:#d1b4c2; max-width:300px; }
.character-hint-touch { display:none; }
.character-moon-key { display:flex; align-items:center; gap:10px; padding:10px 16px; min-height:48px; border:1px solid #dfc6aa66; border-radius:40px; color:#eed9c0; background:#1a101db0; backdrop-filter:blur(8px); font:10px var(--body); cursor:pointer; }
.character-moon-key span { font:26px var(--serif); transition:rotate 650ms var(--moon-ease); }
.character-moon-key[aria-pressed="true"] span { rotate:180deg; }
.character-meter { position:absolute; bottom:0; left:0; right:0; height:2px; background:#c5a4b226; z-index:8; }
.character-meter span { display:block; height:100%; background:linear-gradient(90deg,#843849,#e6ceb1); transform:scaleX(var(--character-progress,0)); transform-origin:left; }
.character-stage.is-alternate .character-backdrop { background-image:linear-gradient(90deg,#100c15aa,#160e1a44 50%,#100c1580),url('assets/mms-scene-room-v2.webp'); }
.character-static .moon-character-chapter { height:auto; }
.character-static .character-pin { position:relative; top:auto; height:760px; min-height:0; }
.character-static .character-caption:not(:first-child) { display:none; }
.character-static .character-caption:first-child { opacity:1; translate:none; }
.character-static .character-birds,.character-static .character-reveal,.character-static .character-hint,.character-static .character-meter { display:none; }
.character-static .character-moon-key { display:none; }
.character-static .character-cast { transform:translate(-50%,-47%); }
.character-static .character-blink { animation:none; opacity:0; }
html:not(.js) .moon-character-chapter { height:auto; }
html:not(.js) .character-pin { position:relative; top:auto; height:760px; }
html:not(.js) .character-moon-key { display:none; }

/* Reference-inspired states: the pointer is exact; only the soft trail follows with inertia. */
.moon-cursor-trail { position:fixed; z-index:11999; inset:0; width:100%; height:100%; pointer-events:none; }
.moon-cursor { width:30px; height:30px; margin:-15px; border-color:#e9ceb4b3; box-shadow:0 0 0 4px #d7bca018,inset 0 0 8px #e7c5bb28; }
.moon-cursor::after { content:'☾'; position:absolute; inset:0; display:grid; place-items:center; font:18px/1 var(--serif); color:#f1dfc5; transition:rotate 300ms; }
.moon-cursor::before { content:'✧'; top:-9px; left:8px; font-size:12px; transform-origin:7px 24px; animation-duration:8s; }
.moon-cursor.is-link { width:48px; height:48px; margin:-24px; box-shadow:0 0 0 5px #d7bca026,0 0 24px #d9b4a339; background:#ead4b41a; }
.moon-cursor.is-link::after { rotate:-35deg; font-size:26px; }
.moon-cursor.is-down { width:20px; height:20px; margin:-10px; border-color:#f2d9ad; background:#e9cfaa30; }
.moon-cursor.is-down::after { font-size:11px; }
@media(hover:hover) and (pointer:fine) {
  html.moon-pointer,html.moon-pointer body,html.moon-pointer :where(a,button,summary,[role="button"]),html.moon-pointer .character-stage { cursor:none; }
  html.moon-pointer :where(input,textarea,[contenteditable="true"]) { cursor:text; }
}
@media(hover:none),(pointer:coarse) {
  .character-hint-desktop { display:none; }
  .character-hint-touch { display:inline; }
  .moon-cursor-trail { display:none; }
}
@media(max-width:720px) {
  .moon-character-chapter { height:300svh; }
  .character-pin { top:84px; height:calc(100svh - 84px); min-height:560px; }
  .character-cast { left:54%; height:90%; top:42%; transform:translate(-50%,-43%) scale(var(--character-scale,1)) rotate(var(--character-turn,0deg)); }
  .character-captions { inset:auto 24px 118px; max-width:300px; min-height:130px; }
  .character-caption h2,.character-caption h3 { font-size:42px; margin-bottom:12px; }
  .character-caption p:not(.eyebrow) { max-width:290px; font-size:12px; line-height:1.7; margin-bottom:12px; }
  .character-caption .eyebrow { font-size:8px; margin-bottom:10px; }
  .character-stage::after { background:linear-gradient(0deg,#100c15 0%,#100c15bc 28%,transparent 62%); }
  .raven-flight-one { width:86vw; top:20%; left:-38%; }
  .raven-flight-two { width:92vw; right:-48%; top:0; }
  .raven-flight-three { width:40vw; left:30%; top:5%; }
  .character-bottom { bottom:24px; left:24px; right:24px; gap:12px; align-items:flex-end; }
  .character-hint { font-size:15px; max-width:170px; }
  .character-hint-desktop { display:none; }
  .character-hint-touch { display:inline; }
  .character-moon-key { font-size:9px; padding:8px 12px; gap:6px; }
  .character-moon-key span { font-size:22px; }
  .character-moon { top:10%; width:58vw; }
  .character-static .character-pin { height:720px; }
}