/**
 * eXthus Cloud — interactive hero atmosphere (texture + gradient + mesh + spotlight).
 * Requires exthus-shell.css tokens. Enable via sys_hero_atmosphere_markup() + sys_hero_atmosphere_head_html().
 * Revert snapshot: /assets/hero-backup-pre-texture-20260521/
 */

.sys-app-hero.has-exthus-hero-fx {
  position: relative;
  overflow: visible;
}

.sys-app-hero.has-exthus-hero-fx > .exthus-hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sys-app-hero.has-exthus-hero-fx > .sys-app-wrap {
  position: relative;
  z-index: 1;
}

/* Textured photographic layer */
.exthus-hero-atmosphere__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 42%;
  opacity: 0.82;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.04);
}

/* Tint + readability overlay (keeps text legible) */
.exthus-hero-atmosphere__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(3, 4, 5, 0.72) 0%, rgba(3, 4, 5, 0.35) 42%, transparent 62%),
    radial-gradient(ellipse 100% 80% at 8% -4%, rgba(143, 224, 0, 0.1), transparent 52%),
    radial-gradient(ellipse 80% 55% at 98% 0%, rgba(80, 130, 255, 0.14), transparent 54%),
    linear-gradient(
      180deg,
      rgba(3, 4, 5, 0.15) 0%,
      rgba(3, 4, 5, 0.42) 55%,
      rgba(3, 4, 5, 0.88) 100%
    );
}

.exthus-hero-atmosphere__gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 32%, rgba(3, 4, 5, 0.62) 100%);
  pointer-events: none;
}

.exthus-hero-atmosphere__mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.62;
  mix-blend-mode: screen;
  filter: brightness(1.04) saturate(1.05);
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.sys-app-hero.has-exthus-hero-fx.is-hover .exthus-hero-atmosphere__mesh {
  opacity: 0.78;
  filter: brightness(1.08) saturate(1.08);
}

.exthus-hero-atmosphere__spotlight {
  position: absolute;
  z-index: 3;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  left: var(--hero-spot-x, 50%);
  top: var(--hero-spot-y, 40%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(198, 255, 42, 0.18) 0%,
    rgba(198, 255, 42, 0.08) 38%,
    rgba(198, 255, 42, 0.02) 62%,
    transparent 76%
  );
  opacity: 0.24;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.sys-app-hero.has-exthus-hero-fx.is-hover .exthus-hero-atmosphere__spotlight {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .exthus-hero-atmosphere__mesh {
    display: none;
  }

  .exthus-hero-atmosphere__texture {
    opacity: 0.76;
    transform: none;
  }

  .sys-app-hero.has-exthus-hero-fx.is-hover .exthus-hero-atmosphere__spotlight,
  .exthus-hero-atmosphere__spotlight {
    opacity: 0.34;
  }
}

@media (max-width: 720px) {
  .exthus-hero-atmosphere__texture {
    background-position: 62% 38%;
    opacity: 0.74;
  }
}