/* ================================================================
   NO PERRY — Cinematic Hero Battlefield (34A)
   Static art + left-weighted copy + fail-open without JS
   ================================================================ */

html.np-cinematic-hero-34a .np-hwb-stage,
html.np-cinematic-hero-34a #hero .np-hsh-stage,
html.np-cinematic-hero-34a .hero-impact-stage .np-hsh-stage {
  display: none !important;
}

html.np-cinematic-hero-34a #hero,
html.np-cinematic-hero-34a .hero-impact-stage,
html.np-cinematic-hero-34a .np-cinematic-hero {
  overflow: hidden;
}

html.np-cinematic-hero-34a #np-world-scene-hero,
html.np-cinematic-hero-34a #hero-canvas {
  opacity: 0 !important;
  pointer-events: none;
}

html.np-cinematic-hero-34a .hero-mist-front {
  opacity: 0.28;
  background:
    radial-gradient(ellipse 70% 45% at 18% 62%, rgba(8, 8, 16, 0.35), transparent 68%),
    linear-gradient(180deg, transparent 35%, rgba(8, 8, 16, 0.42) 100%);
}

html.np-cinematic-hero-34a .hero-vignette-top {
  height: 140px;
  opacity: 0.85;
}

html.np-cinematic-hero-34a .hero-vignette-bottom {
  height: 220px;
  opacity: 0.92;
}

.np-cinematic-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.np-cinematic-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
  filter: saturate(0.96) contrast(1.04);
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}

html.np-cinematic-hero-34a.np-welcome-final .np-cinematic-hero__img,
html.np-cinematic-hero-34a.np-entered .np-cinematic-hero__img,
html.np-cinematic-hero-34a.np-reveal-failopen .np-cinematic-hero__img {
  animation: np-ch-ken 48s ease-in-out infinite alternate;
}

@keyframes np-ch-ken {
  from { transform: scale(1); }
  to { transform: scale(1.015); }
}

.np-cinematic-hero__smoke {
  position: absolute;
  inset: -8% 0 -4%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 28% 88%, rgba(20, 18, 14, 0.32), transparent 70%),
    radial-gradient(ellipse 35% 28% at 76% 68%, rgba(30, 22, 14, 0.18), transparent 65%);
  opacity: 0.5;
  animation: np-ch-smoke 36s ease-in-out infinite alternate;
}

@keyframes np-ch-smoke {
  from { transform: translate3d(0, 0, 0); opacity: 0.4; }
  to { transform: translate3d(1%, -1.2%, 0); opacity: 0.58; }
}

.np-cinematic-hero__embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 72%, rgba(255, 140, 60, 0.5), transparent),
    radial-gradient(1px 1px at 42% 64%, rgba(255, 160, 70, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 61% 78%, rgba(255, 120, 40, 0.4), transparent),
    radial-gradient(1px 1px at 77% 58%, rgba(255, 150, 55, 0.3), transparent);
  opacity: 0.5;
  animation: np-ch-embers 14s ease-in-out infinite alternate;
}

@keyframes np-ch-embers {
  from { opacity: 0.32; transform: translate3d(0, 0, 0); }
  to { opacity: 0.6; transform: translate3d(0, -1%, 0); }
}

.np-cinematic-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 16, 0.72) 0%, rgba(8, 8, 16, 0.28) 42%, rgba(8, 8, 16, 0.08) 62%, rgba(8, 8, 16, 0.22) 100%),
    radial-gradient(ellipse 55% 40% at 22% 58%, rgba(8, 8, 16, 0.18), transparent 72%);
  pointer-events: none;
}

html.np-cinematic-hero-34a .hero-impact-stage {
  min-height: 100svh;
  min-height: 100dvh;
  align-items: stretch;
  justify-content: flex-start;
}

html.np-cinematic-hero-34a .hero-content {
  position: relative;
  z-index: 5;
  width: min(100%, 920px);
  max-width: min(56rem, 92vw);
  margin: 0;
  margin-left: clamp(1rem, 6vw, 4.5rem);
  margin-right: auto;
  padding:
    clamp(6.5rem, 14vh, 9rem)
    clamp(1rem, 3vw, 2rem)
    max(5.5rem, 12vh);
  text-align: left;
  align-self: center;
}

html.np-cinematic-hero-34a .hero-title {
  align-items: flex-start;
}

html.np-cinematic-hero-34a .hero-actions {
  justify-content: flex-start;
}

html.np-cinematic-hero-34a .hero-guild-count,
html.np-cinematic-hero-34a .hero-legacy-counter,
html.np-cinematic-hero-34a #hero-guild-age.hero-legacy-counter {
  align-items: flex-start;
  text-align: left;
}

html.np-cinematic-hero-34a .hero-legacy-counter__digits {
  justify-content: flex-start;
}

html.np-cinematic-hero-34a .hero-scroll-indicator {
  left: clamp(1rem, 6vw, 4.5rem);
  transform: translateX(0) translateY(calc(var(--hero-leave) * 12px));
}

/* Fail-open: essential hero visible without JS.
   NEVER punch #hero-title through while prologue owns Welcome (34A1).
   Title ownership transfer happens only via np-copy-morphing / final states. */
html.np-cinematic-hero-34a:not(.np-copy-prologue) .hero-title-no-motion,
html.np-cinematic-hero-34a:not(.np-copy-prologue) .hero-title-perry-motion,
html.np-cinematic-hero-34a.np-reveal-failopen:not(.np-copy-prologue) .hero-title-no-motion,
html.np-cinematic-hero-34a.np-reveal-failopen:not(.np-copy-prologue) .hero-title-perry-motion,
html.np-cinematic-hero-34a.np-essential-ready:not(.np-copy-prologue) .hero-title-no-motion,
html.np-cinematic-hero-34a.np-essential-ready:not(.np-copy-prologue) .hero-title-perry-motion {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

html.np-cinematic-hero-34a.np-essential-ready:not(.np-copy-prologue) .hero-enter-cta,
html.np-cinematic-hero-34a:not(.np-copy-prologue):not(.np-copy-morphing) .hero-enter-cta {
  opacity: 1;
  visibility: visible;
}

html.np-cinematic-hero-34a .np-cinematic-hero__img {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .np-cinematic-hero__img {
    object-position: 72% 38%;
  }

  html.np-cinematic-hero-34a .hero-content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: clamp(5.5rem, 12vh, 7.5rem);
    padding-bottom: max(5.5rem, 12vh);
  }

  html.np-cinematic-hero-34a .hero-title,
  html.np-cinematic-hero-34a .hero-actions,
  html.np-cinematic-hero-34a .hero-guild-count,
  html.np-cinematic-hero-34a .hero-legacy-counter,
  html.np-cinematic-hero-34a #hero-guild-age.hero-legacy-counter {
    align-items: center;
    text-align: center;
  }

  html.np-cinematic-hero-34a .hero-legacy-counter__digits {
    justify-content: center;
  }

  html.np-cinematic-hero-34a .hero-actions {
    justify-content: center;
  }

  html.np-cinematic-hero-34a .hero-scroll-indicator {
    left: 50%;
    transform: translateX(-50%) translateY(calc(var(--hero-leave) * 12px));
  }
}

@media (max-width: 430px) {
  .np-cinematic-hero__img {
    object-position: 78% 36%;
  }
}

@media (max-width: 360px) {
  .np-cinematic-hero__img {
    object-position: 82% 34%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-cinematic-hero__img,
  html.np-cinematic-hero-34a.np-welcome-final .np-cinematic-hero__img,
  html.np-cinematic-hero-34a.np-entered .np-cinematic-hero__img {
    animation: none !important;
    transform: none !important;
  }
  .np-cinematic-hero__smoke,
  .np-cinematic-hero__embers {
    animation: none !important;
  }
}