/* RESTOR Media — site-wide parallax layer.
   Everything here only applies once parallax.js adds the "px" class to <html>,
   so the site looks exactly the same if scripts are off or motion is reduced. */

/* Moving layers use the standalone `translate` property so they never
   override the existing hover/rotate `transform` styles. */
.px [data-px],.px .px-orb,.px .px-move{will-change:translate}

/* Home hero: posters drift slower than the page, captions lift and fade */
.px .carousel .bgimg{will-change:translate}
.px .carousel .slide .content{will-change:translate,opacity}

/* Inner-page heroes: content rises and fades, glow drifts on its own layer */
.px .page-hero,.px .art-hero{isolation:isolate}
.px .page-hero::after,.px .art-hero::after{translate:0 var(--px-glow,0px);will-change:translate}
.px .page-hero>.wrap,.px .art-hero>.wrap{will-change:translate,opacity}

/* Ambient depth orbs injected behind section content */
.px .px-host{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.px-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(2px)}
.px-orb.o-gold{background:radial-gradient(circle,rgba(212,169,78,.20),rgba(212,169,78,0) 65%)}
.px-orb.o-crimson{background:radial-gradient(circle,rgba(179,18,26,.26),rgba(179,18,26,0) 65%)}
.px-orb.o-navy{background:radial-gradient(circle,rgba(18,70,106,.28),rgba(18,70,106,0) 65%)}
.px-orb.o-soft{background:radial-gradient(circle,rgba(212,169,78,.16),rgba(212,169,78,0) 65%)}
.px-orb.o-white{background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,0) 65%)}
.px-orb.a{width:520px;height:520px;top:-160px;right:-140px}
.px-orb.b{width:380px;height:380px;bottom:-140px;left:-120px}
.px-orb.c{width:220px;height:220px;top:38%;left:46%}

/* Starfield dots in dark heroes for a distant depth layer */
.px-stars{position:absolute;inset:-30% 0 0 0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1px 1px at 28% 68%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 34%,rgba(212,169,78,.8),transparent 60%),
    radial-gradient(1px 1px at 62% 78%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 18%,rgba(255,255,255,.65),transparent 60%),
    radial-gradient(1px 1px at 88% 56%,rgba(212,169,78,.7),transparent 60%),
    radial-gradient(1px 1px at 6% 84%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 54% 8%,rgba(255,255,255,.6),transparent 60%);
  background-size:520px 360px}

/* Images that drift inside their frames get a little extra room */
.px .m-card .art{inset:-16% 0;transition:transform .4s}
.px .m-photo .ph-img{inset:-9% 0;height:118%}

@media(max-width:560px){
  .px-orb.a{width:340px;height:340px;top:-120px;right:-120px}
  .px-orb.b{width:260px;height:260px}
  .px-orb.c{display:none}
}
