/* ==========================================================================
   Profile hero photo - continuous micro zoom, random direction
   --------------------------------------------------------------------------
   Scope: #profile-view only (the athlete photo of the profile hero).

   The img breathes: one leg grows (is-in), the next one shrinks back (is-out).
   assets/js/fp-profile-zoom.js picks duration and amplitude of every leg at
   random and flips the direction when the leg ends; the frame gets a very
   short light flicker at that moment (the "turn" flash).

   The frame is overflow:hidden, so the tiny scale never bleeds out and the
   frame pseudo elements (::before glow, ::after brackets) are untouched.
   With prefers-reduced-motion: reduce nothing animates.
   ========================================================================== */

#profile-view .fp-profile-hero__fig img {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}

/* Animation shell: name and duration are set by the JS, the rest is fixed. */
#profile-view .fp-profile-hero__fig img.fp-photo-zoom {
  animation-duration: 9000ms;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
#profile-view .fp-profile-hero__fig img.fp-photo-zoom.is-in { animation-name: fp-photo-zoom-in; }
#profile-view .fp-profile-hero__fig img.fp-photo-zoom.is-out { animation-name: fp-photo-zoom-out; }

/* --fp-zoom-amp is written by the JS on the img (random, 1.09 - 1.16). */
@keyframes fp-photo-zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(var(--fp-zoom-amp, 1.12)); }
}
@keyframes fp-photo-zoom-out {
  from { transform: scale(var(--fp-zoom-amp, 1.12)); }
  to   { transform: scale(1); }
}

/* Direction flip: two quick steps and gone in 240ms, just perceptible.
   It lives on the frame so it never competes with the img transform. */
#profile-view .fp-profile-hero__fig.fp-photo-turn {
  animation: fp-photo-turn 240ms ease-out both;
}
@keyframes fp-photo-turn {
  16%  { filter: brightness(1.11) contrast(1.03); }
  34%  { filter: brightness(0.99); }
  54%  { filter: brightness(1.04); }
  100% { filter: none; }
}

/* Tab in the background: hold the loop instead of burning frames. */
#profile-view .fp-profile-hero__fig.fp-photo-paused,
#profile-view .fp-profile-hero__fig.fp-photo-paused img {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #profile-view .fp-profile-hero__fig,
  #profile-view .fp-profile-hero__fig img {
    animation: none;
    filter: none;
    transform: none;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   Roster / list cards inside a profile page - same breathing effect as the
   hero photo. The frame is .fp-profile-card__media (same overflow:hidden and
   glow treatment); the hero frame also carries that class, so it is excluded
   here: the hero rules above already cover it.
   -------------------------------------------------------------------------- */
#profile-view .fp-profile-card__media:not(.fp-profile-hero__fig) img {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform;
}

/* Animation shell: name and duration are set by the JS, the rest is fixed. */
#profile-view .fp-profile-card__media:not(.fp-profile-hero__fig) img.fp-photo-zoom {
  animation-duration: 9000ms;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
#profile-view .fp-profile-card__media:not(.fp-profile-hero__fig) img.fp-photo-zoom.is-in { animation-name: fp-photo-zoom-in; }
#profile-view .fp-profile-card__media:not(.fp-profile-hero__fig) img.fp-photo-zoom.is-out { animation-name: fp-photo-zoom-out; }

/* Direction flip flash on the roster frame. */
#profile-view .fp-profile-card__media:not(.fp-profile-hero__fig).fp-photo-turn {
  animation: fp-photo-turn 240ms ease-out both;
}

/* Tab in the background: hold the loop instead of burning frames. */
#profile-view .fp-profile-card__media.fp-photo-paused,
#profile-view .fp-profile-card__media.fp-photo-paused img {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #profile-view .fp-profile-card__media:not(.fp-profile-hero__fig),
  #profile-view .fp-profile-card__media:not(.fp-profile-hero__fig) img {
    animation: none;
    filter: none;
    transform: none;
    will-change: auto;
  }
}

/* ==========================================================================
   Home hero photo (index) - same breathing effect as the profile photo.
   --------------------------------------------------------------------------
   The animation drives the individual `scale` property instead of
   `transform`: .fp-hero__photo already owns a transform (the hover zoom of
   fp-combat.css) and the fighter swap adds .is-rotating, so `scale` keeps
   composing with both. The frame .fp-hero__fig is overflow:hidden with a
   clip-path, so the peak stays contained. Keyframe names are unique but
   still start with "fp-photo-zoom" so the shared driver in
   assets/js/fp-profile-zoom.js detects animationend with no code change.
   ========================================================================== */
#intro .fp-hero__fig img.fp-hero__photo {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: scale;
}
#intro .fp-hero__fig img.fp-hero__photo.fp-photo-zoom {
  animation-duration: 9000ms;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
#intro .fp-hero__fig img.fp-hero__photo.fp-photo-zoom.is-in { animation-name: fp-photo-zoom-hero-in; }
#intro .fp-hero__fig img.fp-hero__photo.fp-photo-zoom.is-out { animation-name: fp-photo-zoom-hero-out; }

@keyframes fp-photo-zoom-hero-in {
  from { scale: 1; }
  to   { scale: var(--fp-zoom-amp, 1.12); }
}
@keyframes fp-photo-zoom-hero-out {
  from { scale: var(--fp-zoom-amp, 1.12); }
  to   { scale: 1; }
}
/* Direction flip flash: reuses the shared fp-photo-turn keyframes above. */
#intro .fp-hero__fig.fp-photo-turn {
  animation: fp-photo-turn 240ms ease-out both;
}
/* Tab in the background: hold the loop instead of burning frames. */
#intro .fp-hero__fig.fp-photo-paused,
#intro .fp-hero__fig.fp-photo-paused img.fp-hero__photo {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  #intro .fp-hero__fig,
  #intro .fp-hero__fig img.fp-hero__photo {
    animation: none;
    filter: none;
    scale: none;
    will-change: auto;
  }
}