/* Lucky mascot banner: 5s CSS cycle, responsive and motion-aware. */
.banner[data-mascot-banner]{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);align-items:center;height:clamp(180px,25vw,240px);min-height:0;overflow:hidden;background:#09090b;border:1px solid #8f142b;border-radius:22px}
[data-mascot-banner]:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 65%,#d9254529,transparent 48%),linear-gradient(125deg,#17171b 0,#09090b 65%);z-index:-2}
[data-mascot-banner] .banner-contours{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
[data-mascot-banner] .banner-copy{position:relative;padding:20px 0 20px 32px;z-index:3;pointer-events:none;align-self:center}
[data-mascot-banner] img.banner-wordmark{width:100%;max-width:290px;height:auto;display:block;object-fit:contain}
[data-mascot-banner] .banner-copy p{margin:12px 0 0;color:#c2c2c9;font-size:clamp(12px,1.7vw,17px);line-height:1.5}
[data-mascot-banner] .banner-copy:after{content:"";display:block;width:42px;height:3px;margin-top:12px;border-radius:4px;background:#d92545}
[data-mascot-banner] .mascot-stage{position:relative;height:100%;min-width:0;align-self:stretch;z-index:2}
[data-mascot-banner] img.banner-mascot{position:absolute;width:112%;max-width:none;height:100%;right:-2%;bottom:0;object-fit:contain;object-position:center bottom;transform-origin:65% 82%;filter:drop-shadow(0 8px 18px #0008) drop-shadow(0 0 7px #d9254526);animation:lucky-mascot-attack 5s cubic-bezier(.4,0,.2,1) infinite;will-change:transform}
[data-mascot-banner] .sword-trail{position:absolute;inset:15% -2% 5% -6%;width:108%;height:80%;pointer-events:none;opacity:0;z-index:3;transform-origin:70% 65%;animation:lucky-sword-trail 5s ease-out infinite;will-change:transform,opacity}
[data-mascot-banner] .mascot-halo{position:absolute;width:70%;height:65%;right:2%;bottom:4%;border-radius:50%;background:radial-gradient(ellipse,#d925451d,transparent 68%);animation:lucky-mascot-halo 5s ease-in-out infinite;pointer-events:none;will-change:opacity}
[data-mascot-banner] .banner-motion-toggle{position:absolute;right:13px;bottom:12px;z-index:5;width:36px;height:36px;padding:0;border:1px solid #8f142b;border-radius:50%;background:#09090bdb;color:#f7f7f8;display:grid;place-items:center;cursor:pointer;font:600 13px system-ui;backdrop-filter:blur(5px)}
[data-mascot-banner] .banner-motion-toggle:hover{border-color:#ff405f;background:#211318}
[data-mascot-banner].is-paused .banner-mascot,[data-mascot-banner].is-paused .sword-trail,[data-mascot-banner].is-paused .mascot-halo{animation-play-state:paused}
@keyframes lucky-mascot-attack{0%,10%{transform:translate3d(0,0,0) rotate(0)}28%{transform:translate3d(3px,-5px,0) rotate(.8deg)}40%{transform:translate3d(12px,0,0) rotate(2deg) scale(.98)}48%{transform:translate3d(-15px,-2px,0) rotate(-2deg) scale(1.025)}58%{transform:translate3d(-7px,0,0) rotate(-.6deg) scale(1.01)}78%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes lucky-sword-trail{0%,42%{opacity:0;transform:translate3d(12px,-5px,0) rotate(9deg) scale(.82)}47%{opacity:.7;transform:translate3d(-5px,4px,0) rotate(-2deg) scale(1)}57%,100%{opacity:0;transform:translate3d(-16px,10px,0) rotate(-8deg) scale(1.06)}}
@keyframes lucky-mascot-halo{0%,30%,75%,100%{opacity:.45}46%,54%{opacity:1}}
@media(max-width:650px){.banner[data-mascot-banner]{height:auto;min-height:0;aspect-ratio:3/1;grid-template-columns:43% 57%;border-radius:14px}[data-mascot-banner] .banner-copy{padding:10px 0 10px 16px}[data-mascot-banner] img.banner-wordmark{max-width:190px}[data-mascot-banner] .banner-copy p{margin-top:6px;font-size:10px;line-height:1.3;max-width:none}[data-mascot-banner] .banner-copy:after{height:2px;margin-top:7px;width:30px}[data-mascot-banner] .mascot-stage{height:100%}[data-mascot-banner] img.banner-mascot{width:112%;right:0;height:100%;bottom:0}[data-mascot-banner] .banner-motion-toggle{width:26px;height:26px;font-size:10px;bottom:6px;right:7px}[data-mascot-banner] .sword-trail{inset:15% 0 5% -6%;width:106%;height:80%}}
@media(max-width:380px){[data-mascot-banner] .banner-copy{padding-left:12px}[data-mascot-banner] .banner-copy p{font-size:9px;margin-top:4px}[data-mascot-banner] .banner-copy:after{margin-top:5px}}
@media(prefers-reduced-motion:reduce){[data-mascot-banner] .banner-mascot,[data-mascot-banner] .sword-trail,[data-mascot-banner] .mascot-halo{animation:none!important;will-change:auto}[data-mascot-banner] .sword-trail{display:none}[data-mascot-banner] .banner-motion-toggle{display:none}}