/* Dream Brook V29: supplied textile artwork + precision six-layer editable ornament transitions.
  User-supplied directory artwork is a compositional crop, not a stock image.
*/
#shell #drawer.drawer{
 background:linear-gradient(135deg,#F6F0E2 0%,#EDE1C9 50%,#DBCAA8 100%)!important;
 color:#253E39!important;
}
#shell #drawer.drawer::before{
 content:""!important;position:absolute!important;
 inset:4% 0 4% auto!important;width:min(63vw,860px)!important;height:auto!important;
 background-image:url('../assets/ornaments/用户参考_莲花宝相纹_目录裁切.jpg')!important;
 background-repeat:no-repeat!important;background-size:contain!important;background-position:right center!important;
 opacity:.51!important;mix-blend-mode:multiply!important;
 mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 24%,#000 50%)!important;
 pointer-events:none!important;filter:saturate(.78) contrast(1.02)!important;
}
#shell #drawer.drawer::after{
 content:""!important;position:absolute!important;inset:14px!important;width:auto!important;height:auto!important;
 border:1px solid rgba(141,104,54,.22)!important;box-shadow:inset 0 0 0 2px rgba(255,251,240,.38)!important;
 pointer-events:none!important;background:none!important;
}
#shell #drawer.drawer .drawerhead,#shell #drawer.drawer .drawergrid{position:relative;z-index:2}
#shell #drawer.drawer .drawerhead h2{color:#25443d!important;text-shadow:none!important}
#shell #drawer.drawer .drawerhead{border-color:rgba(135,95,51,.24)!important}
#shell #drawer.drawer .drawerhead::before,#shell #drawer.drawer .drawerhead::after{
 background-image:url('../assets/ornaments/v29_layer_06_core.svg')!important;opacity:.55!important;
}
#shell #drawer.drawer .drawergrid button{
 background:linear-gradient(145deg,rgba(255,252,245,.91),rgba(244,235,213,.84))!important;
 color:#253E39!important;border:1px solid rgba(142,104,55,.2)!important;
 box-shadow:0 12px 21px rgba(73,57,30,.09),inset 0 1px rgba(255,255,255,.62)!important;
 backdrop-filter:blur(8px);
}
#shell #drawer.drawer .drawergrid button:hover,#shell #drawer.drawer .drawergrid button.current{
 background:linear-gradient(160deg,rgba(225,237,223,.98),rgba(240,225,196,.96))!important;
 border-color:rgba(133,91,36,.58)!important;
}
#shell #drawer.drawer .drawergrid button::before{background-image:url('../assets/ornaments/cloud_ribbon.svg')!important;opacity:.24!important;mix-blend-mode:multiply!important}
#shell #drawer.drawer .drawergrid button::after{opacity:.4!important}
#shell #drawer.drawer .drawergrid button strong,#shell #drawer.drawer .drawergrid button b,
#shell #drawer.drawer .drawergrid button{color:#254139!important;text-shadow:none!important}
#shell #drawer.drawer .drawergrid span{color:#805c34!important}
#shell #drawer.drawer #closemap{color:#254139!important;border-color:#B69762!important;background:rgba(255,251,240,.55)!important}
#shell .mx28-nav-flower{background-image:url('../assets/ornaments/v29_layer_02_mainpetal.svg')!important}

/* No cube / nine-slice effect. Multi-axis ornament composition. */
#shell .mx29-transition{position:absolute;inset:0;z-index:181;pointer-events:none;overflow:hidden;isolation:isolate;
 background:radial-gradient(circle at 50% 45%,#3E6862 0%,#214039 50%,#142925 100%);
 opacity:1;transition:opacity 230ms ease;will-change:opacity}
#shell .mx29-transition.done{opacity:0}
#shell .mx29-transition::before,#shell .mx29-transition::after{content:"";position:absolute;pointer-events:none;inset:16px;border:1px solid rgba(230,202,135,.38);z-index:5}
#shell .mx29-transition::after{inset:27px;border-color:rgba(244,230,194,.15)}
#shell .mx29-transition-grain{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(245,226,180,.017) 13px 14px),radial-gradient(ellipse at center,rgba(221,190,126,.18),transparent 65%);opacity:.7}
#shell .mx29-flower{position:absolute;left:50%;top:47%;width:clamp(280px,73vmin,700px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;isolation:isolate;will-change:transform,opacity}
#shell .mx29-ring{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 2px 5px rgba(10,20,16,.16));will-change:transform,opacity}
#shell .mx29-ring-1{background-image:url('../assets/ornaments/v29_layer_01_aureole.svg')}
#shell .mx29-ring-2{background-image:url('../assets/ornaments/v29_layer_02_mainpetal.svg')}
#shell .mx29-ring-3{background-image:url('../assets/ornaments/v29_layer_03_filagree.svg')}
#shell .mx29-ring-4{background-image:url('../assets/ornaments/v29_layer_04_secondary.svg')}
#shell .mx29-ring-5{background-image:url('../assets/ornaments/v29_layer_05_innerlotus.svg')}
#shell .mx29-ring-6{background-image:url('../assets/ornaments/v29_layer_06_core.svg')}
#shell .mx29-transition.play .mx29-flower{animation:mx29Stage 1.45s cubic-bezier(.24,.77,.18,1) both}
#shell .mx29-transition.play .mx29-ring{animation:mx29Petal .99s cubic-bezier(.16,.76,.24,1) both;animation-delay:calc(var(--mx-ring)*65ms)}
#shell .mx29-transition.play .mx29-ring:nth-child(even){animation-name:mx29PetalReverse}
#shell .mx29-halo-dot{position:absolute;inset:11%;border-radius:50%;border:1px solid rgba(247,226,174,.21);box-shadow:0 0 0 14px rgba(227,187,109,.018),0 0 50px rgba(226,183,94,.09);opacity:0}
#shell .mx29-transition.play .mx29-halo-dot{animation:mx29Halo 1.22s ease both}
#shell .mx29-cloud{position:absolute;left:-20%;right:-20%;height:50px;pointer-events:none;opacity:0;background:url('../assets/ornaments/cloud_ribbon.svg') center/690px 68px repeat-x;filter:drop-shadow(0 4px 6px rgba(5,15,12,.18))}
#shell .mx29-cloud-a{top:25%}#shell .mx29-cloud-b{bottom:23%;transform:scaleX(-1)}
#shell .mx29-transition.play .mx29-cloud-a{animation:mx29CloudA 1.32s ease-out both}
#shell .mx29-transition.play .mx29-cloud-b{animation:mx29CloudB 1.32s ease-out both}
#shell .mx29-transition-caption{position:absolute;z-index:5;left:3%;right:3%;bottom:7.5%;text-align:center;
 font-size:clamp(15px,1.55vw,22px);font-weight:500;letter-spacing:.24em;color:#EEDBB2;text-shadow:0 4px 18px #0A1A15;opacity:0}
#shell .mx29-transition.play .mx29-transition-caption{animation:mx29Title 1.44s ease both}
#shell .mx29-transition-rule{position:absolute;left:18%;right:18%;bottom:16%;height:1px;opacity:.38;background:linear-gradient(90deg,transparent,#E3C388,transparent)}
#shell .mx29-silk-sheet{position:absolute;top:-2%;bottom:-2%;width:52%;z-index:2;opacity:0;pointer-events:none;
 background:linear-gradient(115deg,rgba(246,233,201,.82),rgba(221,200,154,.53),rgba(246,233,201,.76)),
 repeating-linear-gradient(90deg,transparent 0 3px,rgba(74,57,32,.04) 3px 4px)}
#shell .mx29-silk-a{left:-52%;border-right:2px solid rgba(206,168,103,.9)}
#shell .mx29-silk-b{right:-52%;border-left:2px solid rgba(206,168,103,.9)}
@keyframes mx29Stage{0%{opacity:0;transform:translate(-50%,-50%) scale(.38)}23%{opacity:1}76%{opacity:1}100%{opacity:.86;transform:translate(-50%,-50%) scale(1)}}
@keyframes mx29Petal{0%{transform:rotate(-95deg) scale(.54);opacity:0}47%{opacity:1}100%{transform:rotate(40deg) scale(1);opacity:1}}
@keyframes mx29PetalReverse{0%{transform:rotate(85deg) scale(.58);opacity:0}50%{opacity:1}100%{transform:rotate(-32deg) scale(1);opacity:1}}
@keyframes mx29Halo{0%,25%{opacity:0;transform:scale(.7)}65%{opacity:.7}100%{opacity:.55;transform:scale(1.04)}}
@keyframes mx29Title{0%,30%{opacity:0;transform:translateY(13px)}60%,85%{opacity:1;transform:none}100%{opacity:.78}}
@keyframes mx29CloudA{0%{opacity:0;transform:translateX(-18%)}45%{opacity:.5}100%{opacity:.27;transform:translateX(0)}}
@keyframes mx29CloudB{0%{opacity:0;transform:translateX(18%) scaleX(-1)}45%{opacity:.4}100%{opacity:.24;transform:scaleX(-1)}}
/* Four distinct movement compositions rather than one repeated spin. */
/* Unfold: concentric blossoms open in three waves */
#shell .mx29-unfold .mx29-flower{width:clamp(300px,77vmin,740px)}
#shell .mx29-unfold.play .mx29-ring-5,#shell .mx29-unfold.play .mx29-ring-6{animation-delay:410ms}
#shell .mx29-unfold.play .mx29-ring-2,#shell .mx29-unfold.play .mx29-ring-3{animation-delay:135ms}
/* Orbit: concentric jewelry-like rings spin in alternating directions. */
#shell .mx29-orbit.play .mx29-ring-1,#shell .mx29-orbit.play .mx29-ring-3{animation:mx29OrbitCW 1.31s cubic-bezier(.23,.78,.14,1) both}
#shell .mx29-orbit.play .mx29-ring-2,#shell .mx29-orbit.play .mx29-ring-4{animation:mx29OrbitCCW 1.31s cubic-bezier(.23,.78,.14,1) both}
#shell .mx29-orbit.play .mx29-ring-5,#shell .mx29-orbit.play .mx29-ring-6{animation:mx29LotusReveal 1.17s cubic-bezier(.23,.78,.14,1) both;animation-delay:220ms}
@keyframes mx29OrbitCW{from{transform:rotate(-160deg) scale(.66);opacity:0}35%{opacity:1}to{transform:rotate(64deg) scale(1);opacity:1}}
@keyframes mx29OrbitCCW{from{transform:rotate(152deg) scale(.7);opacity:0}35%{opacity:1}to{transform:rotate(-52deg) scale(1);opacity:1}}
@keyframes mx29LotusReveal{0%{transform:scale(.05) rotate(-42deg);opacity:0}45%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
/* Silk: two-sided split curtains reveal a stationary blooming jewel. */
#shell .mx29-silk{background:#E9D8B5}
#shell .mx29-silk .mx29-flower{width:clamp(230px,57vmin,560px);top:46%}
#shell .mx29-silk .mx29-silk-a,#shell .mx29-silk .mx29-silk-b{opacity:.92}
#shell .mx29-silk.play .mx29-silk-a{animation:mx29CurtainLeft 1.35s cubic-bezier(.44,.01,.16,1) both}
#shell .mx29-silk.play .mx29-silk-b{animation:mx29CurtainRight 1.35s cubic-bezier(.44,.01,.16,1) both}
#shell .mx29-silk.play .mx29-flower{animation:mx29SilkFlower 1.35s ease both;z-index:3}
#shell .mx29-silk .mx29-transition-caption{color:#2F544A;text-shadow:none}
@keyframes mx29CurtainLeft{0%{left:0}35%{left:0}100%{left:-52%}}
@keyframes mx29CurtainRight{0%{right:0}35%{right:0}100%{right:-52%}}
@keyframes mx29SilkFlower{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.5)}64%{opacity:1}100%{opacity:.94;transform:translate(-50%,-50%) scale(.86)}}
/* Cloud: waves cross first; floral center appears from the mist; gold filigree trails late. */
#shell .mx29-cloudflow .mx29-cloud-a,#shell .mx29-cloudflow .mx29-cloud-b{height:84px;background-size:760px 80px}
#shell .mx29-cloudflow.play .mx29-cloud-a{animation:mx29CloudLeadA 1.42s cubic-bezier(.19,.79,.25,1) both}
#shell .mx29-cloudflow.play .mx29-cloud-b{animation:mx29CloudLeadB 1.42s cubic-bezier(.19,.79,.25,1) both}
#shell .mx29-cloudflow.play .mx29-flower{animation:mx29MistFlower 1.43s ease both}
#shell .mx29-cloudflow.play .mx29-ring{animation-delay:calc(360ms + var(--mx-ring)*45ms)}
@keyframes mx29CloudLeadA{0%{opacity:0;transform:translateX(-35%) translateY(18px)}30%{opacity:.9}80%{opacity:.45}100%{opacity:.22;transform:none}}
@keyframes mx29CloudLeadB{0%{opacity:0;transform:translateX(35%) scaleX(-1)}30%{opacity:.8}85%{opacity:.36}100%{opacity:.21;transform:scaleX(-1)}}
@keyframes mx29MistFlower{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(8px)}62%{opacity:.97;filter:blur(0)}100%{opacity:.82;transform:translate(-50%,-50%) scale(.98);filter:none}}
@media(max-width:800px){
 #shell #drawer.drawer::before{left:4%!important;right:4%!important;top:8%!important;bottom:auto!important;width:92%!important;height:47%!important;background-size:contain!important;background-position:center top!important;opacity:.24!important;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 50%,transparent 100%)!important}
 #shell #drawer.drawer .drawergrid button{background:rgba(255,251,241,.94)!important}
 #shell .mx29-transition::before{inset:10px}#shell .mx29-transition::after{inset:19px}
 #shell .mx29-flower{width:min(94vw,480px);top:44%}
 #shell .mx29-orbit .mx29-flower,#shell .mx29-unfold .mx29-flower{width:min(95vw,520px)}
 #shell .mx29-transition-caption{font-size:clamp(15px,4vw,19px);bottom:16%}
 #shell .mx29-transition-rule{bottom:24%}
}
@media(orientation:landscape) and (max-height:500px){#shell .mx29-flower{width:min(75vh,400px)}#shell .mx29-transition-caption{bottom:5%;font-size:13px}}
@media(prefers-reduced-motion:reduce){#shell .mx29-transition *{animation:none!important}#shell .mx29-transition{transition:none!important}}