/* ============================================================
   Indiexis — the states motion.js moves between

   Every rule is scoped under .mx, which only the script adds and
   only when motion is allowed: with JS off or reduced motion the
   page renders in its finished state and none of this applies.
   ============================================================ */

/* ---- the 3D canvas behind a hero ---- */
.mx .mx-host{position:relative;isolation:isolate}
.mx .mx-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 62%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 62%);
  animation:mx-fade 1.6s cubic-bezier(.16,1,.3,1) both .15s}
.mx .mx-scene.mx-scene-full{-webkit-mask-image:none;mask-image:none}
@media (max-width:760px){
  .mx .mx-scene{opacity:.45;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 75%);mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 75%)}
  .mx .mx-scene.mx-scene-full{opacity:1;-webkit-mask-image:none;mask-image:none}
}
@keyframes mx-fade{from{opacity:0;scale:.92}to{opacity:1;scale:1}}

/* ---- hero cards tip in perspective; the rotation itself is inline ---- */
.mx .mx-card3d{transition:rotate .5s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;will-change:rotate,translate}

/* ---- rise: fade, lift and un-blur ---- */
.mx .mx-rise{opacity:0;translate:0 42px;filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),translate 1.1s cubic-bezier(.16,1,.3,1),filter .9s ease;
  transition-delay:calc(var(--i,0) * 80ms)}
.mx .mx-rise.mx-on{opacity:1;translate:0 0;filter:none}

/* ---- headings, a word at a time ---- */
.mx .mx-words .mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mx .mx-words .mx-w>span{display:inline-block;translate:0 105%;rotate:4deg;transform-origin:0 100%;
  transition:translate 1s cubic-bezier(.16,1,.3,1),rotate 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--w,0) * 45ms)}
.mx .mx-words.mx-said .mx-w>span{translate:0 0;rotate:0deg}

/* ---- photographs unmask ---- */
.mx .mx-unmask{clip-path:inset(14% 8% 14% 8%);scale:1.18;
  transition:clip-path 1.3s cubic-bezier(.16,1,.3,1),scale 1.6s cubic-bezier(.16,1,.3,1)}
.mx .mx-unmask.mx-on{clip-path:inset(0 0 0 0);scale:1}

/* ---- cards lean; a highlight follows the pointer ---- */
.mx .mx-lean{transition:rotate .45s cubic-bezier(.16,1,.3,1)}
.mx .mx-lean:hover{transition:rotate .12s linear}

/* ---- magnetic actions ---- */
.mx .mx-mag{transition:translate .35s cubic-bezier(.16,1,.3,1)}
.mx .mx-mag:hover{transition:translate .08s linear}

/* ---- lite budget (phones, low-core machines): no blur, shorter moves ---- */
.mx-lite .mx-rise{filter:none;translate:0 24px;transition:opacity .7s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 60ms)}
.mx-lite .mx-unmask{clip-path:inset(8% 4% 8% 4%);scale:1.08;transition:clip-path .9s cubic-bezier(.16,1,.3,1),scale 1s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  .mx .mx-rise,.mx .mx-unmask,.mx .mx-words .mx-w>span{opacity:1!important;translate:none!important;rotate:none!important;filter:none!important;clip-path:none!important;scale:none!important}
  .mx .mx-scene{display:none}
}

/* ---- Performance (2026-10-31): phones and low-power devices ----
   Every listing loads this file, so the lite rules live here: no live blur
   behind any element, and no blur filter on elements waiting to reveal. */
html.mx-lite *,html.mx-lite *::before,html.mx-lite *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.mx-lite .mx .mx-rise,html.mx-lite .mx-rise{filter:none!important}
@media (hover:none),(max-width:900px){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .mx .mx-rise{filter:none!important}
}