/* ==========================================================================
   PoolPerf home page - the six-photo hero.                        1 Oct 2026
   Loaded straight after css/site.min.css. HERO ONLY: every rule below is
   scoped to .pp-rev--slides or .pp-hero__play, and nothing in site.min.css
   is edited. The other scroll sections on the page are not touched.
   ========================================================================== */

/* 1. NO DELAYED SCROLLING ON THE HERO.
   site.min.css pins .pp-rev--punch for 200svh. This hero is not pinned at
   all: the top bar and the hero together fill the first screen, and the page
   moves the moment a visitor scrolls.
   54px and 75px are the heights of .pp-top (53.53px above 640px wide, 74.53px
   at 640px and under, where the bar stacks into two lines). If the top bar
   ever changes height, change these two numbers to match.
   The hero must never be TALLER than the window. The scroll engine in
   site.min.js skips any .pp-rev that is not taller than the window, and that
   is what keeps it from holding this section, darkening it, or resetting the
   logo while a visitor is still near the top. So please do not round this up
   to 100svh.
   Two classes (0,2,0) so it beats .pp-rev--punch{height:200svh} and the
   135svh rule inside the 900px media query, whatever the load order. */
.pp-rev.pp-rev--slides{height:calc(100svh - 54px)}
.pp-rev--slides .pp-rev__stick{position:relative;top:auto;height:calc(100svh - 54px)}
@media (max-width:640px){
  .pp-rev.pp-rev--slides,
  .pp-rev--slides .pp-rev__stick{height:calc(100svh - 75px)}
}

/* 2. THE SIX PHOTOGRAPHS. They sit on top of each other and cross-fade.
   The one coming in fades up over the one going out, so the hero never dips
   to black between photographs. There is no .pp-rev__veil in this section,
   so the photographs are never darkened. */
.pp-slides{background:var(--pp-black)}
.pp-slides .pp-slide{position:absolute;inset:0;display:block;opacity:0;z-index:1;transition:opacity 1.2s ease}
.pp-slides .pp-slide.is-under{opacity:1;z-index:2;transition:none}
.pp-slides .pp-slide.is-on{opacity:1;z-index:3}
@media (prefers-reduced-motion:reduce){
  .pp-slides .pp-slide{transition:none}
}

/* 3. THE TWO FILM BUTTONS.
   The button is a flex row with a 10px gap. The words used to be loose text
   either side of the PoolPerf span, so each piece became its own flex item
   and the gap opened up around the name and in front of the (R). The words
   now sit in one span, so the gap only falls between the play icon and the
   label. */
.pp-hero__play-txt{display:block;white-space:nowrap}
/* PoolPerf in its two colours: teal Pool, white Perf. */
.pp-hero__play .pp-nm b{color:var(--pp-teal);transition:color .25s}
/* On a teal button, teal lettering would vanish, so Pool goes navy there:
   the second button always, and the first one while it is hovered. */
.pp-hero__play--alt .pp-nm b,
.pp-hero__play:hover .pp-nm b,
.pp-hero__play:focus-visible .pp-nm b{color:#053054}

/* 4. THE LOGO. With no dark veil behind it, the finished logo gets a soft
   shadow so it still reads over a pale photograph. The shadow is added only
   when the animation has finished (the script in the hero adds .is-landed):
   a filter on a canvas that is still animating costs frames. */
.pp-rev--slides .pp-punch{transition:filter .5s ease}
/* On a phone the logo sits a quarter of the way down, not in the middle.
   punch-engine centres the logo in its canvas, so the canvas covers only the
   top half of the hero. Its size is set by the screen width, so it is unchanged. */
@media (max-width:640px){
  .pp-rev--slides .pp-punch{height:50%}
}
.pp-rev--slides .pp-punch.is-landed{filter:drop-shadow(0 1px 6px rgba(0,12,21,.55))}
@media (prefers-reduced-motion:reduce){
  .pp-rev--slides .pp-punch{transition:none;filter:drop-shadow(0 1px 6px rgba(0,12,21,.55))}
}