.enc-hero-live{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 76% 40%,rgba(70,95,255,.1),transparent 38%),linear-gradient(180deg,#fff0 0%,#fbfcff66 62%,#f2f6ffcc 100%)}
.enc-hero-live--mobile{position:relative;display:block;width:100%;aspect-ratio:16/11;overflow:hidden;background:radial-gradient(circle at 65% 38%,rgba(70,95,255,.1),transparent 42%),linear-gradient(180deg,#fff 0%,#f4f7ff 100%)}
.enc-hero-ribbons{position:absolute;z-index:0;inset:0;width:100%;height:100%;opacity:.42}
.enc-hero-city{display:none;position:absolute;z-index:1;left:12%;bottom:18%;width:88%;opacity:.13;filter:grayscale(1) contrast(.72) brightness(1.18)}
.enc-hero-scene{position:absolute;z-index:2;top:56%;right:-1%;width:min(67%,960px);aspect-ratio:16/11;transform:translateY(-50%) perspective(1200px) rotateX(var(--hero-tilt-x,0deg)) rotateY(var(--hero-tilt-y,0deg));transition:transform .22s ease-out;will-change:transform;animation:encSceneDrift 9s ease-in-out 1s infinite}
.enc-hero-live--mobile .enc-hero-city{left:-18%;bottom:20%;width:136%}
.enc-hero-live--mobile .enc-hero-scene{top:50%;right:-10%;width:120%}
.enc-hero-layer{position:absolute;display:block;pointer-events:none;user-select:none}
.enc-hero-board-live{z-index:10;right:15%;bottom:8%;width:66%;transform-origin:50% 54%;animation:encBoardIn .8s .1s ease both,encBoardFloat 8.5s 1s ease-in-out infinite}
.enc-hero-pawn-live{z-index:11;left:26%;bottom:52%;width:13%;transform-origin:center bottom;filter:drop-shadow(0 9px 8px rgba(7,20,51,.16));animation:encPawnRock 6.8s ease-in-out infinite,encLayerFade .65s .32s ease both}
.enc-hero-card-live{z-index:12;right:19%;bottom:53%;width:21%;transform-origin:50% 90%;filter:drop-shadow(0 10px 7px rgba(7,20,51,.14));animation:encCardDeck 10.5s -4.2s ease-in-out infinite,encLayerFade .65s .24s ease both}
.enc-hero-dice-live{z-index:13;right:27%;bottom:47%;width:14%;animation:encDiceBounce 11.5s ease-in-out infinite,encLayerFade .6s .42s ease both}
.enc-hero-shadow-live{z-index:13;left:41%;bottom:47%;width:21%;height:3.5%;border-radius:50%;background:rgba(7,20,51,.25);filter:blur(9px);transform:rotate(-2deg);transform-origin:center;animation:encLayerFade .55s .2s ease both,encShadowPulse 8.5s 1s ease-in-out infinite}
.enc-hero-mascot-live{z-index:14;left:38%;bottom:47%;width:27%;transform-origin:center bottom;animation:encMascotIdle 7.4s -2.6s ease-in-out infinite,encLayerFade .7s .16s ease both;filter:drop-shadow(0 12px 11px rgba(7,20,51,.18))}
@keyframes encBoardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes encSceneDrift{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes encBoardFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -6px;rotate:-1.2deg}}
@keyframes encShadowPulse{0%,100%{scale:1 1;opacity:.72}50%{scale:1.12 .82;opacity:.5}}
@keyframes encLayerFade{from{opacity:0}to{opacity:1}}
@keyframes encMascotIdle{0%,100%{transform:rotate(0) scale(1)}32%{transform:rotate(-.22deg) scaleX(1.003) scaleY(1.007)}64%{transform:rotate(.28deg) scaleX(.998) scaleY(1.003)}82%{transform:rotate(-.08deg) scale(1)}}
@keyframes encPawnRock{0%,100%{transform:rotate(0) translateY(0)}35%{transform:rotate(-2.2deg) translateY(-1px)}65%{transform:rotate(2.2deg) translateY(0)}}
@keyframes encCardDeck{0%,100%{transform:translateY(0) rotate(0) scale(1)}20%{transform:translateY(-2px) rotate(-.45deg) scale(1.002)}38%,54%{transform:translateY(-6px) rotate(1.2deg) scale(1.01)}70%{transform:translateY(-3px) rotate(.65deg) scale(1.005)}84%{transform:translateY(0) rotate(0) scale(1)}}
@keyframes encDiceBounce{0%,44%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(-4deg)}57%{transform:translateY(2px) rotate(3deg)}63%{transform:translateY(-5px) rotate(-2deg)}69%,100%{transform:translateY(0) rotate(0)}}
@media(max-width:1023px){.enc-hero-live:not(.enc-hero-live--mobile){display:none}}
@media(min-width:1024px){.enc-hero-live--mobile{display:none}}
@media(min-width:1440px){.enc-hero-scene{right:4%}}
@media(min-width:1024px){.enc-hero-scene{right:max(0px,calc((100% - 1360px)/2))}}
/* Keep the composition inside the hero at compact desktop widths.  The
   default 67% scene is tuned for wide screens and lets the mascot overlap
   the header around 1024–1439px viewports. */
@media (min-width:1024px) and (max-width:1439px){
  .enc-hero-live:not(.enc-hero-live--mobile) .enc-hero-scene{
    top:59%;
    width:min(57%, 820px);
  }
}
/* 1080p desktop windows can have a relatively short hero viewport. Keep a
   little breathing room beneath the sticky header without changing the
   composition on ultra-wide monitors. */
@media (min-width:1440px) and (max-width:2200px){
  .enc-hero-live:not(.enc-hero-live--mobile) .enc-hero-scene{
    top:60%;
    width:min(62%, 900px);
  }
}
@media(prefers-reduced-motion:reduce){.enc-hero-scene{transition:none;transform:translateY(-50%)}.enc-hero-layer{animation:none!important}}