/* Painted icons stay the source of truth. All movement is a lightweight DOM/CSS rig. */
.gm-art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:80px;height:80px;pointer-events:none;isolation:isolate;--hammer-cut:polygon(0 0,100% 0,100% 36.5%,54% 36.5%,48% 39%,47.6% 45.5%,24% 41.6%,21% 39.5%,0 39.5%);--anvil-cut:polygon(0 39.5%,21% 39.5%,24% 41.6%,47.6% 45.5%,48% 39%,54% 36.5%,100% 36.5%,100% 100%,0 100%);--lid-cut:polygon(0 0,100% 0,100% 42%,88% 56%,78% 58%,77% 75%,67% 79%,51% 70%,45% 68%,36% 65%,25% 57%,16% 40%,0 40%);--body-cut:polygon(0 40%,16% 40%,25% 57%,36% 65%,45% 68%,51% 70%,67% 79%,77% 75%,78% 58%,88% 56%,100% 42%,100% 100%,0 100%)}
.gm-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px #0007)}
.gm-rig{position:absolute;inset:0;visibility:hidden;perspective:160px}.gm-art .gm-still{transition:opacity .12s}
.gn-item:is(.gm-active,.gm-keyboard) .gm-rig{visibility:visible}.gn-item:is(.gm-active,.gm-keyboard) .gm-still{opacity:0}
.gm-hammer,.gm-anvil,.gm-bag-body,.gm-bag-lid,.gm-scroll-arrows,.gm-scroll-roll,.gm-scroll-seal{position:absolute;inset:0}
.gm-hammer{transform-origin:90% 28%}.gm-hammer img{clip-path:var(--hammer-cut)}.gm-anvil img{clip-path:var(--anvil-cut)}
.gn-item:is(.gm-active,.gm-keyboard) .gm-hammer{animation:gm-strike 1.15s cubic-bezier(.3,0,.2,1) both}
.gn-item:is(.gm-active,.gm-keyboard) .gm-anvil{animation:gm-anvil 1.15s both}
@keyframes gm-strike{0%,100%{transform:rotate(0)}28%{transform:rotate(31deg) translateY(-1px)}44%{transform:rotate(-3deg) translateY(1px)}51%{transform:rotate(7deg)}65%{transform:rotate(0)}}
@keyframes gm-anvil{0%,42%,58%,100%{transform:translate(0)}45%{transform:translateY(1px)}49%{transform:translate(-.5px,0)}}
.gm-sparks{position:absolute;left:40%;top:42%}.gm-particle{position:absolute;width:2px;height:2px;opacity:0;border-radius:50%;background:#ffdf82;box-shadow:0 0 4px 1px currentColor;color:#ff9c2f}.gm-ember{height:3px;transform:rotate(30deg)}
.gn-item:is(.gm-active,.gm-keyboard) .gm-ember{animation:gm-spark .55s calc(.49s + var(--delay)) ease-out both}
@keyframes gm-spark{0%{opacity:0;transform:translate(0) scale(.3)}8%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.15)}}
.gm-impact{position:absolute;left:33%;top:36%;width:18%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#fff4ce,#ffad45aa 30%,transparent 70%);opacity:0}
.gn-item:is(.gm-active,.gm-keyboard) .gm-impact{animation:gm-impact .45s .48s both}@keyframes gm-impact{0%,100%{opacity:0;transform:scale(.5)}15%{opacity:.95;transform:scale(1.3)}}
/* Three distinct spell schools: cold blue, ember orange, and violet arcane. */
.gm-magic{position:absolute;border:1px solid currentColor;opacity:0;box-shadow:0 0 7px currentColor,inset 0 0 6px currentColor;transform:rotate(45deg)}.gm-frost{left:13%;top:45%;width:28%;height:28%;color:#8bdeff;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.gm-fire{left:65%;top:42%;width:23%;height:33%;color:#ffb05e;border-radius:70% 20% 70% 35%}.gm-arcane{left:35%;top:15%;width:31%;height:31%;color:#ce9cff;border-radius:50%;outline:1px solid #b892e66b;outline-offset:3px}
.gn-item:is(.gm-active,.gm-keyboard) .gm-magic{animation:gm-cast 1.5s ease-out both}.gn-item:is(.gm-active,.gm-keyboard) .gm-fire{animation-delay:.1s}.gn-item:is(.gm-active,.gm-keyboard) .gm-arcane{animation-delay:.2s}
@keyframes gm-cast{0%{opacity:0;transform:rotate(20deg) scale(.5)}30%{opacity:.9;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(85deg) scale(1.3)}}
.gm-motes{position:absolute;left:50%;top:55%}.gm-spell:nth-child(3n+1){color:#8cdeff;background:#b6ecff}.gm-spell:nth-child(3n+2){color:#ff9b4e;background:#ffd4a4}.gm-spell:nth-child(3n){color:#bc8fff;background:#e0caff}
.gn-item:is(.gm-active,.gm-keyboard) .gm-spell{animation:gm-spark 1.2s calc(.1s + var(--delay)) both}
/* The map and front flap lift together, exposing a warm light from the bag. */
.gm-bag-body img{clip-path:var(--body-cut)}.gm-bag-lid img{clip-path:var(--lid-cut)}.gm-bag-lid{transform-origin:50% 35%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gm-bag-mouth{position:absolute;left:21%;top:38%;width:62%;height:28%;border:1px solid #805e36;border-radius:50% 50% 25% 25%;background:radial-gradient(ellipse,#ffda9366,#120e08 72%);opacity:0}
.gm-bag-light{position:absolute;left:22%;top:13%;width:60%;height:50%;background:conic-gradient(from 154deg at 50% 100%,transparent,#ffdf88aa 15deg,transparent 23deg,#ffeec199 29deg,transparent 42deg,#f5c870aa 53deg,transparent 63deg);mask-image:linear-gradient(transparent,#000 90%);opacity:0;filter:blur(1px)}
.gn-item:is(.gm-active,.gm-keyboard) .gm-bag-lid{transform:translateY(-13%) rotateX(48deg) rotate(-4deg)}.gn-item:is(.gm-active,.gm-keyboard) .gm-bag-mouth{opacity:1}.gn-item:is(.gm-active,.gm-keyboard) .gm-bag-light{animation:gm-bag-glow 1.2s both}
@keyframes gm-bag-glow{0%,15%{opacity:0}50%{opacity:.85}100%{opacity:.45}}
.gm-bag-motes{position:absolute;left:50%;top:42%}.gm-gold{color:#e5c07b;background:#ffe9b9}.gn-item:is(.gm-active,.gm-keyboard) .gm-gold{animation:gm-spark 1.5s calc(.3s + var(--delay)) both}
/* Portal clipped to the actual dark opening, never a green wash over the masonry. */
.gm-portal{position:absolute;left:38%;top:36%;width:28%;height:51%;clip-path:polygon(0 100%,0 35%,10% 17%,45% 0,65% 6%,100% 31%,100% 100%);background:radial-gradient(ellipse at 50% 55%,#0a1714 14%,#4d8f3e 50%,#a2e88c 74%,#213621 98%);opacity:0;transform:scaleY(.1);transform-origin:50% 100%;transition:opacity .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.gm-portal-depth{position:absolute;inset:0;background:repeating-conic-gradient(from 30deg at 50% 60%,transparent 0 30deg,#b2f67a55 50deg,transparent 75deg);filter:blur(1.5px)}
.gm-portal-rune{position:absolute;left:39%;top:46%;font-size:8px;color:#d2ffa9;text-shadow:0 0 4px #c5ff78}
.gn-item:is(.gm-active,.gm-keyboard) .gm-portal{opacity:.9;transform:scaleY(1)}.gn-item:is(.gm-active,.gm-keyboard) .gm-portal-depth{animation:gm-portal-turn 1.8s ease-out both}@keyframes gm-portal-turn{from{transform:rotate(-70deg) scale(1.3)}to{transform:rotate(45deg) scale(1.1)}}
.gm-portal-mist{position:absolute;left:33%;top:79%;width:39%;height:13%;background:radial-gradient(ellipse,#aeed8455,transparent 70%);opacity:0}.gn-item:is(.gm-active,.gm-keyboard) .gm-portal-mist{opacity:.7;transition:opacity .7s}
/* Arrows remain in place, the painted roll lifts and a short parchment opens below it. */
.gm-scroll-arrows img{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,0 44%,15% 44%,83% 24%,92% 40%,87% 56%,73% 60%,66% 73%,51% 71%,45% 65%,18% 76%,8% 68%,0 44%)}
.gm-scroll-roll img{clip-path:polygon(0 44%,15% 44%,83% 24%,92% 40%,87% 56%,73% 60%,66% 73%,51% 71%,45% 65%,18% 76%,8% 68%)}
.gm-scroll-seal img{clip-path:polygon(43% 39%,60% 35%,68% 49%,67% 73%,51% 71%)}.gm-scroll-seal{transform-origin:51% 49%;transition:transform .5s}
.gm-parchment{position:absolute;left:26%;top:44%;width:51%;height:33%;transform-origin:50% 0;transform:rotate(-20deg) scaleY(0);opacity:0;border:1px solid #9e7743;background:linear-gradient(90deg,#b48d55,#f0d59d 20%,#dbc087 80%,#ad8046);clip-path:polygon(0 0,100% 0,98% 90%,92% 96%,80% 93%,70% 100%,52% 95%,40% 99%,30% 95%,10% 99%,0 93%);box-shadow:0 2px 3px #0009;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .2s}
.gm-parchment i{position:absolute;height:1px;background:#79603c99;left:19%;width:64%;top:30%}.gm-parchment i:nth-child(2){top:43%;width:52%}.gm-parchment i:nth-child(3){top:56%;width:59%}.gm-parchment i:nth-child(4){top:69%;width:35%}
.gm-scroll-roll{transition:transform .55s}.gn-item:is(.gm-active,.gm-keyboard) .gm-scroll-roll{transform:translate(0,-5%)}.gn-item:is(.gm-active,.gm-keyboard) .gm-scroll-seal{transform:translate(4%,-8%) rotate(-18deg)}.gn-item:is(.gm-active,.gm-keyboard) .gm-parchment{opacity:1;transform:rotate(-20deg) scaleY(1)}

/* A sealed dispatch: a short seal glow, then three illuminated ink strokes. */
.gm-news{--news-seal-glow:#d8b36d}
:root[data-gb-faction=horde] .gm-news{--news-seal-glow:#ed7150}
:root[data-gb-faction=alliance] .gm-news{--news-seal-glow:#8ac6ff}
.gm-news-seal{position:absolute;inset:0;opacity:0}
.gm-news-seal img{clip-path:polygon(61% 21%,73% 17%,85% 23%,88% 34%,83% 42%,85% 52%,76% 48%,73% 43%,60% 37%)}
.gn-item:is(.gm-active,.gm-keyboard) .gm-news-seal{animation:gm-news-seal 1.15s ease-out both}
@keyframes gm-news-seal{0%,100%{opacity:0;filter:brightness(1) drop-shadow(0 0 0 transparent)}18%,30%{opacity:1;filter:brightness(1.85) drop-shadow(0 0 3px var(--news-seal-glow))}65%{opacity:.35;filter:brightness(1.3) drop-shadow(0 0 1px var(--news-seal-glow))}}
.gm-news-lines,.gm-news-lines>i{position:absolute;inset:0}
.gm-news-lines>i{opacity:0;background:linear-gradient(100deg,#ffe8a1,#e8b04d 55%,#fff1c3);filter:drop-shadow(0 0 2px #f8cd75)}
.gm-news-lines>i:nth-child(1){clip-path:polygon(36% 35%,44% 36%,66% 44%,65% 47%,53% 43%,35% 39%)}
.gm-news-lines>i:nth-child(2){clip-path:polygon(32% 46%,41% 47%,67% 53%,66% 56%,51% 53%,31% 50%);--line-delay:.16s}
.gm-news-lines>i:nth-child(3){clip-path:polygon(30% 56%,39% 58%,67% 63%,65% 66%,47% 63%,29% 60%);--line-delay:.32s}
.gn-item:is(.gm-active,.gm-keyboard) .gm-news-lines>i{animation:gm-news-read .65s calc(.24s + var(--line-delay,0s)) ease-out both}
@keyframes gm-news-read{0%,100%{opacity:0}25%{opacity:.85}55%{opacity:.5}}
.gm-news-dust{position:absolute;left:72%;top:30%}.gm-news-mote{width:1.5px;height:1.5px;color:#ddb875;background:#fff1c5}
.gn-item:is(.gm-active,.gm-keyboard) .gm-news-mote{animation:gm-spark .75s calc(.2s + var(--delay)) ease-out both}
@media(max-width:900px) and (min-width:721px){.gm-art{width:70px;height:70px}}
@media(max-width:720px){.gm-art{position:relative;left:auto;bottom:auto;transform:none;display:block;width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){.gm-art *{animation:none!important;transition:none!important}.gn-item:is(.gm-active,.gm-keyboard) .gm-still{opacity:1;filter:drop-shadow(0 0 3px var(--gb-accent))}.gn-item:is(.gm-active,.gm-keyboard) .gm-rig{visibility:hidden}}

:root[data-gm-motion=off] .gm-art *{animation:none!important;transition:none!important}
:root[data-gm-motion=off] .gm-art .gm-rig{visibility:hidden!important}
:root[data-gm-motion=off] .gm-art .gm-still{opacity:1!important;filter:drop-shadow(0 3px 4px #0007)}