/* ==========================================================
   MR TECHNICAL — 3D OBJECT LAYER
   Isometric trade-tool objects drawn from assets/svg/mr-objects.svg.
   Loaded only when "3D objects" is enabled in the Customizer.

   Everything here is additive. Switch the layer off and the theme
   returns to its previous flat-icon state with no markup changes.

   TIERS
     .mr-o        card icons        — 72px, tilt on hover
     .mr-stage    hero theatre      — large, animated, orbiting
     .mr-amb      ambient           — faint, gutter-locked, drifting

   TWO RULES THAT MUST NOT BE BROKEN
   1. FLATTENING. `opacity` is a grouping property: any value below 1
      forces transform-style back to flat, collapsing 3D faces onto one
      plane. Fade-in therefore lives on the outer wrapper (.mr-obj) and
      motion on the inner element (.mr-obj-v). Never merge the two.
   2. COLLISION. Ambient objects are positioned with calc(50% ± half
      wrap), so they sit in the page gutters and can never overlap the
      content column. Never reposition them in raw percentages.
   ========================================================== */

/* ---------- shared ---------- */
.mr-o{display:block;width:72px;height:72px;margin-bottom:16px;position:relative;z-index:1;
  filter:drop-shadow(0 8px 14px rgba(42,14,92,.18));
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.mr-o-sm{width:56px;height:56px;margin-bottom:12px}
.mr-o-lg{width:92px;height:92px}
.mr-o-xs{width:34px;height:34px;margin-bottom:0;flex:none}

/* the plugin wraps icons in <i>; in 3D mode the tinted box is dropped
   so the object reads as a free-standing solid rather than a glyph */
.mr-3d .sc>i,
.mr-3d .wc>i,
.mr-3d .spc>i{background:none !important;width:72px;height:72px;border-radius:0;
  display:block;margin-bottom:16px;color:inherit}
.mr-3d .sc>i svg,
.mr-3d .wc>i svg,
.mr-3d .spc>i svg{width:100%;height:100%;
  filter:drop-shadow(0 8px 14px rgba(42,14,92,.18));
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.mr-3d .sc:hover>i svg,
.mr-3d .sc:hover .mr-o,
.mr-3d .tt:hover .mr-o,
.mr-3d .wc:hover>i svg,
.mr-3d .pc:hover .mr-o{transform:translateY(-6px) rotate(-7deg) scale(1.07)}

/* small inline objects inside list rows and chips */
.mr-3d .hero-ch i,
.mr-3d .bk-l li>i,
.mr-3d .arc>i{width:34px;height:34px;background:none;border-radius:0}
.mr-3d .hero-ch i svg,
.mr-3d .bk-l li>i svg,
.mr-3d .arc>i svg{width:100%;height:100%}

/* ---------- ambient ---------- */
.mr-amb{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mr-amb i{position:absolute;display:block;font-style:normal}
.mr-amb svg{width:100%;height:100%;opacity:.17}
.mr-amb.is-dark svg{opacity:.13}
.mr-amb .p1{left:calc(50% - 700px);top:9%;    width:168px;height:168px;animation:mrDriftA 13s ease-in-out infinite}
.mr-amb .p2{left:calc(50% + 528px);bottom:8%; width:150px;height:150px;animation:mrDriftB 16s ease-in-out infinite}
.mr-amb .p3{left:calc(50% + 546px);top:11%;   width:124px;height:124px;animation:mrDriftB 14s ease-in-out infinite}
.mr-amb .p4{left:calc(50% - 672px);bottom:7%; width:136px;height:136px;animation:mrDriftA 18s ease-in-out infinite}
@keyframes mrDriftA{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(7deg)}}
@keyframes mrDriftB{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-17px) rotate(-8deg)}}
/* below this width there is no gutter left to sit in */
@media(max-width:1460px){.mr-amb{display:none}}

/* sections must establish a stacking context for ambient to sit behind */
.mr-3d .sec,.mr-3d .ft{position:relative;overflow:hidden}
.mr-3d .sec>.wrap,.mr-3d .ft>.wrap{position:relative;z-index:2}

/* ---------- hero ---------- */
.mr-3d .hero{position:relative;overflow:hidden;isolation:isolate}
.mr-3d .hero>.wrap{position:relative;z-index:5}

.mr-floor{position:absolute;inset:0;z-index:1;pointer-events:none;perspective:300px;overflow:hidden}
.mr-floor i{position:absolute;left:-70%;right:-70%;bottom:-32%;height:150%;display:block;
  transform:rotateX(75deg);transform-origin:bottom center;
  background-image:
    linear-gradient(rgba(76,29,149,.26) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,29,149,.15) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.45) 40%,transparent 74%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.45) 40%,transparent 74%);
  animation:mrFloor 3.6s linear infinite}
@keyframes mrFloor{to{background-position:0 74px,0 0}}

.mr-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.26}
.mr-grain::before{content:"";position:absolute;inset:-200%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  animation:mrGrain .7s steps(4) infinite}
@keyframes mrGrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,-4%)}
  50%{transform:translate(2%,3%)}75%{transform:translate(-2%,2%)}100%{transform:translate(0,0)}}

/* gutter objects — locked outside the content column */
.mr-gutter{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mr-gutter .mr-obj{opacity:0;animation:mrIn 1s cubic-bezier(.2,.7,.3,1) forwards}
.mr-gutter svg{opacity:.48}
.mr-gutter .g-l{width:152px;height:152px;top:11%;left:calc(50% - 646px)}
.mr-gutter .g-r{width:134px;height:134px;bottom:5%;left:calc(50% + 556px)}
.mr-gutter .g-l .mr-obj-v{animation:mrDriftA 11s ease-in-out infinite}
.mr-gutter .g-r .mr-obj-v{animation:mrDriftB 13s ease-in-out infinite}
@media(max-width:1420px){.mr-gutter{display:none}}

/* the hero image column becomes the object theatre */
.mr-stage{position:absolute;inset:-6% -4%;z-index:1;pointer-events:none;
  perspective:1100px;perspective-origin:50% 46%}
.mr-obj{position:absolute;opacity:0;animation:mrIn .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes mrIn{to{opacity:1}}
.mr-obj-v{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.mr-obj svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 16px 24px rgba(42,14,92,.24))}

.mr-stage .s1{width:112px;height:112px;left:-4%;  top:-2%;   animation-delay:.10s}
.mr-stage .s2{width:94px; height:94px; right:-2%; top:4%;    animation-delay:.22s}
.mr-stage .s3{width:78px; height:78px; right:4%;  bottom:16%;animation-delay:.34s}
.mr-stage .s4{width:98px; height:98px; left:-2%;  bottom:2%; animation-delay:.46s}
.mr-stage .s5{width:74px; height:74px; left:34%;  bottom:-4%;animation-delay:.58s}
.mr-stage .s1 .mr-obj-v{animation:mrBobA 6.4s ease-in-out infinite}
.mr-stage .s2 .mr-obj-v{animation:mrBobB 7.6s ease-in-out infinite}
.mr-stage .s3 .mr-obj-v{animation:mrTilt 9.0s ease-in-out infinite}
.mr-stage .s4 .mr-obj-v{animation:mrBobA 8.4s ease-in-out infinite reverse}
.mr-stage .s5 .mr-obj-v{animation:mrBobB 9.8s ease-in-out infinite}

@keyframes mrBobA{0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(0,-18px,0) rotate(6deg)}}
@keyframes mrBobB{0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(0,-14px,0) rotate(-8deg)}}
/* deliberately not rotateY: spinning a flat SVG edge-on collapses it to
   a zero-width sliver at 90deg. Rotate + scale reads dimensional and
   never degenerates. */
@keyframes mrTilt{0%,100%{transform:translate3d(0,0,0) rotate(-6deg) scale(1)}
  50%{transform:translate3d(0,-16px,0) rotate(8deg) scale(1.05)}}

@media(max-width:980px){
  .mr-stage .s5{display:none}
  .mr-stage .s1{width:88px;height:88px}
  .mr-stage .s2{width:76px;height:76px}
  .mr-stage .s3{width:64px;height:64px}
  .mr-stage .s4{width:78px;height:78px}
}
@media(max-width:560px){.mr-stage{display:none}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .mr-floor i,.mr-grain::before,.mr-amb i,.mr-obj,.mr-obj-v{animation:none !important}
  .mr-obj{opacity:1}
  .mr-grain{display:none}
}