/* Slow, decorative motion stays separate from text and interactive controls. */
.illustrated-overlay{background:#0b09118a;backdrop-filter:blur(3px)}
.menu-scene{--scene-light:#e9b97c;position:relative;isolation:isolate;overflow:hidden;margin:0;background:#15131c;pointer-events:none;min-width:0}
.menu-scene-backdrop{position:absolute;inset:-4%;background:url('./assets/title-scene.png') center 45%/cover no-repeat;opacity:.52;transform:scale(1.025);animation:menu-scene-drift 22s ease-in-out infinite}
.menu-scene::after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,#121019 0%,#121019b3 12%,transparent 55%),linear-gradient(90deg,#1310194d,transparent 65%)}
.menu-scene-light{position:absolute;inset:-12%;z-index:1;background:radial-gradient(ellipse at 60% 34%,color-mix(in srgb,var(--scene-light) 30%,transparent),transparent 62%);opacity:.45;animation:menu-scene-glow 6s ease-in-out infinite}
.menu-scene-portrait{position:absolute;inset:6% -8% 4% 3%;z-index:2;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 84%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 84%,transparent)}
.menu-scene-portrait canvas{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%;transform-origin:50% 85%;transform:scale(1.035);animation:menu-portrait-breathe 7s ease-in-out infinite;mask-image:linear-gradient(transparent,#000 8%,#000 74%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 74%,transparent)}
.menu-scene-embers{position:absolute;inset:0;z-index:4;overflow:hidden}
.menu-scene-embers i{position:absolute;left:calc(9% + var(--mote)*12%);bottom:18%;width:2px;height:2px;background:var(--scene-light);box-shadow:0 0 8px var(--scene-light);opacity:0;animation:menu-ember-rise calc(6s + var(--mote)*.45s) linear infinite;animation-delay:calc(var(--mote)*-1.6s)}
.menu-scene-embers i:nth-child(3n){width:3px;height:3px}
.menu-scene figcaption{position:absolute;z-index:5;bottom:32px;left:28px;right:20px;display:flex;flex-direction:column;gap:9px;text-shadow:0 2px 12px #000}
.menu-scene figcaption span{color:#d4bea1;font-size:12px;letter-spacing:.08em}
.menu-scene figcaption b{font-size:29px;font-weight:500;letter-spacing:.12em;color:var(--paper)}
.menu-scene figcaption small{font-size:12px;color:var(--scene-accent)}
.menu-scene--collection{--scene-light:#acdcca}
.menu-scene--collection .menu-scene-backdrop{background-position:30% 55%}
.menu-scene--codex{--scene-light:#b9b2e7}
.menu-scene--codex .menu-scene-backdrop{background-position:70% 30%}
.sanctuary-panel{width:min(1020px,100%);max-width:1020px;padding:0}
.sanctuary-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr)}
.sanctuary-layout>.menu-scene{min-height:500px;border-right:1px solid #d8bc822b}
.sanctuary-content{min-width:0;padding:30px}
.sanctuary-content .panel-head{text-align:left;margin-bottom:24px}
.sanctuary-content h2{font-size:25px;letter-spacing:.02em;word-break:keep-all}
.sanctuary-content .subtext{margin:10px 0}
.sanctuary-content .talent{grid-template-columns:32px minmax(0,1fr) auto;padding:16px 12px;gap:12px}
.sanctuary-content .talent-pips{gap:4px}
.sanctuary-content .talent-pips i{width:15px}
.sanctuary-content .panel-note{line-height:1.75}
.sanctuary-content .panel-buttons{margin-top:22px}

/* A shallow illustrated header keeps dense card / codex lists easy to browse. */
.illustrated-heading{position:relative;isolation:isolate;overflow:hidden;display:block;min-height:180px;padding:24px;border:1px solid #d8bc822b;text-align:left}
.illustrated-heading>.menu-scene--banner{position:absolute;inset:0;z-index:0}
.menu-scene--banner .menu-scene-backdrop{opacity:.25}
.menu-scene--banner .menu-scene-portrait{inset:-6% -10px -32% auto;width:230px;mask-image:linear-gradient(90deg,transparent,#000 32%,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%,#000)}
.menu-scene--banner .menu-scene-portrait canvas{object-position:center 15%;mask-image:linear-gradient(#000 70%,transparent);-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.menu-scene--banner::after{background:linear-gradient(90deg,#15121cf5 10%,#15121cdd 48%,#15121c30 80%),linear-gradient(0deg,#15121c,transparent 45%)}
.menu-scene--banner .menu-scene-light{inset:0 0 0 35%}
.menu-scene--banner .menu-scene-embers{left:55%}
.illustrated-heading-copy{position:relative;z-index:1;padding-right:170px}
.illustrated-heading-copy h2{word-break:keep-all;line-height:1.4}
.illustrated-heading-copy .eyebrow{font-size:11px;letter-spacing:.14em;line-height:1.6}
.illustrated-heading-copy>.btn-secondary{margin-top:14px;min-height:44px;padding:9px 16px}
.collection-heading.illustrated-heading{margin-bottom:0}
.codex .illustrated-heading{margin-bottom:20px}

/* Existing main and character art get the same small breathing movement. */
.hero-stage>canvas{transform-origin:50% 92%;animation:menu-sprite-breathe 6s ease-in-out infinite}
.living-portrait{position:relative;isolation:isolate}
.living-portrait .illustration{transform:scale(1.035);transform-origin:50% 82%;animation:menu-portrait-breathe 7s ease-in-out infinite}
.living-portrait::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 75% 30%,color-mix(in srgb,var(--hero-color) 19%,transparent),transparent 65%);opacity:.4;animation:menu-scene-glow 6s ease-in-out infinite}
.menu-motion-paused .menu-scene *,.menu-motion-paused .living-portrait::after,.menu-motion-paused .living-portrait .illustration,.menu-motion-paused .hero-stage>canvas{animation-play-state:paused!important}
.reduced-effects .living-portrait::after{animation:none!important}

@keyframes menu-portrait-breathe{0%,100%{transform:translateY(1px) rotate(-.15deg) scale(1.035)}50%{transform:translateY(-2px) rotate(.15deg) scale(1.045)}}
@keyframes menu-sprite-breathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-1px) scale(1.003,1.01)}}
@keyframes menu-scene-drift{0%,100%{transform:translate(-.3%,.2%) scale(1.025)}50%{transform:translate(.3%,-.2%) scale(1.045)}}
@keyframes menu-scene-glow{0%,100%{opacity:.35}50%{opacity:.65}}
@keyframes menu-ember-rise{0%{opacity:0;transform:translate(0,18px)}18%{opacity:.48}75%{opacity:.25}100%{opacity:0;transform:translate(12px,-130px)}}

@media(max-width:760px){
 .sanctuary-layout{grid-template-columns:minmax(0,1fr)}
 .sanctuary-layout>.menu-scene{min-height:0;height:185px;border-right:0;border-bottom:1px solid #d8bc822b}
 .sanctuary-layout>.menu-scene .menu-scene-portrait{inset:-8% -5% -56% auto;width:64%;max-width:290px}
 .sanctuary-layout>.menu-scene::after{background:linear-gradient(90deg,#121019e8,transparent 75%),linear-gradient(0deg,#121019,transparent 48%)}
 .sanctuary-layout>.menu-scene figcaption{bottom:25px;left:23px;max-width:50%;gap:8px}
 .sanctuary-layout>.menu-scene figcaption b{font-size:25px}
 .sanctuary-content{padding:22px}
 .sanctuary-content .panel-head{margin-bottom:18px}
 .sanctuary-content h2{font-size:23px}
 .sanctuary-content .ember-total{font-size:32px;margin-top:12px}
 .illustrated-heading{min-height:160px;padding:18px}
 .illustrated-heading-copy{padding-right:100px}
 .illustrated-heading-copy h2{font-size:20px!important;letter-spacing:.01em}
 .menu-scene--banner .menu-scene-portrait{width:180px;right:-20px}
 .menu-scene--banner::after{background:linear-gradient(90deg,#15121cf5,#15121cce 53%,#15121c24 83%),linear-gradient(0deg,#15121c,transparent 50%)}
}
@media(max-width:400px){
 .sanctuary-content{padding:20px 16px}
 .sanctuary-content h2{font-size:21px}
 .sanctuary-content .talent{gap:8px;padding:15px 9px;grid-template-columns:25px minmax(0,1fr) auto}
 .sanctuary-content .talent button{min-width:60px}
 .sanctuary-content .talent-pips{gap:3px}
 .sanctuary-content .talent-pips i{width:12px}
 .illustrated-heading{padding:16px 12px}
 .illustrated-heading-copy{padding-right:76px}
 .illustrated-heading-copy h2{font-size:18px!important}
 .illustrated-heading-copy .eyebrow{font-size:9px;letter-spacing:.08em}
 .illustrated-heading-copy .subtext{font-size:12px}
 .menu-scene--banner .menu-scene-portrait{width:150px;right:-25px}
 .living-portrait .illustration{max-width:none}
}
@media(max-height:500px) and (min-width:761px){
 .sanctuary-content{padding:22px}
 .sanctuary-layout>.menu-scene{min-height:430px}
 .illustrated-heading{min-height:140px;padding:16px 20px}
}
@media(prefers-reduced-motion:reduce){
 .menu-scene *,.living-portrait .illustration,.living-portrait::after,.hero-stage>canvas{animation:none!important}
}