/* Shared decoration. Selectors prefixed with body for specificity. Decorative only. */
@keyframes dcFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) + 3deg))}}
@keyframes dcSpin{to{transform:rotate(360deg)}}
@keyframes dcBeam{0%,100%{opacity:.08}50%{opacity:.6}}
@keyframes dcSheen{to{transform:translateX(120%) skewX(-18deg)}}
@keyframes dcMarch{to{background-position:40px 0}}
@keyframes dcPop{from{opacity:0;transform:translateY(40px) scale(.8)}to{opacity:1;transform:none}}

body .decor-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body .decor-layer .dc-ring{position:absolute;border-radius:50%;border:1px dashed rgba(30,144,255,.28);width:var(--s);height:var(--s);animation:dcSpin 40s linear infinite}
body .decor-layer .dc-beam{position:absolute;top:-10%;bottom:-10%;width:2px;background:linear-gradient(180deg,transparent,rgba(30,144,255,.55),transparent);transform:rotate(14deg);animation:dcBeam 7s ease-in-out infinite}
body main,body footer{position:relative;z-index:1}

/* page heads: brighter graphic backdrop */
body .dc-head{position:relative;overflow:hidden;isolation:isolate}
body .page-hero.dc-head{border-bottom:3px solid #1E90FF;box-shadow:0 12px 50px -12px rgba(30,144,255,.55)}
body .page-hero.dc-head::before{width:1200px;height:520px;background:radial-gradient(ellipse,rgba(30,144,255,.34),transparent 70%);z-index:0}
body .page-hero.dc-head::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 35%,rgba(30,144,255,.3)),repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px)}
body .dc-head>.container{position:relative;z-index:2}
body .page-hero.dc-head .label{background:#1E90FF;color:#fff;padding:7px 16px;border-radius:4px;transform:skewX(-8deg);letter-spacing:.34em;box-shadow:0 0 26px rgba(30,144,255,.55)}
body .page-hero.dc-head .label::before,body .page-hero.dc-head .label::after{display:none}
body .page-hero.dc-head h1{text-shadow:0 4px 0 rgba(30,144,255,.45),0 0 44px rgba(30,144,255,.5)}
body .phead.dc-head{overflow:hidden}
body .phead.dc-head::after{background:linear-gradient(160deg,#4da6ff,#1E90FF 60%,#0b6fe0);z-index:0}
body .phead.dc-head h1{text-shadow:0 0 44px rgba(30,144,255,.45)}
body .post-hero.dc-head{border-bottom:3px solid #1E90FF;background:radial-gradient(ellipse at 50% 100%,rgba(30,144,255,.3),transparent 70%)}

/* character composition: strip by default (in flow, under text) */
body .dc-flank{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,2vw,22px);margin-top:30px;pointer-events:none}
body .dc-flank img{width:clamp(78px,19vw,150px);height:auto;max-width:none;filter:drop-shadow(0 0 22px rgba(30,144,255,.8)) drop-shadow(0 8px 14px rgba(0,0,0,.5));animation:dcPop .8s cubic-bezier(.2,.8,.2,1) both,dcFloat 7s ease-in-out infinite;animation-delay:calc(var(--i,0)*.12s),calc(var(--i,0)*-1.3s);pointer-events:none}
body .dc-flank img:nth-child(even){--r:4deg}body .dc-flank img:nth-child(odd){--r:-4deg}
body .dc-flank img:nth-child(2n){margin-bottom:14px}
@media (min-width:1280px){
  body .page-hero.dc-head>.dc-flank,body .phead.dc-head>.dc-flank{position:absolute;inset:0;margin:0;display:block}
  body .page-hero.dc-head>.dc-flank img,body .phead.dc-head>.dc-flank img{position:absolute;width:var(--w,200px);bottom:var(--b,10px);left:var(--l,auto);right:var(--rt,auto)}
}
@media (min-width:900px) and (max-width:1279px){
  body .phead.dc-head>.dc-flank{position:absolute;inset:0;margin:0;display:block}
  body .phead.dc-head>.dc-flank img{position:absolute;width:var(--w,200px);bottom:var(--b,10px);right:var(--rt,5%)}
  body .phead.dc-head>.dc-flank img:nth-child(n+3){display:none}
}

/* interactive cards */
body .portal,body .panel,body .about-card,body .feature-item,body .faq-item,body .contact-detail,body .gallery-item,body main [class*="-card"]:not(.panel-head){transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
body .portal:hover,body .panel:hover,body .about-card:hover,body .feature-item:hover,body .faq-item:hover,body .contact-detail:hover,body .gallery-item:hover,body main [class*="-card"]:not(.panel-head):hover{transform:translateY(-5px);border-color:rgba(30,144,255,.7);box-shadow:inset 0 3px 0 #1E90FF,0 18px 46px rgba(30,144,255,.28)}
body main [class*="card"] img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body main [class*="card"]:hover img{transform:scale(1.08) rotate(-2deg)}
body .btn,body .portal,body .store{position:relative;overflow:hidden}
body .btn::after,body .portal::after,body .store::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
body .btn:hover::after,body .portal:hover::after,body .store:hover::after{animation:dcSheen .8s ease}
body .portal:hover .portal-art img:first-child{transform:translate(-8px,-10px) scale(1.15) rotate(-6deg)}
body .portal:hover .portal-art img:last-child{transform:translate(8px,-6px) scale(1.15) rotate(6deg)}
body .portal-art img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
body .cut{filter:drop-shadow(0 0 34px rgba(30,144,255,.85))}
body .dc-stripe{height:10px;background:repeating-linear-gradient(115deg,#1E90FF 0 14px,transparent 14px 28px);opacity:.6;animation:dcMarch 2s linear infinite}
body footer{background:linear-gradient(180deg,transparent,rgba(30,144,255,.1))}

/* admin: light */
body .dc-admin{position:fixed;bottom:0;width:150px;height:auto;opacity:.16;pointer-events:none;z-index:0;filter:drop-shadow(0 0 18px rgba(30,144,255,.7));display:none}
@media (min-width:1100px){body .dc-admin{display:block}body .dc-admin.l{left:8px}body .dc-admin.r{right:8px}}
body .dc-admin-bar{position:fixed;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(115deg,#1E90FF 0 14px,transparent 14px 28px);z-index:200;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  body .decor-layer *,body .dc-stripe,body .dc-flank img,body .btn::after,body .portal::after,body .store::after{animation:none!important}
  body .portal,body .panel,body .about-card,body main [class*="card"],body main [class*="card"] img{transition:none!important}
}