/* USAGI 4.0 — purely decorative enhancements */
:root{--u4-magic:1;--u4-depth:1}
.hero{isolation:isolate;overflow:hidden}
.u4-depth{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;opacity:var(--u4-depth)}
.u4-depth .u4-cloud{position:absolute;width:110px;height:32px;border-radius:90px;background:rgba(255,255,255,.38);filter:blur(9px);animation:u4-cloud 24s ease-in-out infinite alternate;left:5%;top:12%}
.u4-depth .u4-cloud:nth-child(2){left:63%;top:38%;width:75px;animation-duration:32s;animation-direction:alternate-reverse}
.u4-depth .u4-glow{position:absolute;right:7%;top:8%;width:125px;height:125px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.65),transparent 70%);animation:u4-glow 5s ease-in-out infinite alternate}
@keyframes u4-cloud{to{transform:translateX(50px)}}@keyframes u4-glow{to{transform:scale(1.4);opacity:.35}}
.u4-costume{position:absolute;z-index:7;right:13%;top:9%;font-size:clamp(22px,5vw,36px);filter:drop-shadow(0 3px 5px #fff8);pointer-events:none;animation:u4-costume 2.8s ease-in-out infinite alternate}
@keyframes u4-costume{to{transform:translateY(-8px) rotate(9deg)}}
.u4-particle{position:fixed;z-index:9999;pointer-events:none;font-size:20px;animation:u4-pop .95s ease-out forwards;will-change:transform,opacity}
@keyframes u4-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-130% - 42px)) rotate(35deg) scale(1.2)}}
.u4-studio-button{border:1px solid #ffffffa8;border-radius:14px;padding:9px 13px;background:linear-gradient(145deg,#fff9,#ffffff35);box-shadow:inset 0 2px 3px #fff9,0 3px 12px #52304a22;color:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.u4-studio-button:active{transform:scale(.95)}
.u4-dialog{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:18px;background:#24142b88;backdrop-filter:blur(9px)}
.u4-dialog[hidden]{display:none!important}
.u4-panel{width:min(420px,100%);max-height:85vh;overflow:auto;background:linear-gradient(145deg,#fff,#fff0fa);color:#593b59;border:2px solid #fff;border-radius:26px;box-shadow:0 20px 70px #26112c55;padding:22px;font-size:15px}
.u4-panel h2{margin:0 0 7px;font-size:22px;color:#a24b83}.u4-panel p{margin:0 0 15px;color:#795c78;font-size:13px}
.u4-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #eadbe8}.u4-row label{font-weight:700}.u4-row select,.u4-row input[type=range]{max-width:54%;min-width:105px}.u4-row select{border:1px solid #dfbfd7;border-radius:12px;background:white;padding:8px;color:#63445c}.u4-row input{accent-color:#d67eae}.u4-close{width:100%;margin-top:18px;background:linear-gradient(100deg,#f5a3c9,#b99bff);color:#412a46;border:0;border-radius:16px;padding:13px;font-weight:900}
.u4-bunny-react{animation:u4-react .65s ease-out!important}@keyframes u4-react{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-7deg) scale(1.07)}65%{transform:rotate(6deg) scale(.98)}}
.chart .bar,.chart [class*="bar"]{transition:height .75s ease,background .3s ease;animation:u4-bar .8s ease-out both;transform-origin:bottom}@keyframes u4-bar{from{opacity:.25;transform:scaleY(.1)}to{opacity:1;transform:scaleY(1)}}
body[data-theme="chibi"] .u4-studio-button{background:#ffb4dc;color:#712b60}body[data-theme="akatsuki"] .u4-studio-button{background:#b2a1f6;color:#39265d}body[data-theme="hokage"] .u4-studio-button{background:#ffe096;color:#775013}
body.u4-low-motion .u4-depth *,body.u4-low-motion .u4-costume,body.u4-low-motion .u4-bunny-react{animation:none!important}
@media(prefers-reduced-motion:reduce){.u4-depth *,.u4-costume,.u4-particle,.chart .bar,.chart [class*="bar"]{animation:none!important}}
