/* ==========================================================================
   fp-profile-image - hero image slider effect (rail + hand-over).
   --------------------------------------------------------------------------
   This file now holds ONE effect only. The other two of the original set were
   moved to the reusable site-wide package assets/css/fp-pi.css:
     - effect 1 (bottom-right corner cut, .fp-profile-image)  -> fp-pi.css
     - effect 3 (hover pointer displacement, .fp-profile-image-hover-effect)
                                                              -> fp-pi.css
   What remains here is:
     .fp-profile-image-slider-effect ... left rail filling bottom to top, then
                                        the image hands over with a fade/slide

   The hero frame keeps its geometry through the rule just below: the original
   effect 1 declared position/overflow on .fp-hero__fig.fp-profile-image, so
   the slider frame now declares them on its own selector to stay independent
   from the moved package.

   Companion script: assets/js/fp-profile-image.js (rail timing + restart).
   Disabled by: prefers-reduced-motion: reduce

   ORDERING NOTE: this file is loaded after fp-combat(/min).css, so the rules
   below win on equal specificity. Nothing here uses !important.
   ========================================================================== */

/* Frame geometry of the slider (kept from the original effect 1). */
.fp-hero__fig.fp-profile-image-slider-effect {
  position: relative;
  overflow: hidden;
}


/* ==========================================================================
   2. .fp-profile-image-slider-effect - left rail + image hand-over.
   The rail is a span.fp-profile-image__line inside the figure: a vertical
   track (::before) with a fill (::after) that grows bottom to top. It only
   reports progress; the image change itself stays owned by the fighter
   rotation script, which this effect never duplicates.
   ========================================================================== */
.fp-profile-image-slider-effect .fp-profile-image__line {
  position: absolute;
  left: var(--fp-profile-image-line-inset, 8px);
  top: var(--fp-profile-image-line-inset, 8px);
  bottom: var(--fp-profile-image-line-inset, 8px);
  width: var(--fp-profile-image-line-width, 3px);
  display: block;
  z-index: 4;
  /* the figure sits inside an <a class="fp-hero__link">: the rail must never
     swallow the click or the hover of the link. */
  pointer-events: none;
}

/* Empty track, always visible so the rail reads as a loading gauge. */
.fp-profile-image-slider-effect .fp-profile-image__line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .16);
}

/* Fill. It uses the individual `scale` property with a bottom transform-origin
   instead of `transform`, so it never enters the transform chain of the frame
   or of the photo, and it animates on the compositor only (width/height are
   never animated). */
.fp-profile-image-slider-effect .fp-profile-image__line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  background-image: linear-gradient(0deg, rgba(190, 29, 44, .22), var(--c-red, #be1d2c));
  box-shadow: 0 0 10px rgba(190, 29, 44, .55);
  scale: 1 0;
  opacity: .55;
  animation-name: fp-profile-image-slider-fill;
  animation-duration: var(--fp-profile-image-slider-duration, 10s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  /* Paused by default: the script starts the rail (no JS, no animation). */
  animation-play-state: paused;
}

/* Start / stop hooks written by assets/js/fp-profile-image.js. */
.fp-profile-image-slider-effect .fp-profile-image__line.is-slider-running::after {
  animation-play-state: running;
}
.fp-profile-image-slider-effect .fp-profile-image__line.is-slider-idle::after {
  animation-play-state: paused;
}

@keyframes fp-profile-image-slider-fill {
  from { scale: 1 0; opacity: .55; }
  8%   { opacity: 1; }
  to   { scale: 1 1; opacity: 1; }
}

/* Hand-over: the observer in the script puts .is-fp-image-swapping on the
   figure right after the observed src change. The photo slides back into
   place and fades, i.e. the change is read as a transition. If the rotation
   reveal of fp-combat.css is playing at the same moment it owns the opacity
   while it runs (an animation beats a transition); the translate of this rule
   is on its own property, so it always applies. */
.fp-hero__fig.fp-profile-image-slider-effect.is-fp-image-swapping .fp-hero__photo {
  translate: 0 var(--fp-profile-image-swap-shift, 1.8%);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   Reduced motion: no rail. The hover displacement (previously effect 3) is
   now handled by assets/css/fp-pi.css. The hover zoom and the random zoom of
   fp-combat.css keep their own reduced-motion handling.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fp-profile-image-slider-effect .fp-profile-image__line {
    display: none;
  }
  .fp-profile-image-slider-effect.is-fp-image-swapping .fp-hero__photo {
    translate: 0 0;
  }
  .fp-profile-image-slider-effect.is-fp-image-swapping .fp-hero__photo {
    opacity: 1;
  }
}