/* ═══════════════════════════════════════════════════
   PAGE-HEAD SLIDESHOWS — the family sheet for a dark head whose artwork
   rotates, as the homepage masthead does
   ═══════════════════════════════════════════════════
   Used by /devotions/holy-souls (.hs-pagehead) and the Purgatory guide home
   (.pg-hero). The head keeps .pagehead-image for its veil, grain, title
   shadow and emblem glow (styles.css); this sheet takes the single picture
   out of that veil and puts the shared .masthead-slides layer under it, so
   the slides cross-fade and slowly zoom exactly as on the homepage.
   pagehead-slides.js picks each slide's picture for the screen; html-js.js
   has marked <html class="js"> before paint, so with scripting the first
   slide's no-JavaScript picture (--masthead-image) is never fetched as well.

   The veil is lighter at the top than the single-picture heads', so the
   paintings read, and the plate below carries the text: two of the pictures
   are fire scenes far brighter than the homepage's, and the
   kicker, title and credit must hold AA over the brightest frame. */
.pagehead-image.pagehead-slides{
  --pagehead-veil:linear-gradient(180deg,rgba(26,18,11,.48) 0%,rgba(26,18,11,.62) 70%,rgba(26,18,11,.88) 100%);
}
.pagehead-image.pagehead-slides::before{
  inset:0;z-index:1;filter:none;transform:none;
  background:
    var(--pagehead-veil),
    radial-gradient(ellipse at 50% 28%,rgba(201,168,90,.08),rgba(26,18,11,.34) 68%);
}
.pagehead-image.pagehead-slides::after{z-index:1;}
.pagehead-slides > .masthead-slides{z-index:0;}
/* The type plate behind the text. Over one still picture the shared plate's
   ellipse can stop at the box edge; over a moving picture that edge shows as
   a rectangle, so here it is sized closest-side and fades out inside the box.
   This replaces .purgatory-head's plate on the guide home as well. */
.pagehead-slides > .measure::before{
  content:"";position:absolute;inset:-40px -140px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 50% 46%,rgba(12,8,6,.62) 0%,rgba(12,8,6,.5) 62%,rgba(12,8,6,0) 100%);
}

/* Longhands, not the shared shorthand: a slide here names its picture and
   its crop by class, never in a style attribute. */
.pagehead-slides .masthead-slide{
  background-image:var(--masthead-image,none);
  background-position:var(--slide-position,center);
  background-size:cover;background-repeat:no-repeat;
}
html.js .pagehead-slides .masthead-slide{background-image:var(--masthead-pick,none);}

/* The pictures, in the order they show. Only the first carries the
   no-JavaScript picture. Positions: desktop, then phone (portrait band). */
.ps-rubens{
  --masthead-image:url('/.netlify/images?url=/images/purgatory-slides/rubens-souls-in-purgatory.webp&w=1600&q=74');
  --slide-position:center 30%;--slide-position-mobile:center 28%;
}
.ps-michael{--slide-position:center 30%;--slide-position-mobile:46% center;}
.ps-angel{--slide-position:center 30%;--slide-position-mobile:58% center;}
.ps-rojas{--slide-position:center 35%;--slide-position-mobile:center 35%;}
@media(max-width:640px){
  .pagehead-slides .masthead-slide{background-position:var(--slide-position-mobile,center);}
}

/* The credits — one line per slide, stacked in one grid cell so the head
   does not jump when a shorter line comes round; the homepage's type and
   .72 alpha. A slide with no known artist has an empty line. */
.pagehead-slides .masthead-credits{
  display:grid;max-width:640px;margin:22px auto 0;
  font-family:var(--display);font-size:10px;font-weight:500;
  letter-spacing:.18em;line-height:1.5;text-transform:uppercase;
  color:rgba(246,241,230,.72);
}
/* The outgoing caption fades out before the next fades in, so two are never
   legible on top of each other. */
.pagehead-slides .masthead-credit{grid-area:1/1;opacity:0;transition:opacity .6s ease-in-out;}
.pagehead-slides .masthead-credit.is-active{opacity:1;transition-delay:.7s;}
@media(max-width:640px){
  .pagehead-slides .masthead-credits{font-size:9px;letter-spacing:.14em;padding:0 8px;}
}
@media(prefers-reduced-motion:reduce){
  .pagehead-slides .masthead-credit{transition:none;}
}
@media print{
  .pagehead-slides .masthead-credits{display:none;}
}