/* ================================================================
   NO PERRY — Herald Serpent Stage Engine (33A reusable)
   Used by founder scroll reveal (34A). Not owned by main Hero.
   ================================================================ */

.np-hsh-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.np-hsh-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.np-hsh-cloth {
  position: absolute;
  inset: -8% -4%;
  background:
    repeating-linear-gradient(
      92deg,
      rgba(255, 255, 255, 0.012) 0 1px,
      transparent 1px 11px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(79, 93, 50, 0.03) 0 1px,
      transparent 1px 9px
    ),
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(18, 20, 16, 0.55), transparent 68%),
    linear-gradient(175deg, #040406 0%, #0c0c10 45%, #080810 100%);
  animation: np-hsh-cloth-idle 18s ease-in-out infinite;
}

.np-hsh-stage.is-animating .np-hsh-cloth {
  animation: np-hsh-cloth-intro 1.4s ease-out 1, np-hsh-cloth-idle 18s ease-in-out 1.4s infinite;
}

@keyframes np-hsh-cloth-idle {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
  50% { transform: translate3d(0.4%, -0.3%, 0) scale(1.008); filter: brightness(1.03); }
}

@keyframes np-hsh-cloth-intro {
  from { filter: brightness(0.7); transform: scale(1.02); }
  to { filter: brightness(1); transform: scale(1); }
}

.np-hsh-mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(8, 8, 12, 0.75), transparent 60%),
    radial-gradient(ellipse 50% 30% at 20% 30%, rgba(79, 93, 50, 0.06), transparent 55%);
  opacity: 0.85;
}

.np-hsh-crest-wrap {
  position: relative;
  z-index: 2;
  width: min(42vw, 320px);
  height: min(56vh, 420px);
  max-width: 360px;
  display: grid;
  place-items: center;
}

.np-hsh-crest {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
  transform: translate3d(0, 8px, 0) scale(0.96);
  transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.np-hsh-stage.is-animating .np-hsh-crest {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.np-hsh-stage.is-revealed .np-hsh-crest,
.np-hsh-stage.is-failopen .np-hsh-crest {
  opacity: 1;
  transform: none;
}

.np-hsh-serpents {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}

.np-hsh-serpent {
  position: absolute;
  width: 46%;
  height: 58%;
  top: 18%;
  background: var(--np-herald-src) center 36% / 220% auto no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(196, 30, 30, 0.15));
}

.np-hsh-serpent--left {
  left: 4%;
  transform: translate3d(-28%, 12%, 0) rotate(-8deg);
  clip-path: inset(10% 48% 20% 8%);
}

.np-hsh-serpent--right {
  right: 4%;
  transform: translate3d(28%, 12%, 0) rotate(8deg);
  clip-path: inset(10% 8% 20% 48%);
}

.np-hsh-stage.is-animating .np-hsh-serpents {
  opacity: 1;
}

.np-hsh-stage.is-animating .np-hsh-serpent--left {
  animation: np-hsh-serpent-l 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.np-hsh-stage.is-animating .np-hsh-serpent--right {
  animation: np-hsh-serpent-r 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes np-hsh-serpent-l {
  0% { opacity: 0; transform: translate3d(-34%, 18%, 0) rotate(-12deg); }
  55% { opacity: 1; }
  100% { opacity: 0.9; transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes np-hsh-serpent-r {
  0% { opacity: 0; transform: translate3d(34%, 18%, 0) rotate(12deg); }
  55% { opacity: 1; }
  100% { opacity: 0.9; transform: translate3d(0, 0, 0) rotate(0deg); }
}

.np-hsh-stage.is-revealed .np-hsh-serpents {
  opacity: 0;
}

.np-hsh-eyes {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.np-hsh-eye {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff6b4a, var(--np-herald-eye) 55%, #4a0808 100%);
  box-shadow: 0 0 10px rgba(196, 30, 30, 0.65);
  opacity: 0;
  transform: scale(0.4);
}

.np-hsh-eye--l { top: 38%; left: 42%; }
.np-hsh-eye--r { top: 38%; left: 56%; }

.np-hsh-stage.is-revealed .np-hsh-eye,
.np-hsh-stage.is-failopen .np-hsh-eye {
  opacity: 0.85;
  transform: scale(1);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.np-hsh-stage.is-idle .np-hsh-eye {
  animation: np-hsh-eye-pulse 3.6s ease-in-out infinite;
}

@keyframes np-hsh-eye-pulse {
  0%, 100% { opacity: 0.7; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}

.np-hsh-title {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.np-hsh-title-no,
.np-hsh-title-perry {
  font-family: var(--font-display, 'Cinzel Decorative', serif);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
}

.np-hsh-title-no {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: rgba(230, 230, 235, 0.78);
}

.np-hsh-title-perry {
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  background: linear-gradient(135deg, #3F4C27 0%, #667A3E 40%, #8FA65B 60%, #667A3E 80%, #303A20 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.np-hsh-stage.is-failopen .np-hsh-title,
.np-hsh-stage.is-revealed .np-hsh-title {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .np-hsh-cloth,
  .np-hsh-stage.is-idle .np-hsh-eye {
    animation: none !important;
  }
  .np-hsh-serpents { display: none; }
  .np-hsh-crest,
  .np-hsh-title,
  .np-hsh-eye {
    opacity: 1 !important;
    transform: none !important;
  }
  .np-hsh-title {
    transform: translate(-50%, -50%) !important;
  }
}