/* 3D logo vortex for the Experience Apps hero (Corey 2026-10-20).
   Ported from the membership platform hero so /experience shows the same orbiting-logo vortex,
   with the 18 Experience app logos. The engine is site/js/membership-vortex.js (it only needs
   #mfMosaic.mf-mosaic--vortex with .mf-tile > .mf-tile__in > .mf-tile__logo). These rules are the
   vortex-only layer; the base .mf-mosaic / .mf-tile styles come from experience-hero.css.
   Everything here is scoped to .mf-mosaic--wide / .mf-mosaic--vortex / .is-vortex, so the static
   grid still shows if the script never runs. */

/* wide tiles: the vortex logos are larger than the static grid tiles */
.mf-mosaic--wide .mf-tile{width:var(--tw)}
.mf-mosaic--wide .mf-tile{aspect-ratio:2.55/1}
.mf-mosaic--wide .mf-tile__in{padding:0}
.mf-hero--main .mf-mosaic--wide{max-width:none}
@media(max-width:560px){.mf-mosaic--wide .mf-tile{width:var(--tw)}.mf-mosaic.mf-mosaic--wide{max-width:none}}

/* the vortex fills its container; the script forces a square once it runs */
.mf-mosaic.mf-mosaic--wide.is-vortex{aspect-ratio:100/100!important;overflow:visible;contain:none;isolation:isolate}
@media(max-width:560px){.mf-mosaic.mf-mosaic--wide.is-vortex{aspect-ratio:100/94!important}}

/* on phones the logo cloud sits at the top of the hero, above the copy (first thing seen) */
@media(max-width:980px){.mf-hero--main .mf-hero__media{order:-1;margin:-6px 0 -6px}.mf-hero--main .mf-hero__grid{gap:0}}

.is-vortex .mf-tile{left:50%;top:50%;aspect-ratio:2.55/1;transform:translate3d(-50%,-50%,0);transform-origin:50% 50%;will-change:auto}
.is-vortex .mf-tile__in{animation:none;translate:none;filter:blur(calc(var(--bl,0) * 1px));transition:filter .4s}
.is-vortex .mf-tile:hover .mf-tile__in,.is-vortex .mf-tile:focus-visible .mf-tile__in{scale:1}
.is-vortex .mf-tile__in{filter:none;transition:none;will-change:auto}
.mf-tile__rot:not(.is-dense) .mf-tile__layer:nth-child(odd){display:none}
.mf-tile__rot{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.mf-tile__rot img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.is-vortex .mf-tile__logo{filter:brightness(var(--lit,1))}
.is-vortex .mf-tile__glow{display:none}
.mf-vortex__dust{position:absolute;left:-12%;top:-12%;width:124%;height:124%;pointer-events:none;z-index:0}

/* text sits above the logos on desktop and lets pointer events through to them, except its buttons */
@media(min-width:981px){.mf-hero--main .mf-hero__copy{position:relative;z-index:3;pointer-events:none}.mf-hero--main .mf-hero__copy a,.mf-hero--main .mf-hero__copy button{pointer-events:auto}.mf-hero--main .mf-mosaic.is-vortex{z-index:1}}

/* the vortex follows a finger without blocking page scroll */
.mf-mosaic.is-vortex{touch-action:pan-y}

/* The front face must fill its tile exactly like the 3D layers behind it. app-showcase.css caps the static grid logos at 44px tall,
   which in the vortex shrank only the face and left the full-size back layers showing as a ghost echo (Corey 2026-10-21). */
.ex-hero .is-vortex .mf-tile__logo{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;aspect-ratio:auto!important;object-fit:contain}