/* ============================================================
   PARALLAX — depth on the full-bleed photographs
   gurvinderaroraphotography.com

   The photograph inside a [data-parallax] frame drifts downward
   as the frame scrolls up, so it travels a little slower than
   the page around it. The frame never changes size, so nothing
   reflows: the picture just moves inside a window that is
   already there.

   Two implementations, identical numbers:

     1. CSS scroll-driven animation (Chrome/Edge 115+, Safari 26+)
        Runs on the compositor — it never touches the main thread,
        so it cannot jank, even on iOS momentum scroll.
     2. js/parallax.js (Firefox, older Safari)
        A rAF loop that writes the same --px-y this file animates.

   Neither runs under prefers-reduced-motion. If neither is
   available the photograph simply sits still — no zoom, no
   layout change, the page looks exactly as it does today.

   To tune the whole site, change the two numbers below.
   To switch it off entirely, remove the <link> from the pages.
   ============================================================ */

/* ---------- the frame: a window that clips ---------- */
[data-parallax]{
  position:relative;
  overflow:hidden;
}

/* ---------- the layer that moves ---------- */
[data-parallax] > img{
  display:block;                 /* kills the inline descender gap */
  --px-zoom:1.16;                /* headroom the drift moves inside of  */
  --px-shift:6%;                 /* half the travel, as % of the image  */
}

/* Gentler on phones: less zoom (so less softening on a dense
   screen) and about half the travel, because the frames are
   physically small and the same distance reads as twice as much. */
@media(max-width:768px){
  [data-parallax] > img{--px-zoom:1.10;--px-shift:3.2%;}
}

/* The zoom is applied only when the drift is actually running.
   Without it the image would sit permanently cropped in browsers
   that get no parallax at all. */

/* ---------- 1. CSS-only, scroll-driven ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    [data-parallax] > img{
      /* longhands, not the shorthand: `animation:` resets
         animation-timeline and animation-range back to auto, so the
         shorthand only works above them, never below. */
      animation-name:px-drift;
      animation-duration:auto;              /* = the length of the timeline */
      animation-timing-function:linear;     /* scroll position, not eased    */
      animation-fill-mode:both;
      animation-timeline:view();            /* default range: cover 0%→100% */
      will-change:transform;
    }
    @keyframes px-drift{
      from{transform:scale(var(--px-zoom)) translate3d(0,calc(var(--px-shift) * -1),0);}
      to  {transform:scale(var(--px-zoom)) translate3d(0,var(--px-shift),0);}
    }

    /* The foreground layer moves the other way as the frame leaves.
       The picture sinking while the type lifts is what actually
       reads as depth — the drift alone is too subtle to notice. */
    [data-parallax-fore]{
      animation-name:px-fore;
      animation-duration:auto;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:cover 55% cover 100%;  /* only as the frame departs */
      will-change:transform,opacity;
    }
    @keyframes px-fore{
      from{transform:translate3d(0,0,0);opacity:1;}
      to  {transform:translate3d(0,-26px,0);opacity:.62;}
    }
  }
}

/* ---------- 2. the js fallback writes --px-y ---------- */
html.px-js [data-parallax] > img{
  transform:scale(var(--px-zoom)) translate3d(0,var(--px-y,0%),0);
  will-change:transform;
}