/* ========== IRON PULSE — fx.css v3 : man pipeline + neon FX ========== */

/* ---------- MAN PIPELINE (canvas cutout + fallbacks) ---------- */
.strength-man video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.strength-man canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.strength-man .man-fallback {
  display: none; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: top center;
}
/* video file missing → image */
.strength-man.no-video canvas { display: none; }
.strength-man.no-video .man-fallback { display: block; }
/* keying fail → screen-blend video (purana wala look) */
.strength-man.key-fail canvas { display: none; }
.strength-man.key-fail video {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1;
  object-fit: cover; object-position: center;
  mix-blend-mode: screen; filter: contrast(1.06) brightness(1.05);
}

/* ---------- FX LAYERS (man ke PEECHE) ---------- */
.man-fx, .man-scan {
  position: absolute; right: 5%; left: auto; top: -64px;
  width: clamp(300px, 34vw, 580px); height: calc(100% + 64px);
  pointer-events: none; z-index: 5;
}
.man-scan { overflow: hidden; }

.fx-word {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(6rem, 15vw, 14rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(233, 255, 43, .38);
  animation: wordFlick 6s ease-in-out infinite;
}
@keyframes wordFlick { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }

.fx-aura {
  position: absolute; inset: -10% -16%;
  background: radial-gradient(closest-side, rgba(233, 255, 43, .32), rgba(233, 255, 43, .08) 55%, transparent 76%);
  filter: blur(24px);
  animation: auraPulse 4s ease-in-out infinite alternate;
}
@keyframes auraPulse { from { opacity: .55; transform: scale(.95); } to { opacity: 1; transform: scale(1.07); } }

.fx-ring {
  position: absolute; inset: -2% -10%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(233, 255, 43, .8) 76%, #ffffff 84%, transparent 93%);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 87%, transparent 89%);
  mask: radial-gradient(closest-side, transparent 80%, #000 82%, #000 87%, transparent 89%);
  filter: drop-shadow(0 0 10px rgba(233, 255, 43, .5));
  opacity: .75;
  animation: fxspin 7s linear infinite;
}
@keyframes fxspin { to { transform: rotate(360deg); } }

.fx-corner { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(233, 255, 43, .8); animation: cornerPulse 2.6s ease-in-out infinite; }
.fx-corner.c1 { top: 76px; left: -2%; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.fx-corner.c2 { top: 76px; right: -2%; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; animation-delay: .6s; }
.fx-corner.c3 { bottom: 3%; left: -2%; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; animation-delay: 1.2s; }
.fx-corner.c4 { bottom: 3%; right: -2%; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; animation-delay: 1.8s; }
@keyframes cornerPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.fx-tag {
  position: absolute; top: 82px; left: -2%;
  display: flex; align-items: center; gap: .5rem;
  font-family: 'Space Mono', monospace; font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--neon);
  background: rgba(0, 0, 0, .65); border: 1px solid rgba(233, 255, 43, .4);
  padding: 5px 9px; border-radius: 6px;
}
.fx-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); animation: fxblink 1.2s steps(2) infinite; }
@keyframes fxblink { 50% { opacity: 0; } }

.fx-ember {
  position: absolute; bottom: 6%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 10px var(--neon), 0 0 22px rgba(233, 255, 43, .6);
  filter: blur(.4px); opacity: 0; animation: emberUp linear infinite;
}
.fx-ember.e1 { left: 12%; animation-duration: 6s;   animation-delay: 0s; }
.fx-ember.e2 { left: 30%; animation-duration: 7.5s; animation-delay: 1.2s; }
.fx-ember.e3 { left: 52%; animation-duration: 6.5s; animation-delay: 2.1s; }
.fx-ember.e4 { left: 68%; animation-duration: 8s;   animation-delay: .6s; }
.fx-ember.e5 { left: 84%; animation-duration: 7s;   animation-delay: 3s; }
.fx-ember.e6 { left: 44%; animation-duration: 9s;   animation-delay: 4.2s; }
@keyframes emberUp {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translateY(-72vh) scale(.35); opacity: 0; }
}

.man-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(233, 255, 43, .12) 42%, rgba(255, 255, 255, .22) 50%, rgba(233, 255, 43, .12) 58%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  mask: linear-gradient(90deg, transparent, #000 18% 82%, transparent);
  animation: scanY 4.6s ease-in-out infinite;
}
@keyframes scanY { 0% { top: -24%; } 60%, 100% { top: 104%; } }

@media (max-width: 1024px) { .man-fx, .man-scan { right: 3%; width: 40vw; } }
@media (max-width: 640px) {
  .man-fx, .man-scan { right: -2%; left: auto; width: 76%; top: -30px; height: calc(100% + 30px); }
  .fx-tag { left: 0; }
  .fx-word { font-size: clamp(4.5rem, 22vw, 8rem); }
}