/* uae-map3d.css — About hero: interactive 3D map of the seven emirates (web/visual team).
   Markup is generated at build time (uaeg_build/uae_map3d.py); uae-map3d.js adds parallax, lift and labels. */
.visual.m3{--m3-green:#14462f;--m3-deep:#0a2418;--m3-red:#cc1729;--m3-sand:#efe6d2;--m3-sand2:#d9c9a6;--m3-side:#8f7c5a;
  --rx:46deg;--ry:0deg;--rz:-6deg;
  background:radial-gradient(120% 90% at 70% 18%,#1d5a3e 0,var(--m3-green) 38%,var(--m3-deep) 100%);
  min-height:430px;isolation:isolate;color:#fff;contain:layout paint}
.visual.m3::after{content:none}
.visual.m3::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,#ffffff08 0 1px,transparent 1px 34px);
  -webkit-mask:radial-gradient(70% 60% at 55% 45%,#000,transparent);mask:radial-gradient(70% 60% at 55% 45%,#000,transparent)}
.visual.m3 .visual-stamp{z-index:3;left:auto;right:auto;inset-inline-end:20px;background:#ffffffe6;color:var(--m3-green)}
.visual.m3 .visual-logo{z-index:2;left:0;right:0;bottom:0;padding:56px 28px 24px;inset-inline-start:0;text-align:start;pointer-events:none;
  background:linear-gradient(0deg,#071a11f0 0,#071a11b3 45%,transparent)}
.visual.m3 .visual-logo strong{font-size:clamp(20px,2.1vw,25px);line-height:1.35}
.visual.m3 .visual-logo span{display:block;margin-top:4px;color:#e9efe9;opacity:.9}

.m3-stage{position:absolute;inset:50px 18px 128px;pointer-events:none;perspective:1200px;perspective-origin:50% 0%;display:grid;place-items:center}
.m3-float{width:min(86%,500px);pointer-events:none;transform-style:preserve-3d}
.m3-tilt{transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.m3-svg{pointer-events:none;display:block;width:100%;height:auto;overflow:visible}

.m3-shadow{fill:#000;opacity:.45}
.m3-sides use{fill:var(--m3-side)}
.m3-sides use:first-child{fill:#5d4e37}
.m3-neutral{fill:#b9ab8c;stroke:#fff;stroke-width:.5;stroke-dasharray:2 2}
.m3-em{cursor:pointer;outline:none;pointer-events:visiblePainted}
.m3-em path{fill:url(#m3-top);stroke:#fff;stroke-width:.9;stroke-linejoin:round;transition:fill .25s,opacity .25s}
.m3-em .m3-cap{fill:var(--m3-green);stroke:#fff;stroke-width:1.2;pointer-events:none}
.m3-em:hover path,.m3-em:focus-visible path,.m3-em.on path{fill:var(--m3-red)}
.m3-em:focus-visible path{stroke:#fff;stroke-width:2.6}
.m3.has-on .m3-em:not(.on) path{fill:var(--m3-sand2)}
.m3.has-on .m3-em.on path{fill:#7c1f20}   /* the "socket" left behind under the lifted piece */
.m3.has-on .m3-em.on .m3-cap{opacity:0}

.m3-lift{pointer-events:none;transform:translateY(0);transition:transform .32s cubic-bezier(.2,.8,.25,1.25);visibility:hidden}
.m3-lift.up{transform:translateY(-16px);visibility:visible}
.m3-lift-s use{fill:#8e1320}
.m3-lift-s use:first-child{fill:#5e0c15}
.m3-lift-t{fill:var(--m3-red);stroke:#fff;stroke-width:1.1}

.m3-hint{position:absolute;z-index:2;top:22px;inset-inline-start:22px;margin:0;font-size:12px;font-weight:700;color:#dfe9e3;opacity:.85;pointer-events:none}
.m3-hint::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--m3-red);box-shadow:0 0 0 3px #cc172940;margin-inline-end:8px;vertical-align:1px}

.m3-tip{position:absolute;z-index:4;min-width:180px;max-width:240px;padding:12px 14px 12px;border-radius:14px;background:#fff;color:var(--m3-green);
  box-shadow:0 18px 40px #00000059;border-inline-start:4px solid var(--m3-red);transform:translate(-50%,-100%);font-size:13px;line-height:1.55}
.m3-tip[hidden]{display:none}
.m3-tip b{display:block;font-size:17px;font-weight:900;line-height:1.3}
.m3-tip .m3-alt{font-size:12px;color:#5b6f65;font-weight:700}
.m3-tip .m3-row{display:flex;justify-content:space-between;gap:12px;margin-top:2px}
.m3-tip .m3-row strong{font-weight:900;color:var(--m3-red)}
.m3-tip .m3-cap-l{margin:6px 0 4px;padding-top:6px;border-top:1px solid #e3ebe6;color:#3d5649}
.m3-tip .m3-go{display:none;gap:8px;margin-top:8px}
.m3-tip .m3-go a{flex:1;text-align:center;padding:7px 8px;border-radius:9px;background:var(--m3-green);color:#fff;font-weight:800;font-size:12px;text-decoration:none}
.m3-tip .m3-go a+a{background:#eef3f0;color:var(--m3-green)}
.m3.touch .m3-tip .m3-go{display:flex}
.m3-tip::after{content:"";position:absolute;bottom:-7px;left:50%;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.m3-tip.below{transform:translate(-50%,0)}
.m3-tip.below::after{top:-7px;bottom:auto}
.m3-tip.side{transform:translate(-100%,-50%)}
.m3-tip.side::after{top:50%;bottom:auto;left:auto;right:-7px;transform:translateY(-50%) rotate(45deg)}

@media (prefers-reduced-motion:no-preference){
  .m3.live .m3-float{animation:m3-float 9s ease-in-out infinite alternate}
}
@keyframes m3-float{from{transform:translateY(4px) rotateZ(.6deg)}to{transform:translateY(-6px) rotateZ(-.6deg)}}
@media (prefers-reduced-motion:reduce){
  .m3-tilt,.m3-lift,.m3-em path{transition:none}
}
@media (max-width:800px){
  .visual.m3{min-height:400px}
  .m3-stage{inset:86px 8px 138px}
  .m3-float{width:min(92%,420px)}
  .visual.m3 .visual-logo{padding:36px 20px 18px}
  .m3-hint{top:62px;inset-inline-start:20px;font-size:11.5px}
  /* small screens: a compact label docks at the top of the card instead of following the emirate */
  .m3-tip,.m3-tip.below,.m3-tip.side{left:10px!important;right:10px;top:10px!important;max-width:none;min-width:0;transform:none;
    padding:10px 12px;font-size:12px;line-height:1.45;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:center}
  .m3-tip[hidden]{display:none}
  .m3-tip::after{content:none}
  .m3-tip b{font-size:15px;grid-column:1}
  .m3-tip .m3-alt{grid-column:1;grid-row:2}
  .m3-tip .m3-cap-l{display:none}
  .m3-tip .m3-row{grid-column:2;margin:0}
  .m3-tip .m3-row:nth-of-type(1){grid-row:1}
  .m3-tip .m3-row:nth-of-type(2){grid-row:2}
  .m3-tip .m3-go{grid-column:1/-1;margin-top:8px}
}
@media (forced-colors:active){.m3-em path{fill:Canvas;stroke:CanvasText}.m3-em:focus-visible path,.m3-em.on path{fill:Highlight}}
.m3.has-on .m3-float{animation-play-state:paused}