/* Standalone MG hero: transparent artwork and letter-shaped depth. */
.mg-stage.mg-letters-stage{perspective:1200px}
.mg-letters-stage .mg-float{width:min(490px,calc(100% - 24px));aspect-ratio:1254 / 710;margin-top:-42px;animation:mg-letters-float 7s ease-in-out infinite}
.mg-letters-stage .mg-aura{width:88%;height:65%;aspect-ratio:auto;filter:blur(20px);background:radial-gradient(ellipse,#8837db12,transparent 67%)}
.mg-letters-core{position:absolute;inset:0;transform-style:preserve-3d;animation:mg-letters-turn 11s ease-in-out infinite;transform:rotateX(6deg) rotateY(-13deg) rotateZ(-3deg)}
.mg-letters-depth{position:absolute;inset:0;transform:translateZ(var(--depth));background:linear-gradient(135deg,#9980bb,#352044 22%,#170e24 52%,#603580 82%,#ae86cf);-webkit-mask:url('/mg-letters-1100.webp') center / 100% 100% no-repeat;mask:url('/mg-letters-1100.webp') center / 100% 100% no-repeat;backface-visibility:hidden;pointer-events:none}
.mg-letters-depth:nth-child(2n){background:linear-gradient(135deg,#b294d0,#35243e 38%,#2c173f 70%,#8b56b9)}
.mg-letters-face{position:absolute;inset:0;transform:translateZ(18px);backface-visibility:hidden;filter:drop-shadow(0 8px 12px #08031266);pointer-events:none}
.mg-letters-face img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;border-radius:0}
.mg-letters-face::after{content:'';position:absolute;inset:0;-webkit-mask:url('/mg-letters-1100.webp') center / 100% 100% no-repeat;mask:url('/mg-letters-1100.webp') center / 100% 100% no-repeat;background:linear-gradient(112deg,transparent 36%,#f4e7ff00 43%,#f9f3ff25 49%,transparent 55%);background-size:250% 100%;background-position:130% 0;animation:mg-letters-light 11s ease-in-out infinite;pointer-events:none}
.mg-letters-stage .mg-shadow{width:56%;height:16px;bottom:87px;background:#71319a25;filter:blur(17px)}
@keyframes mg-letters-float{0%,100%{transform:translate3d(0,6px,0) rotateZ(-.6deg)}50%{transform:translate3d(0,-9px,0) rotateZ(.6deg)}}
@keyframes mg-letters-turn{0%,100%{transform:rotateX(6deg) rotateY(-13deg) rotateZ(-3deg)}50%{transform:rotateX(2deg) rotateY(-5deg) rotateZ(-1deg)}}
@keyframes mg-letters-light{0%,100%{background-position:130% 0;opacity:.3}50%{background-position:-20% 0;opacity:.65}}
@media(min-width:1500px){.mg-letters-stage .mg-float{width:min(540px,calc(100% - 24px))}.mg-letters-stage .mg-shadow{bottom:97px}}
@media(min-width:681px) and (max-width:980px){.mg-letters-stage .mg-float{width:calc(100% - 20px);margin-top:-32px}.mg-letters-stage .mg-shadow{bottom:78px}}
@media(max-width:680px){
 .mg-stage.mg-letters-stage{height:258px;max-width:420px}
 .mg-letters-depth,.mg-letters-face::after{-webkit-mask-image:url('/mg-letters-640.webp');mask-image:url('/mg-letters-640.webp')}
 .mg-letters-stage .mg-float{width:min(330px,calc(100% - 32px));margin-top:-25px}
 .mg-letters-stage .mg-shadow{bottom:48px;width:62%;height:12px;filter:blur(13px)}
 .mg-letters-depth{transform:translateZ(calc(var(--depth) * .6))}
 .mg-letters-face{transform:translateZ(11px)}
 .mg-letters-stage .mg-caption{bottom:12px}
 .mg-letters-face::after{animation-duration:13s}
}
@media(prefers-reduced-motion:reduce){
 .mg-letters-stage *{animation:none!important;transition:none!important}
 .mg-letters-stage .mg-tilt{transform:none!important}
 .mg-letters-core{transform:rotateX(3deg) rotateY(-8deg) rotateZ(-2deg)}
 .mg-letters-face::after{background-position:45% 0;opacity:.2}
}
