/* ================================================================
   NO PERRY — War Banner Hero Cloth Prototype (32A)
   Feature flag: html.np-hero-war-banner-32a (?npHeroBanner=32a)
   ================================================================ */

.np-hwb-stage {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

html.np-hero-war-banner-32a .np-hwb-stage {
  display: block;
}

html.np-hero-war-banner-32a #np-world-scene-hero,
html.np-hero-war-banner-32a #hero-canvas {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

html.np-hero-war-banner-32a .hero-mist-front {
  opacity: 0.25;
}

/* —— Battlefield —— */
.np-hwb-battlefield {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(20, 28, 14, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 30% 20%, rgba(48, 58, 32, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #060608 0%, #0a0c0a 38%, #121410 72%, #080810 100%);
}

.np-hwb-bf-smoke {
  position: absolute;
  inset: -10% -20%;
  opacity: 0.35;
  filter: blur(28px);
  animation: np-hwb-smoke-drift 48s ease-in-out infinite;
  pointer-events: none;
}

.np-hwb-bf-smoke--far {
  background:
    radial-gradient(ellipse 55% 35% at 25% 70%, rgba(80, 90, 70, 0.18), transparent 70%),
    radial-gradient(ellipse 45% 30% at 75% 55%, rgba(60, 70, 55, 0.14), transparent 68%);
  animation-duration: 62s;
}

.np-hwb-bf-smoke--near {
  background:
    radial-gradient(ellipse 40% 25% at 60% 80%, rgba(50, 58, 42, 0.22), transparent 72%);
  animation-duration: 36s;
  animation-direction: reverse;
  opacity: 0.28;
}

@keyframes np-hwb-smoke-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -1.5%, 0) scale(1.03); }
}

.np-hwb-embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.np-hwb-ember {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(180, 90, 40, 0.75);
  box-shadow: 0 0 6px rgba(200, 100, 40, 0.45);
  opacity: 0;
  animation: np-hwb-ember-rise var(--ember-dur, 8s) ease-in infinite;
  animation-delay: var(--ember-delay, 0s);
}

@keyframes np-hwb-ember-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(var(--ember-dx, 12px), -120px, 0); }
}

/* —— Banner rig —— */
.np-hwb-banner-rig {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: min(42vw, 420px);
  height: min(58vh, 560px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.np-hwb-pole {
  position: absolute;
  top: -4%;
  left: 50%;
  width: 6px;
  height: 108%;
  margin-left: -3px;
  background: linear-gradient(90deg, #1a1814, #3a3630 45%, #1a1814);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  z-index: 0;
  opacity: 0.85;
}

.np-hwb-pole::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 22px;
  height: 8px;
  margin-left: -11px;
  background: linear-gradient(180deg, #4a4438, #2a2820);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.np-hwb-static,
.np-hwb-cloth {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.np-hwb-cloth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.np-hwb-stage.is-webgl-ready .np-hwb-static {
  opacity: 0;
  visibility: hidden;
}

.np-hwb-stage.is-webgl-failed .np-hwb-cloth {
  display: none;
}

.np-hwb-stage.is-webgl-failed .np-hwb-static {
  opacity: 1;
  visibility: visible;
}

/* —— Foreground haze —— */
.np-hwb-haze {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(8, 8, 16, 0.45), transparent 70%),
    linear-gradient(180deg, rgba(8, 8, 16, 0.35) 0%, transparent 25%, transparent 70%, rgba(8, 8, 16, 0.5) 100%);
  pointer-events: none;
}

/* —— Title overlay (state A — static over banner) —— */
html.np-hero-war-banner-32a .hero-content {
  z-index: 6;
}

html.np-hero-war-banner-32a .hero-title {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

html.np-hero-war-banner-32a .hero-title-no {
  opacity: 0.35;
  color: var(--text);
}

html.np-hero-war-banner-32a .hero-title-perry,
html.np-hero-war-banner-32a .hero-perry-word {
  color: var(--np-moss-readable, #8FA65B);
  background: none;
  -webkit-text-fill-color: var(--np-moss-readable, #8FA65B);
}

html.np-hero-war-banner-32a .hero-title-perry-halo {
  background: radial-gradient(circle, rgba(102, 122, 62, 0.25), transparent 70%);
}

html.np-hero-war-banner-32a .eyebrow {
  color: var(--np-moss-readable, #8FA65B);
}

/* —— Parallax (battlefield only) —— */
html.np-hero-war-banner-32a:not(.np-reduced) .np-hwb-battlefield {
  transition: transform 0.35s ease-out;
  will-change: transform;
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .np-hwb-bf-smoke,
  .np-hwb-ember {
    animation: none !important;
  }
  .np-hwb-stage.is-reduced-motion .np-hwb-cloth {
    display: none;
  }
  .np-hwb-stage.is-reduced-motion .np-hwb-static {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 430px) {
  .np-hwb-banner-rig {
    width: min(72vw, 320px);
    height: min(52vh, 440px);
    top: 50%;
  }
}

@media (max-width: 360px) {
  .np-hwb-banner-rig {
    width: 78vw;
    height: 48vh;
  }
}