/* ================================================================
   NO PERRY — environmental-world-26a.css
   Canonical Environmental World System (26A)
   Owner: 26A_ENVIRONMENTAL_WORLD
   ================================================================ */

:root {
  --world-pointer-x: 0;
  --world-pointer-y: 0;
  --world-scroll: 0;
  --world-visibility: 0.35;
  --world-far-x: 0px;
  --world-mid-x: 0px;
  --world-near-x: 0px;
  --world-far-y: 0px;
  --world-mid-y: 0px;
  --world-near-y: 0px;
  --world-glow: 0;
  --world-base-scale: 1.06;
}

/* —— Scene shell —— */
.np-world-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  contain: paint;
  --world-pointer-x: 0;
  --world-pointer-y: 0;
  --world-scroll: 0;
  --world-visibility: 0.35;
  --world-far-x: 0px;
  --world-mid-x: 0px;
  --world-near-x: 0px;
  --world-far-y: 0px;
  --world-mid-y: 0px;
  --world-near-y: 0px;
  --world-glow: 0;
}

.np-world-scene__base,
.np-world-scene__light,
.np-world-scene__fog-far,
.np-world-scene__fog-near,
.np-world-scene__runes,
.np-world-scene__motes,
.np-world-scene__vignette,
.np-world-scene__readability,
.np-world-scene__edge-mask,
.np-world-scene__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* —— BASE —— */
.np-world-scene__base {
  z-index: 1;
  background-color: #030507;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(var(--world-far-x), var(--world-far-y), 0) scale(var(--world-base-scale));
  filter: brightness(calc(0.22 + var(--world-visibility) * 0.85));
  opacity: calc(0.08 + var(--world-visibility) * 0.92);
}

.np-world-scene--hero .np-world-scene__base {
  background-image: url('../assets/world/albion-vista.jpg');
  background-position: center 42%;
}

.np-world-scene--roads .np-world-scene__base {
  background-image: url('../assets/images/roads-avalon.png');
  background-position: center 40%;
  --world-base-scale: 1.08;
  transform: translate3d(var(--world-far-x), calc(var(--world-far-y) + (var(--world-scroll) - 0.5) * 32px), 0)
    scale(var(--world-base-scale));
  opacity: calc(0.18 + var(--world-visibility) * 0.7 + var(--world-glow) * 0.08);
  filter: brightness(calc(0.35 + var(--world-visibility) * 0.55 + var(--world-glow) * 0.12))
    saturate(calc(0.85 + var(--world-glow) * 0.2));
}

.np-world-scene--mists .np-world-scene__base {
  background-image: url('../assets/images/the-mists.png');
  background-position: center 45%;
  --world-base-scale: 1.07;
  transform: translate3d(var(--world-far-x), var(--world-far-y), 0) scale(var(--world-base-scale));
  opacity: calc(0.22 + var(--world-visibility) * 0.65);
  filter: brightness(calc(0.4 + var(--world-visibility) * 0.45));
}

/* —— POINTER LIGHT —— */
.np-world-scene__light {
  z-index: 2;
  opacity: calc(0.2 + var(--world-visibility) * 0.55);
  background: radial-gradient(
    ellipse 42% 36% at
      calc(50% + var(--world-pointer-x) * 18%)
      calc(42% + var(--world-pointer-y) * 14%),
    rgba(212, 181, 106, 0.14) 0%,
    rgba(126, 180, 140, 0.05) 28%,
    transparent 62%
  );
  mix-blend-mode: soft-light;
}

.np-world-scene--roads .np-world-scene__light {
  background: radial-gradient(
    ellipse 50% 40% at
      calc(50% + var(--world-pointer-x) * 12%)
      calc(45% + var(--world-pointer-y) * 10%),
    rgba(77, 217, 208, calc(0.06 + var(--world-glow) * 0.08)) 0%,
    rgba(201, 162, 39, calc(0.04 + var(--world-glow) * 0.06)) 35%,
    transparent 68%
  );
}

/* —— FOG FAR —— */
.np-world-scene__fog-far {
  z-index: 3;
  left: -25%;
  right: -25%;
  width: 150%;
  opacity: calc(0.05 + var(--world-visibility) * 0.7);
  background:
    radial-gradient(ellipse 55% 40% at 20% 70%, rgba(90, 110, 120, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 78% 55%, rgba(70, 90, 100, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 70% 35% at 50% 85%, rgba(40, 50, 55, 0.4) 0%, transparent 70%);
  transform: translate3d(var(--world-mid-x), var(--world-mid-y), 0);
  filter: blur(1px);
  animation: np-world-fog-far-drift 28s ease-in-out infinite alternate;
}

.np-world-scene--roads .np-world-scene__fog-far {
  background:
    radial-gradient(ellipse 60% 40% at 30% 60%, rgba(40, 90, 95, 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 70% 75%, rgba(60, 100, 90, 0.25) 0%, transparent 65%);
  opacity: calc(0.2 + var(--world-visibility) * 0.4);
}

.np-world-scene--mists .np-world-scene__fog-far {
  z-index: 3;
  background:
    radial-gradient(ellipse 70% 50% at 40% 55%, rgba(120, 130, 140, 0.45) 0%, transparent 68%),
    radial-gradient(ellipse 55% 45% at 75% 40%, rgba(100, 110, 125, 0.35) 0%, transparent 65%),
    linear-gradient(180deg, rgba(20, 22, 28, 0.15) 0%, transparent 40%, rgba(18, 20, 24, 0.35) 100%);
  opacity: calc(0.35 + var(--world-visibility) * 0.35);
  animation-duration: 32s;
}

/* —— FOG NEAR (hero / roads) —— */
.np-world-scene__fog-near {
  z-index: 5;
  left: -30%;
  right: -30%;
  width: 160%;
  opacity: calc(0.02 + var(--world-visibility) * 0.55);
  background:
    radial-gradient(ellipse 45% 35% at 15% 80%, rgba(160, 170, 180, 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 88% 70%, rgba(140, 150, 160, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 80% 25% at 50% 95%, rgba(30, 35, 40, 0.55) 0%, transparent 70%);
  transform: translate3d(var(--world-near-x), var(--world-near-y), 0);
  animation: np-world-fog-near-drift 17s ease-in-out infinite alternate;
}

.np-world-scene--roads .np-world-scene__fog-near {
  opacity: calc(0.12 + var(--world-visibility) * 0.3);
  background:
    radial-gradient(ellipse 50% 30% at 20% 90%, rgba(50, 80, 85, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 45% 28% at 85% 85%, rgba(40, 70, 75, 0.28) 0%, transparent 65%);
}

/* Mists: front fog is a separate layer AFTER formation */
.np-world-scene__fog-front {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  left: -25%;
  right: -25%;
  width: 150%;
  opacity: calc(0.12 + var(--world-visibility) * 0.22);
  background:
    radial-gradient(ellipse 50% 28% at 25% 75%, rgba(180, 190, 200, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 45% 25% at 80% 80%, rgba(160, 170, 185, 0.18) 0%, transparent 68%),
    linear-gradient(180deg, transparent 35%, rgba(24, 26, 32, 0.25) 100%);
  transform: translate3d(var(--world-near-x), var(--world-near-y), 0);
  animation: np-world-fog-near-drift 15s ease-in-out infinite alternate;
  mix-blend-mode: soft-light;
}

@keyframes np-world-fog-far-drift {
  from { transform: translate3d(calc(var(--world-mid-x) - 3%), var(--world-mid-y), 0); }
  to { transform: translate3d(calc(var(--world-mid-x) + 3.5%), var(--world-mid-y), 0); }
}

@keyframes np-world-fog-near-drift {
  from { transform: translate3d(calc(var(--world-near-x) + 2.5%), var(--world-near-y), 0); }
  to { transform: translate3d(calc(var(--world-near-x) - 3%), calc(var(--world-near-y) - 1%), 0); }
}

/* —— RUNES —— */
.np-world-scene__runes {
  z-index: 4;
  opacity: calc(max(0, (var(--world-visibility) - 0.45) * 2.4));
  transform: translate3d(var(--world-near-x), var(--world-near-y), 0);
}

.np-world-scene__rune {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0.35;
  background: rgba(212, 181, 106, 0.55);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: np-world-rune-flicker var(--rune-dur, 14s) ease-in-out infinite;
  animation-delay: var(--rune-delay, 0s);
  filter: drop-shadow(0 0 4px rgba(212, 181, 106, 0.35));
}

.np-world-scene__rune--bar {
  width: 18px;
  height: 3px;
  clip-path: none;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 181, 106, 0.7), transparent);
}

@keyframes np-world-rune-flicker {
  0%, 100% { opacity: 0.15; }
  12% { opacity: 0.55; }
  18% { opacity: 0.2; }
  47% { opacity: 0.45; }
  52% { opacity: 0.12; }
  78% { opacity: 0.4; }
}

/* —— MOTES / WISPS —— */
.np-world-scene__motes {
  z-index: 6;
  opacity: calc(max(0, (var(--world-visibility) - 0.48) * 2.2));
  transform: translate3d(var(--world-near-x), var(--world-near-y), 0);
}

.np-world-scene__mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(230, 210, 150, 0.75);
  box-shadow: 0 0 6px rgba(212, 181, 106, 0.45);
  animation: np-world-mote-travel var(--mote-dur, 22s) linear infinite;
  animation-delay: var(--mote-delay, 0s);
  opacity: var(--mote-op, 0.55);
}

.np-world-scene__mote--teal {
  background: rgba(126, 202, 192, 0.7);
  box-shadow: 0 0 6px rgba(77, 217, 208, 0.4);
}

.np-world-scene__wisp {
  position: absolute;
  width: 48px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200, 210, 220, 0.22) 0%, transparent 70%);
  filter: blur(2px);
  animation: np-world-wisp-arc var(--wisp-dur, 36s) ease-in-out infinite;
  animation-delay: var(--wisp-delay, 0s);
}

@keyframes np-world-mote-travel {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: var(--mote-op, 0.55); }
  92% { opacity: var(--mote-op, 0.55); }
  100% { transform: translate3d(var(--mote-dx, 40px), var(--mote-dy, -60px), 0); opacity: 0; }
}

@keyframes np-world-wisp-arc {
  0% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
  15% { opacity: 0.35; }
  50% { transform: translate3d(80px, -30px, 0) scale(1.1); opacity: 0.25; }
  85% { opacity: 0.15; }
  100% { transform: translate3d(140px, -10px, 0) scale(0.7); opacity: 0; }
}

/* —— READABILITY (hero title window) —— */
.np-world-scene__readability {
  z-index: 7;
  background:
    radial-gradient(ellipse 38% 32% at 50% 38%, rgba(8, 8, 12, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 28% 24% at 50% 42%, rgba(12, 10, 8, 0.35) 0%, transparent 72%);
  opacity: calc(0.45 + (1 - var(--world-visibility)) * 0.25);
}

/* —— VIGNETTE —— */
.np-world-scene__vignette {
  z-index: 8;
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, rgba(2, 3, 5, 0.55) 78%, rgba(1, 2, 3, 0.88) 100%),
    linear-gradient(180deg, rgba(3, 4, 6, 0.55) 0%, transparent 18%, transparent 72%, rgba(3, 4, 6, 0.75) 100%);
  opacity: calc(0.85 - var(--world-visibility) * 0.25);
}

.np-world-scene--roads .np-world-scene__vignette {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 35%, rgba(4, 10, 12, 0.5) 80%, rgba(2, 6, 8, 0.85) 100%);
}

/* —— EDGE MASKS (no hard rectangle) —— */
.np-world-scene__edge-mask {
  z-index: 9;
  background:
    linear-gradient(180deg, var(--edge-from, #080810) 0%, transparent 12%),
    linear-gradient(0deg, var(--edge-to, #080810) 0%, transparent 14%);
  opacity: 1;
}

.np-world-scene--roads {
  --edge-from: #080810;
  --edge-to: #0a0c10;
}

.np-world-scene--roads .np-world-scene__atmosphere {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(8, 20, 22, 0.55) 0%, rgba(6, 14, 16, 0.35) 40%, rgba(8, 16, 18, 0.5) 100%),
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(77, 217, 208, calc(0.04 + var(--world-glow) * 0.06)), transparent 70%);
  opacity: 1;
}

.np-world-scene--mists .np-world-scene__atmosphere {
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.45) 0%, rgba(8, 10, 14, 0.25) 50%, rgba(6, 8, 12, 0.5) 100%);
}

/* —— HOST SECTIONS —— */
#hero .hero-impact-stage {
  position: relative;
}

#hero .np-world-scene--hero {
  z-index: 1;
}

#avalon.avalon-section {
  position: relative;
  overflow: hidden;
  background: transparent;
  border-top: none;
}

#avalon .np-world-scene--roads {
  z-index: 0;
}

#avalon .avalon-portal,
#avalon .avalon-mist {
  display: none;
}

#avalon > .container {
  position: relative;
  z-index: 2;
}

#avalon.is-video-glow .np-world-scene--roads {
  --world-glow: 1;
}

#guild-constellation.np-guild-in-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#guild-constellation .np-world-scene--mists {
  z-index: 0;
}

#guild-constellation #np-guild-constellation-root {
  position: relative;
  z-index: 5;
}

#guild-constellation .np-world-scene__fog-front,
#guild-constellation > .np-world-scene__vignette,
#guild-constellation > .np-world-scene__edge-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#guild-constellation > .np-world-scene__vignette {
  z-index: 7;
  background:
    radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, rgba(2, 3, 5, 0.5) 78%, rgba(1, 2, 3, 0.82) 100%),
    linear-gradient(180deg, rgba(3, 4, 6, 0.5) 0%, transparent 18%, transparent 72%, rgba(3, 4, 6, 0.7) 100%);
}

#guild-constellation > .np-world-scene__edge-mask {
  z-index: 8;
  background:
    linear-gradient(180deg, #080810 0%, transparent 12%),
    linear-gradient(0deg, #080810 0%, transparent 14%);
}

/* Formation stays anchored — never inherits world parallax transforms */
#guild-constellation .np-field__formation {
  border-color: rgba(140, 120, 80, 0.15);
  background:
    radial-gradient(ellipse 50% 40% at 50% 55%, rgba(80, 50, 20, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(12, 10, 12, 0.15), rgba(8, 8, 10, 0.28));
}

#guild-constellation .np-field__token.is-hot {
  box-shadow: 0 0 12px rgba(212, 181, 106, 0.28);
}

#guild-constellation .np-field__token.is-mist-bloom,
#guild-constellation .np-field__shield-token.is-mist-bloom {
  animation: np-mist-member-bloom 600ms ease-out;
}

@keyframes np-mist-member-bloom {
  0% { filter: brightness(1); box-shadow: 0 0 0 transparent; }
  35% { filter: brightness(1.35); box-shadow: 0 0 18px rgba(230, 210, 160, 0.55); }
  100% { filter: brightness(1); box-shadow: 0 0 12px rgba(212, 181, 106, 0.28); }
}

#guild-constellation.is-mist-event .np-world-scene__light {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

/* Optional light atmospheres */
#hall-of-fame.np-world-lite::before,
#guild-pulse.np-world-lite::before,
#war-archives.np-world-lite::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

#hall-of-fame.np-world-lite {
  position: relative;
}
#hall-of-fame.np-world-lite::before {
  background:
    radial-gradient(ellipse 40% 30% at 20% 30%, rgba(212, 181, 106, 0.04), transparent 70%),
    radial-gradient(ellipse 30% 25% at 80% 70%, rgba(180, 160, 100, 0.03), transparent 70%);
}

#guild-pulse.np-world-lite {
  position: relative;
}
#guild-pulse.np-world-lite::before {
  background: radial-gradient(ellipse 70% 40% at 50% 80%, rgba(60, 50, 40, 0.25), transparent 70%);
  animation: np-world-smoke-lite 40s ease-in-out infinite alternate;
}

#war-archives.np-world-lite {
  position: relative;
}
#war-archives.np-world-lite::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.4;
}

@keyframes np-world-smoke-lite {
  from { transform: translate3d(-1%, 0, 0); }
  to { transform: translate3d(1.5%, -1%, 0); }
}

/* —— MOBILE —— */
@media (max-width: 767px) {
  .np-world-scene__fog-far,
  .np-world-scene__fog-near,
  .np-world-scene__fog-front {
    animation-duration: 40s;
  }
  .np-world-scene__rune,
  .np-world-scene__wisp {
    display: none;
  }
  .np-world-scene__mote:nth-child(n+11) {
    display: none;
  }
}

/* —— REDUCED MOTION —— */
@media (prefers-reduced-motion: reduce) {
  .np-world-scene__fog-far,
  .np-world-scene__fog-near,
  .np-world-scene__fog-front,
  .np-world-scene__mote,
  .np-world-scene__wisp,
  .np-world-scene__rune,
  #guild-pulse.np-world-lite::before {
    animation: none !important;
  }
  .np-world-scene {
    --world-far-x: 0px !important;
    --world-mid-x: 0px !important;
    --world-near-x: 0px !important;
    --world-far-y: 0px !important;
    --world-mid-y: 0px !important;
    --world-near-y: 0px !important;
    --world-pointer-x: 0 !important;
    --world-pointer-y: 0 !important;
    --world-visibility: 0.78;
  }
  .np-world-scene__base {
    opacity: 0.85;
    filter: brightness(0.72);
  }
  .np-world-scene__fog-far { opacity: 0.45; }
  .np-world-scene__fog-near,
  .np-world-scene__fog-front { opacity: 0.25; }
  .np-world-scene__runes,
  .np-world-scene__motes { opacity: 0.4; }
}

html.np-reduced .np-world-scene__fog-far,
html.np-reduced .np-world-scene__fog-near,
html.np-reduced .np-world-scene__fog-front,
html.np-reduced .np-world-scene__mote,
html.np-reduced .np-world-scene__wisp,
html.np-reduced .np-world-scene__rune {
  animation: none !important;
}

html.np-reduced .np-world-scene {
  --world-visibility: 0.78;
}

/* Legacy living-world V1/V2 hard-disabled when 26A present */
html[data-np-env-world='26a'] .np-world-bg,
html[data-np-env-world='26a'] #hero-canvas[data-np-living-world-superseded] {
  display: none !important;
}