/* rNexa landing v1 - the living mountain behind the hero */
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.sky, .land { position: absolute; }
.sky { inset: 0 0 40%; }

/* The landscape keeps the photo's 16:9 shape so effects stay pinned to the peak. */
.land {
  inset: 40% 0 0; container-type: size;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}
.scene {
  position: absolute; top: 0; left: 50%;
  width: max(100cqw, 177.78cqh); aspect-ratio: 16 / 9;
  transform-origin: 50% 24%;
  animation: scene 26s ease-in-out infinite alternate;
}
.scene img { width: 100%; height: 100%; object-fit: cover; }

/* Pixel lens: a soft pixel trail drawn under the cursor (pixels.js). */
.pix { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s var(--ease); }
.scene.pix-ready .pix { opacity: 1; }
@keyframes scene {
  from { transform: translate3d(-50%, 0, 0) scale(1); }
  to { transform: translate3d(-52%, -2%, 0) scale(1.12); }
}

/* Snow blowing off the summit */
.plume {
  position: absolute; left: 47.5%; top: 17.5%; width: 24%; height: 9%;
  transform-origin: 12% 50%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side at 32% 50%, rgba(228, 238, 255, 0.4), rgba(228, 238, 255, 0.1) 55%, transparent);
  animation: plume 7s cubic-bezier(0.3, 0.6, 0.4, 1) infinite;
}
.plume-2 { top: 18.5%; height: 7%; animation-delay: -3.5s; animation-duration: 8.5s; }
@keyframes plume {
  0% { opacity: 0; transform: translate3d(-2%, 0, 0) scale(0.25, 0.5); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(14%, -18%, 0) scale(1.25, 1.3); }
}

/* Moonlight breathing on the snowfield */
.glow {
  position: absolute; left: 8%; top: 58%; width: 30%; height: 24%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(190, 214, 255, 0.42), transparent);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }

/* Mist rolling through the valleys */
.fog {
  position: absolute; left: 0; width: 200%; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(26% 60% at 10% 55%, rgba(176, 200, 236, 0.30), transparent 70%),
    radial-gradient(20% 50% at 34% 40%, rgba(176, 200, 236, 0.18), transparent 70%),
    radial-gradient(28% 65% at 60% 60%, rgba(176, 200, 236, 0.30), transparent 70%),
    radial-gradient(22% 55% at 86% 45%, rgba(176, 200, 236, 0.18), transparent 70%);
}
.fog-a { top: 50%; height: 30%; animation: mist 46s linear infinite; }
.fog-b { top: 62%; height: 30%; opacity: 0.85; animation: mist 64s linear infinite reverse; }
.fog-c { top: 38%; height: 24%; opacity: 0.6; animation: mist 90s linear infinite; }
@keyframes mist { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Stars are placed by page.js; each twinkles on its own clock. */
.star {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(200, 220, 255, 0.8);
  animation: twinkle var(--t) ease-in-out var(--d) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: var(--o); } }

.shoot {
  position: absolute; top: 10%; left: 72%; width: 160px; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95));
  animation: shoot 11s ease-in 2s infinite;
}
.shoot-2 { top: 4%; left: 38%; width: 110px; animation-duration: 17s; animation-delay: 8s; }
@keyframes shoot {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(159deg); }
  1.5% { opacity: 1; }
  7% { opacity: 0; transform: translate3d(-360px, 136px, 0) rotate(159deg); }
  100% { opacity: 0; transform: translate3d(-360px, 136px, 0) rotate(159deg); }
}

.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 10, 22, 0.5), transparent 30%, transparent 72%, rgba(5, 10, 22, 0.3)); }
html[data-theme="dark"] .hero-shade { background: linear-gradient(to bottom, rgba(5, 10, 22, 0.5), transparent 30%, transparent 72%, #08080a); }

.hero.is-paused *, .hero.is-paused *::before, .hero.is-paused *::after { animation-play-state: paused !important; }

@media (max-width: 860px) {
  .land { inset: 48% 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .plume, .glow, .fog, .star, .shoot { animation: none !important; }
  .scene { transform: translate3d(-50%, 0, 0); }
  .plume, .shoot { display: none; }
}