/**
 * Shop Hero: front end styles.
 *
 * WordPress loads this only on pages that contain the block, and in the
 * editor too, where only the text classes apply (__title, __text,
 * __actions); the editor's slide layout lives in the two editor.css files.
 *
 * Prints before the theme's style.css, so every rule here uses the block's
 * own pf-shop-hero classes, which nothing in style.css targets.
 *
 * Classes and CSS variables set by render.php and view.js:
 *   .is-height-custom  --pf-shop-hero-min-h
 *   .is-align-left
 *   --pf-shop-hero-overlay, --pf-shop-hero-overlay-opacity  (hero, slide)
 *   .has-fade-top / .has-fade-bottom, --pf-shop-hero-fade-top / -bottom,
 *   --pf-shop-hero-fade-top-op / -bottom-op (opacity, e.g. 60%),
 *   --pf-shop-hero-fade-top-size / -bottom-size (distance, 45% by default)
 *   .is-ready          JS has started; --pf-shop-hero-interval is set
 *   .is-playing        autoplay timer running
 *   .is-paused         pause button pressed
 *   .is-video-timed    current slide waits for its video to end
 *   .is-active         current slide
 *   video .is-playing  video has started, fade it in over the poster
 *   .has-hover-<effect>, .is-hover-<strength|speed>, .has-hover-text-lift
 *   .is-hovering, --pf-shop-hero-mx/my/px/py  (parallax, spotlight)
 */

/* ---------- frame ---------- */
.pf-shop-hero{
  position:relative;isolation:isolate;overflow:hidden;
  /* Full screen follows the real header: ../shared/screen.php sets
     --pf-screen-offset (sticky header, or the hero right under the header
     at the top of the page = subtract it; otherwise 0). Fallback without
     the script: subtract the header. */
  min-height:max(480px, calc(100vh - var(--pf-screen-offset, var(--pf-header-h))));
  min-height:max(480px, calc(100svh - var(--pf-screen-offset, var(--pf-header-h))));
  background:var(--pf-text);
  color:var(--pf-bg);
  text-align:center;
}
.pf-shop-hero.is-height-custom{min-height:var(--pf-shop-hero-min-h, 560px)}
.pf-shop-hero.is-align-left{text-align:left}

/* ---------- slides ---------- */
.pf-shop-hero__slide{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;
  transition:opacity .8s var(--pf-ease),visibility .8s;
}
.pf-shop-hero__slide.is-active{opacity:1;visibility:visible}

.pf-shop-hero .pf-shop-hero__media{
  position:absolute;inset:0;z-index:-2;
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;
}
.pf-shop-hero .pf-shop-hero__video{opacity:0;transition:opacity .6s var(--pf-ease)}
.pf-shop-hero .pf-shop-hero__video.is-playing{opacity:1}

.pf-shop-hero__overlay{
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:var(--pf-shop-hero-overlay, none);
  opacity:var(--pf-shop-hero-overlay-opacity, 1);
}

/* ---------- top and bottom fades ----------
   One layer per slide, after the overlay (same z-index, later in the page,
   so above it) and under the text. The gradients are built on the hero
   (.has-fade-top / .has-fade-bottom, colours --pf-shop-hero-fade-top /
   -bottom, default the design system dark) and reused by the editor
   preview (.pf-shop-hero-editor, slide/editor.css). Same shape as the
   Statement Photo fades. */
.pf-shop-hero.has-fade-top,
.pf-shop-hero-editor.has-fade-top{
  /* Colour at its opacity (--pf-shop-hero-fade-top-op, 100% by default). */
  --pf-shop-hero-fade-tc:color-mix(in srgb, var(--pf-shop-hero-fade-top, var(--pf-text)) var(--pf-shop-hero-fade-top-op, 100%), transparent);
  --pf-shop-hero-fade-t:linear-gradient(180deg,
    var(--pf-shop-hero-fade-tc) 0%,
    color-mix(in srgb, var(--pf-shop-hero-fade-tc) 85%, transparent) calc(var(--pf-shop-hero-fade-top-size, 45%) / 3),
    transparent var(--pf-shop-hero-fade-top-size, 45%));
}
.pf-shop-hero.has-fade-bottom,
.pf-shop-hero-editor.has-fade-bottom{
  --pf-shop-hero-fade-bc:color-mix(in srgb, var(--pf-shop-hero-fade-bottom, var(--pf-text)) var(--pf-shop-hero-fade-bottom-op, 100%), transparent);
  --pf-shop-hero-fade-b:linear-gradient(180deg,
    transparent calc(100% - var(--pf-shop-hero-fade-bottom-size, 45%)),
    color-mix(in srgb, var(--pf-shop-hero-fade-bc) 70%, transparent) calc(100% - var(--pf-shop-hero-fade-bottom-size, 45%) * .4),
    var(--pf-shop-hero-fade-bc) 100%);
}
.pf-shop-hero__fade{
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:var(--pf-shop-hero-fade-t, none),var(--pf-shop-hero-fade-b, none);
}

/* ---------- text ---------- */
.pf-shop-hero__inner{
  width:100%;max-width:var(--pf-maxw);margin:0 auto;
  padding:var(--pf-s10) var(--pf-s5) calc(var(--pf-s9) + var(--pf-s6));
}
.pf-shop-hero__content{
  max-width:640px;margin:0 auto;
  transform:translateY(var(--pf-s3));
  transition:transform .8s var(--pf-ease);
}
.pf-shop-hero__slide.is-active .pf-shop-hero__content{transform:none}
.pf-shop-hero.is-align-left .pf-shop-hero__content{margin:0}

.pf-shop-hero__title{
  margin:0 0 var(--pf-s3);
  font-family:var(--pf-font);font-size:var(--pf-display);font-weight:600;
  line-height:1.1;letter-spacing:-.02em;color:var(--pf-bg);
  text-wrap:balance;
}
.pf-shop-hero__text{
  margin:0 auto;max-width:60ch;
  text-wrap:balance;
  font-family:var(--pf-font-text);font-size:var(--pf-h4);font-weight:400;
  line-height:1.5;color:var(--pf-bg);
}
.pf-shop-hero.is-align-left .pf-shop-hero__text{margin:0}

/* Buttons: the shared buttons (../shared/buttons.*), one or two per slide. */
.pf-shop-hero .pf-shop-hero__actions{margin-top:var(--pf-s5)}

/* ---------- controls: pause button + dots ---------- */
.pf-shop-hero__controls{
  position:absolute;left:0;right:0;bottom:var(--pf-s7);z-index:2;
  display:flex;align-items:center;justify-content:center;gap:var(--pf-s3);
}
.pf-shop-hero.is-align-left .pf-shop-hero__controls{
  justify-content:flex-start;
  max-width:var(--pf-maxw);margin:0 auto;padding:0 var(--pf-s5);
}
.pf-shop-hero__controls[hidden],
.pf-shop-hero__pause[hidden]{display:none}

.pf-shop-hero__pause{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--pf-s5);height:var(--pf-s5);padding:0;
  color:var(--pf-bg);
}
/* Two bars = pause; a triangle when paused = play. */
.pf-shop-hero__pause-icon{
  display:block;width:10px;height:12px;
  border-left:3px solid currentColor;border-right:3px solid currentColor;
}
.pf-shop-hero.is-paused .pf-shop-hero__pause-icon{
  width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:10px solid currentColor;border-right:0;
}

.pf-shop-hero__dots{display:flex;gap:var(--pf-s2)}
.pf-shop-hero__dot{position:relative;width:40px;height:var(--pf-s5);padding:0}
.pf-shop-hero__dot::before,
.pf-shop-hero__dot::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:3px;
  margin-top:-1.5px;border-radius:999px;
}
.pf-shop-hero__dot::before{background:rgba(255,255,255,.35)}
.pf-shop-hero__dot::after{background:var(--pf-bg);transform:scaleX(0);transform-origin:left}
.pf-shop-hero__dot[aria-current="true"]::after{transform:scaleX(1)}

/* Progress bar on the current dot. It runs only while the timer runs and
   holds its place while paused, so it always matches the time left. */
.pf-shop-hero.is-ready[data-autoplay="1"] .pf-shop-hero__dot[aria-current="true"]::after{
  animation:pf-shop-hero-fill var(--pf-shop-hero-interval, 6s) linear forwards;
  animation-play-state:paused;
}
/* As specific as the rule above plus .is-playing, so it wins over it. */
.pf-shop-hero.is-ready.is-playing[data-autoplay="1"] .pf-shop-hero__dot[aria-current="true"]::after{
  animation-play-state:running;
}
.pf-shop-hero.is-ready.is-video-timed[data-autoplay="1"] .pf-shop-hero__dot[aria-current="true"]::after{
  animation:none;transform:scaleX(1);
}
@keyframes pf-shop-hero-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.pf-shop-hero__dot:focus-visible,
.pf-shop-hero__pause:focus-visible{outline:2px solid var(--pf-bg);outline-offset:2px}

/* ---------- hover effects ----------
   Only on devices with a real mouse. Effects that move (zoom, parallax,
   text lift) also need prefers-reduced-motion: no-preference. Effects act
   on the current slide only. Strength and speed classes set the values:
     scale   zoom in / zoom out
     cover   parallax base zoom, big enough to hide the edges when it shifts
     shift   parallax travel
     spot    spotlight radius
     gray    color reveal: how grey the image is at rest
     fade    overlay fade: overlay opacity multiplier on hover
     lift    text lift travel
*/
.pf-shop-hero.is-hover-subtle{
  --pf-shop-hero-hover-scale:1.03;--pf-shop-hero-hover-cover:1.04;--pf-shop-hero-hover-shift:10px;
  --pf-shop-hero-hover-spot:180px;--pf-shop-hero-hover-gray:.5;--pf-shop-hero-hover-fade:.65;--pf-shop-hero-hover-lift:4px;
}
.pf-shop-hero.is-hover-medium{
  --pf-shop-hero-hover-scale:1.06;--pf-shop-hero-hover-cover:1.07;--pf-shop-hero-hover-shift:20px;
  --pf-shop-hero-hover-spot:260px;--pf-shop-hero-hover-gray:.8;--pf-shop-hero-hover-fade:.4;--pf-shop-hero-hover-lift:8px;
}
.pf-shop-hero.is-hover-strong{
  --pf-shop-hero-hover-scale:1.1;--pf-shop-hero-hover-cover:1.11;--pf-shop-hero-hover-shift:32px;
  --pf-shop-hero-hover-spot:360px;--pf-shop-hero-hover-gray:1;--pf-shop-hero-hover-fade:.15;--pf-shop-hero-hover-lift:12px;
}
.pf-shop-hero.is-hover-slow{--pf-shop-hero-hover-ms:1200ms}
.pf-shop-hero.is-hover-normal{--pf-shop-hero-hover-ms:700ms}
.pf-shop-hero.is-hover-fast{--pf-shop-hero-hover-ms:350ms}

/* Spotlight radius, registered so it can animate. */
@property --pf-shop-hero-spot{syntax:"<length>";inherits:true;initial-value:0px}

@media (hover:hover) and (pointer:fine){
  /* color reveal */
  .pf-shop-hero.has-hover-color .pf-shop-hero__media{
    filter:grayscale(var(--pf-shop-hero-hover-gray, .8));
    transition:opacity .6s var(--pf-ease),filter var(--pf-shop-hero-hover-ms, 700ms) var(--pf-ease);
  }
  .pf-shop-hero.has-hover-color:hover .pf-shop-hero__slide.is-active .pf-shop-hero__media{filter:none}

  /* overlay fade */
  .pf-shop-hero.has-hover-overlay-fade .pf-shop-hero__overlay{
    transition:opacity var(--pf-shop-hero-hover-ms, 700ms) var(--pf-ease);
  }
  .pf-shop-hero.has-hover-overlay-fade:hover .pf-shop-hero__slide.is-active .pf-shop-hero__overlay{
    opacity:calc(var(--pf-shop-hero-overlay-opacity, 1) * var(--pf-shop-hero-hover-fade, .4));
  }

  /* spotlight: the overlay clears in a circle around the pointer */
  .pf-shop-hero.has-hover-spotlight .pf-shop-hero__overlay{
    -webkit-mask-image:radial-gradient(circle at var(--pf-shop-hero-mx, 50%) var(--pf-shop-hero-my, 50%),
      transparent 0, transparent calc(var(--pf-shop-hero-spot) * .4), #000 var(--pf-shop-hero-spot));
    mask-image:radial-gradient(circle at var(--pf-shop-hero-mx, 50%) var(--pf-shop-hero-my, 50%),
      transparent 0, transparent calc(var(--pf-shop-hero-spot) * .4), #000 var(--pf-shop-hero-spot));
    transition:--pf-shop-hero-spot var(--pf-shop-hero-hover-ms, 700ms) var(--pf-ease);
  }
  .pf-shop-hero.has-hover-spotlight.is-hovering .pf-shop-hero__slide.is-active .pf-shop-hero__overlay{
    --pf-shop-hero-spot:var(--pf-shop-hero-hover-spot, 260px);
  }
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* zoom in */
  .pf-shop-hero.has-hover-zoom-in .pf-shop-hero__media{
    transition:opacity .6s var(--pf-ease),transform calc(var(--pf-shop-hero-hover-ms, 700ms) * 2) var(--pf-ease);
  }
  .pf-shop-hero.has-hover-zoom-in:hover .pf-shop-hero__slide.is-active .pf-shop-hero__media{
    transform:scale(var(--pf-shop-hero-hover-scale, 1.06));
  }

  /* zoom out: starts enlarged, settles on hover */
  .pf-shop-hero.has-hover-zoom-out .pf-shop-hero__media{
    transform:scale(var(--pf-shop-hero-hover-scale, 1.06));
    transition:opacity .6s var(--pf-ease),transform calc(var(--pf-shop-hero-hover-ms, 700ms) * 2) var(--pf-ease);
  }
  .pf-shop-hero.has-hover-zoom-out:hover .pf-shop-hero__slide.is-active .pf-shop-hero__media{transform:none}

  /* parallax: the image moves against the pointer */
  .pf-shop-hero.has-hover-parallax .pf-shop-hero__media{
    transform:scale(var(--pf-shop-hero-hover-cover, 1.07));
    transition:opacity .6s var(--pf-ease),transform calc(var(--pf-shop-hero-hover-ms, 700ms) / 2) ease-out;
  }
  .pf-shop-hero.has-hover-parallax.is-hovering .pf-shop-hero__slide.is-active .pf-shop-hero__media{
    transform:
      translate3d(
        calc(var(--pf-shop-hero-px, 0) * var(--pf-shop-hero-hover-shift, 20px) * -1),
        calc(var(--pf-shop-hero-py, 0) * var(--pf-shop-hero-hover-shift, 20px) * -1),
        0)
      scale(var(--pf-shop-hero-hover-cover, 1.07));
  }

  /* text lift (combines with any effect) */
  .pf-shop-hero.has-hover-text-lift .pf-shop-hero__content{
    transition:transform var(--pf-shop-hero-hover-ms, 700ms) var(--pf-ease);
  }
  .pf-shop-hero.has-hover-text-lift:hover .pf-shop-hero__slide.is-active .pf-shop-hero__content{
    transform:translateY(calc(var(--pf-shop-hero-hover-lift, 8px) * -1));
  }
  /* Text lift also gives filled buttons a glow (text and arrow links have
     no box). The shared buttons darken or lighten with their background,
     so the glow and the hover colour work together. */
  .pf-shop-hero.has-hover-text-lift .pf-shop-hero__actions .pf-buttons__item{
    transition:background-color .15s var(--pf-ease),color .15s var(--pf-ease),border-color .15s var(--pf-ease),box-shadow var(--pf-shop-hero-hover-ms, 700ms) var(--pf-ease);
  }
  .pf-shop-hero.has-hover-text-lift:hover .pf-shop-hero__slide.is-active .pf-shop-hero__actions .pf-buttons__item:not(.pf-buttons__item--text):not(.pf-buttons__item--arrow){
    box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.25);
  }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pf-shop-hero__inner{padding:var(--pf-s9) var(--pf-s4) calc(var(--pf-s8) + var(--pf-s5))}
  .pf-shop-hero__controls{bottom:var(--pf-s5)}
  .pf-shop-hero.is-align-left .pf-shop-hero__controls{padding:0 var(--pf-s4)}
  .pf-shop-hero__text{font-size:var(--pf-ui)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .pf-shop-hero__content{transform:none;transition:none}
  .pf-shop-hero.is-ready[data-autoplay="1"] .pf-shop-hero__dot[aria-current="true"]::after{
    animation:none;transform:scaleX(1);
  }
}