/* Motion system styles - paired with fx/motion.js and fx/aurora.js */

/* WebGL aurora canvas: sits behind everything in its host */
.fx-aurora-canvas{position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;z-index:-1;
  /* confined to a bloom away from the copy: a full-bleed shader behind body
     text costs readability and fights the editorial type */
  -webkit-mask-image:radial-gradient(62% 74% at 74% 36%, #000 0%, oklch(0 0 0/0.45) 46%, transparent 76%);
  mask-image:radial-gradient(62% 74% at 74% 36%, #000 0%, oklch(0 0 0/0.45) 46%, transparent 76%);}
/* the journey hero is centred copy, so its bloom sits low and wide */
.journey-hero .fx-aurora-canvas{
  -webkit-mask-image:radial-gradient(96% 80% at 50% 108%, #000 0%, oklch(0 0 0/0.4) 44%, transparent 78%);
  mask-image:radial-gradient(96% 80% at 50% 108%, #000 0%, oklch(0 0 0/0.4) 44%, transparent 78%);}

/* spring reveal - overshoot easing reads as physical rather than linear */
[data-reveal]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity 620ms cubic-bezier(0.22,1,0.36,1),
             transform 720ms cubic-bezier(0.34,1.42,0.44,1);
  will-change:opacity,transform;}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal="scale"]{transform:translate3d(0,18px,0) scale(0.97);}
[data-reveal="left"]{transform:translate3d(-26px,0,0);}
[data-reveal="right"]{transform:translate3d(26px,0,0);}

/* magnetic / tilt targets need their own compositor layer */
[data-magnetic],[data-tilt]{will-change:transform;}
[data-tilt]{transition:transform 420ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 300ms ease, border-color 300ms ease;transform-style:preserve-3d;}
[data-magnetic]{transition:background 180ms ease,color 180ms ease;}

/* scroll progress rail */
.fx-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--color-primary),var(--color-glow,#7b4bb5),var(--color-accent));}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  [data-tilt],[data-magnetic]{transform:none!important;transition:none!important;}
  .fx-progress{display:none;}
}