/* ==========================================================================
   FP ORG MARK - giant organisation logo watermark for the fighter profile hero
   Standalone sheet: fp-combat.css and fp-combat.min.css are never touched.
   Layers:
     .fp-org-mark         absolute watermark root (opacity, breathe, parallax)
     .fp-org-mark__par    pointer tilt target (inline transform set by JS)
     .fp-org-mark__drift  continuous float animation + burst effects target
     .fp-org-mark__logo   the organisation logo (local asset in /media/profile/)
     .fp-org-mark__label  tiny mono technical caption
   ========================================================================== */

/* The hero is the positioning frame; the copy column is kept as an isolated
   stacking context so the negative z-index watermark stays above the page
   background and below the name / nickname / chips. */
#profile-intro.fp-profile-hero { position: relative; isolation: isolate; overflow: hidden; }
#profile-intro .fp-profile-hero__copy { position: relative; z-index: 3; isolation: isolate; }

.fp-org-mark {
  position: absolute;
  z-index: -1;
        /* 4x the previous footprint: 152vw = 4 * 38vw (-20% vs the 190vw mark).
     The hero box clips it, so the mark spans the whole section and only the
     edges are cut away. */
    top: 42%;
  left: 84%;
  width: 152vw;
  max-width: none;
  aspect-ratio: 1 / 1;
  display: block;
  translate: -50% -50%;
  opacity: .06;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 50% 50%;
  transform: translate3d(var(--fp-par-x, 0px), var(--fp-par-y, 0px), 0) rotate(var(--fp-par-tilt, 0deg));
  will-change: transform, opacity;
  animation: fp-org-breathe 19s ease-in-out infinite;
  color: #ffffff;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: 1;
}

.fp-org-mark__par,
.fp-org-mark__drift {
  display: block;
  width: 100%;
  height: 100%;
}

.fp-org-mark__par {
  transform-origin: 50% 60%;
  will-change: transform;
}

.fp-org-mark__drift {
  position: relative;
  overflow: hidden;
  will-change: transform, filter, translate;
  animation: fp-org-drift 27s cubic-bezier(.42, 0, .58, 1) infinite;
}

.fp-org-mark__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
    opacity: .92;
  filter: grayscale(1) contrast(1.4) brightness(1.15);
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 56%, rgba(0, 0, 0, .38) 76%, rgba(0, 0, 0, 0) 94%);
  mask-image: radial-gradient(circle at 50% 44%, #000 56%, rgba(0, 0, 0, .38) 76%, rgba(0, 0, 0, 0) 94%);
}

.fp-org-mark__label {
  position: absolute;
  left: 26%;
  bottom: 38.5%;
  max-width: 46%;
  color: #ffffff;
  letter-spacing: .34em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slow infinite float: drift + light rotation + light scale. */
@keyframes fp-org-drift {
  0%   { transform: translate3d(-2%, 1.6%, 0) rotate(-1.1deg) scale(1); }
  28%  { transform: translate3d(1.6%, -2.4%, 0) rotate(-.35deg) scale(1.014); }
  55%  { transform: translate3d(2.6%, 1.2%, 0) rotate(.55deg) scale(1.024); }
  78%  { transform: translate3d(-1.4%, 2.6%, 0) rotate(.95deg) scale(1.008); }
  100% { transform: translate3d(-2%, 1.6%, 0) rotate(-1.1deg) scale(1); }
}

/* Low amplitude breathe on the root, always inside the watermark opacity band. */
@keyframes fp-org-breathe {
  0%, 100% { opacity: .05; }
  50%      { opacity: .08; }
}

/* Burst variant 1: opacity flash (root). */
@keyframes fp-org-burst-flash {
  0%   { opacity: .06; }
  14%  { opacity: .16; }
  100% { opacity: .06; }
}
.fp-org-mark.is-burst-flash {
  animation: fp-org-breathe 19s ease-in-out infinite, fp-org-burst-flash .75s ease-out 1;
}

/* Burst variant 2: blur / scale glitch (drift). Independent transform
   properties (scale) so it does not fight the float keyframes. */
@keyframes fp-org-burst-glitch {
  0%   { filter: none; scale: 1; }
  25%  { filter: blur(2px) contrast(2.4) brightness(1.35); scale: 1.03; }
  50%  { filter: blur(0) contrast(1.15) brightness(1); scale: .995; }
  75%  { filter: blur(3px) contrast(2.6) brightness(1.3); scale: 1.02; }
  100% { filter: none; scale: 1; }
}
.fp-org-mark__drift.is-burst-glitch {
  animation: fp-org-drift 27s cubic-bezier(.42, 0, .58, 1) infinite, fp-org-burst-glitch .6s steps(6, end) 1;
}

/* Burst variant 3: scanline sweep (drift pseudo element). */
.fp-org-mark__drift::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -20%;
  height: 12%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}
@keyframes fp-org-burst-scan {
  0%   { opacity: 0; translate: 0 0; }
  10%  { opacity: .85; }
  90%  { opacity: .85; }
  100% { opacity: 0; translate: 0 900%; }
}
.fp-org-mark__drift.is-burst-scan::after {
  animation: fp-org-burst-scan .85s linear 1;
}

/* Burst variant 4: lateral shift (independent translate property). */
@keyframes fp-org-burst-shift {
  0%   { translate: 0 0; }
  18%  { translate: -2% 0; }
  46%  { translate: 1.4% .6%; }
  74%  { translate: -.6% -.4%; }
  100% { translate: 0 0; }
}
.fp-org-mark__drift.is-burst-shift {
  animation: fp-org-drift 27s cubic-bezier(.42, 0, .58, 1) infinite, fp-org-burst-shift .5s ease-out 1;
}

@media (max-width: 900px) {
  .fp-org-mark {
        top: 45%;
    left: 50%;
    width: 152vw;
    max-width: none;
    opacity: .06;
  }
  .fp-org-mark__label {
    left: 8%;
    bottom: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-org-mark,
  .fp-org-mark.is-burst-flash,
  .fp-org-mark__drift,
  .fp-org-mark__drift.is-burst-glitch,
  .fp-org-mark__drift.is-burst-shift {
    animation: none !important;
  }
  .fp-org-mark__drift::after,
  .fp-org-mark__drift.is-burst-scan::after {
    animation: none !important;
    opacity: 0 !important;
  }
}