/*
 * TradEase retro halftone atmosphere.
 *
 * This layer deliberately changes only ambient color and texture. The base
 * layout, typography, glass surfaces, radii and component hierarchy continue
 * to come from style.css.
 */

:root {
  --retro-rust: #bd704f;
  --retro-amber: #d6ab62;
  --retro-teal: #53b79a;
  --retro-dot-light: rgba(109, 78, 48, 0.11);
  --retro-dot-dark: rgba(233, 193, 119, 0.2);
}

/* Replace the photographic grain with a restrained printed halftone. */
.noise {
  opacity: 0.32;
  background-image: radial-gradient(
    circle,
    rgba(236, 197, 123, 0.34) 0 0.75px,
    transparent 0.9px
  );
  background-size: 8px 8px;
  background-position: 0 0;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(
    115deg,
    rgba(0, 0, 0, 0.92),
    rgba(0, 0, 0, 0.18) 70%,
    transparent
  );
  mask-image: linear-gradient(
    115deg,
    rgba(0, 0, 0, 0.92),
    rgba(0, 0, 0, 0.18) 70%,
    transparent
  );
}

/* Warm the original atmospheric lights without changing the hero structure. */
.hero-orb--one {
  background: var(--retro-rust);
  opacity: 0.2;
}

.hero-orb--two {
  background: var(--retro-amber);
  opacity: 0.17;
}

.scroll-progress span {
  background: linear-gradient(
    90deg,
    var(--retro-rust),
    var(--retro-amber),
    var(--retro-teal)
  );
}

/* One quiet printed field in the feature section; content remains untouched. */
.section--mist::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.48;
  background-image: radial-gradient(
    circle,
    var(--retro-dot-light) 0 0.7px,
    transparent 0.85px
  );
  background-size: 10px 10px;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78),
    transparent 68%
  );
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 68%);
}

.section--mist > * {
  position: relative;
  z-index: 1;
}

html[data-theme='dark'] .section--mist::before {
  background-image: radial-gradient(
    circle,
    var(--retro-dot-dark) 0 0.7px,
    transparent 0.85px
  );
}

.download-aura {
  opacity: 0.22;
  background-image: radial-gradient(
    circle,
    rgba(231, 191, 112, 0.46) 0 0.8px,
    transparent 1px
  );
  background-size: 9px 9px;
}

@media (max-width: 620px) {
  .noise {
    opacity: 0.24;
    background-size: 9px 9px;
  }

  .section--mist::before {
    opacity: 0.32;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb {
    animation: none;
  }
}