/* =====================================================================
   THE RISE
   A scroll driven arrival, packaged so it can be dropped on any page.

   The shape is always the same. A tall track sets how much scrolling the
   arrival is worth. Inside it a stage sticks to the top of the viewport
   for the whole of that track, so the page scrolls while the picture
   stays. Scroll position drives the picture, and nothing else.

   The module carries no words. Whatever belongs over the picture is the
   host page's, and goes in .rise__type, which is laid out but never
   styled here beyond being centred and out of the way of the pointer.

   Two things the host page can set:
     --rise-track   how tall the scrolling is. 220svh by default.
     --rise-focus   the object-position of the picture. 50% 55% default.

   Never edit site.css. This is a layer beside it.
   ===================================================================== */

.rise{position:relative}

.rise__track{
  height:var(--rise-track,220vh);
  height:var(--rise-track,220svh);
}

.rise__stage{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  background:#82b9da;
}

/* The poster is the film's own first frame, so a slow network cannot
   reveal a different composition than the one that starts to play.

   rise.js sets background-image on the element itself rather than
   through a custom property here. A relative url() inside a custom
   property is resolved against the stylesheet that uses it, not the
   page, so a path written for the page would climb from this file's
   own folder and miss. Set on the element, it resolves against the
   document, which is what a path in the markup means. */
.rise__film{
  position:absolute;inset:0;overflow:hidden;contain:paint;
  background-color:#82b9da;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--rise-focus,50% 55%);
}
.rise__film video{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--rise-focus,50% 55%);
  background:transparent;
}

/* A cream lift at the top and a little weight at the foot, so type can
   sit on the picture without a box behind it. */
.rise__film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(251,249,244,.14),transparent 42%,rgba(14,22,40,.10));
}

.rise__type{
  position:absolute;inset:0;z-index:2;
  display:grid;align-items:start;
  pointer-events:none;
}
/* links and buttons the host puts over the picture stay usable */
.rise__type a,.rise__type button{pointer-events:auto}

/* ---------------------------------------------------------------------
   A still, complete arrival when motion is not wanted. The track
   collapses to one screen, the stage stops sticking, the film is taken
   out and the poster underneath it is what remains. rise.js also
   refuses to arm the glide in this mode, so the page never moves on its
   own. Nothing is hidden either way.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rise__track{height:100vh;height:100svh}
  .rise__stage{position:relative}
  .rise__film video{display:none}
}

/* With no JavaScript there is no film and no scrubbing, so the tall
   track would be that many screens of one still picture. */
.rise--nojs .rise__track{height:100vh;height:100svh}
.rise--nojs .rise__stage{position:relative}