/* reveal.css - the in-view animation layer (v6, 2026-10-16).

Kimberly's live site slides each photograph a full frame-width in from the edge
of its own box and fades its copy as you scroll to it. reveal.js does the same
thing here; this file is the look. Read reveal.js for the measurements taken
off the live site before anything was copied.

Nothing in here hides anything on its own: the "armed" state only exists while
<html> carries .rv-js, which reveal.js adds before the page paints. If the
script never runs, every rule below is inert and the page is a normal page. */

html.rv-js .rv {
  opacity: 0;
  transition: transform var(--rv-dur, .75s) cubic-bezier(.25, .46, .45, .94) var(--rv-delay, 0s),
              opacity var(--rv-dur, .75s) linear var(--rv-delay, 0s);
  will-change: transform, opacity;
}

/* The four directions, taken from her own attributes: Left and Right on the
   pictures, Up on the copy, none (a plain fade) on the rest. */
html.rv-js .rv[data-rv="left"]  { transform: translate3d(-100%, 0, 0); }
html.rv-js .rv[data-rv="right"] { transform: translate3d(100%, 0, 0); }
html.rv-js .rv[data-rv="up"]    { transform: translate3d(0, 100%, 0); }
html.rv-js .rv[data-rv="rise"]  { transform: translate3d(0, 26px, 0); }
html.rv-js .rv[data-rv="fade"]  { transform: none; }

html.rv-js .rv.rv-in { opacity: 1; transform: none; }

/* The frame a sliding photograph moves inside. It clips, so a picture emerges
   from the edge of its own box the way it does on the live site, instead of
   crossing the page and landing on top of the picture beside it. Kept to
   display/overflow only - every size still comes from styles.css. */
.rv-frame { display: block; overflow: hidden; }

/* styles.css gives the LAST photo in a band both columns at 860px and below
   (`.photoband img:last-child`). That picture now sits inside .rv-frame, and
   grid-column has no effect on a child of a grid item, so the span has to be
   said of the frame - at the same breakpoint, or the third photo would leave a
   hole beside it. Measured, not guessed: at a 764px window the band is two
   columns of 353px and the third photo spans 720px. */
@media (max-width: 860px) {
  .photoband > .rv-frame:last-child { grid-column: 1 / -1; }
}

/* A device that asks for less motion gets the page, still and complete. */
@media (prefers-reduced-motion: reduce) {
  html.rv-js .rv,
  html.rv-js .rv[data-rv] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}