/* Mythica Stage — runtime styles (the effects). Used identically in the editor
   preview and on the live site. */
.mstage { position: relative; overflow: hidden; }
.mstage-base { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mstage-rg { position: absolute; }

/* GLOW — a soft luminous swell over the region */
.mstage-rg.fx-glow { border-radius: 14px; box-shadow: inset 0 0 40px 6px rgba(255,225,150,.5), 0 0 44px rgba(255,215,140,.45); }

/* SHIMMER — a light sweep passes across the region */
.mstage-rg.fx-shimmer { overflow: hidden; border-radius: 8px; }
.mstage-rg.fx-shimmer::before {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  animation: mstage-shim 2.6s linear infinite;
}
@keyframes mstage-shim { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* HOTSPOT — a tappable area, ringed on hover */
.mstage-rg.fx-hotspot { border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(157,182,255,0); transition: box-shadow .2s; }
.mstage-rg.fx-hotspot:hover { box-shadow: inset 0 0 0 2px rgba(157,182,255,.8), 0 0 26px rgba(120,150,255,.5); }

/* POP — a masked copy of the base that lifts off the flat image (parallax = depth) */
.mstage-rg.fx-pop { overflow: hidden; border-radius: 6px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.mstage-rg.fx-pop .mstage-pop { position: absolute; inset: 0; will-change: transform; }

/* COMPARE — before/after wipe (the second image over the base, moved by a handle) */
.mstage-rg.fx-compare { overflow: hidden; border-radius: 6px; cursor: ew-resize; }
.mstage-compare .mstage-after,
.mstage-compare .mstage-before { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mstage-compare .mstage-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ellipse/circle hotspot */
.mstage-rg.shape-ellipse { border-radius: 50%; clip-path: ellipse(50% 50% at 50% 50%); }
.mstage-compare .mstage-handle { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255,255,255,.9); box-shadow: 0 0 8px rgba(0,0,0,.5); }
.mstage-compare .mstage-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: #333; font-size: 14px; text-align: center; line-height: 34px; box-shadow: 0 2px 10px rgba(0,0,0,.4); }

/* HOTSPOT — polygon (SVG) or box; a link + a title/description popup */
.mstage-poly { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mstage-poly .mstage-hs { fill: rgba(157,182,255,0); stroke: rgba(157,182,255,0); stroke-width: .4; pointer-events: auto; transition: fill .2s, stroke .2s; }
.mstage-poly .mstage-hs:hover { fill: rgba(157,182,255,.18); stroke: rgba(200,220,255,.9); }
.mstage-hspop { position: absolute; z-index: 5; transform: translate(-50%, -108%); pointer-events: none;
  min-width: 130px; max-width: 230px; padding: 9px 12px; border-radius: 10px; opacity: 0; transition: opacity .18s;
  background: rgba(14,17,26,.94); border: 1px solid rgba(238,199,122,.34); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.mstage-hspop.show { opacity: 1; }
.mstage-hspop.rectpop { left: 50%; top: 0; opacity: 0; }
.mstage-rg.fx-hotspot:hover .mstage-hspop.rectpop { opacity: 1; }
.mstage-hspop b { display: block; color: #f4e6c2; font-size: 13px; margin-bottom: 3px; }
.mstage-hspop span { display: block; color: #d7ddf0; font-size: 12px; line-height: 1.45; }
.mstage-rg.fx-hotspot { border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(157,182,255,0); transition: box-shadow .2s; }
.mstage-rg.fx-hotspot:hover { box-shadow: inset 0 0 0 2px rgba(157,182,255,.7), 0 0 24px rgba(120,150,255,.45); }