/* =========================================================
   Atmosphere — ambient golden light, particle drift, parallax
   ridges. Decorative only; layered behind hero content.
   ========================================================= */

.atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Sky wash */
.atmos .sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 76% 16%, rgba(214, 178, 106, 0.30), transparent 60%),
    radial-gradient(ellipse 120% 80% at 18% 104%, rgba(47, 107, 71, 0.20), transparent 68%),
    linear-gradient(180deg, #F3ECDB 0%, #ECE3CD 38%, #DCD2B9 72%, #B9B098 100%);
  will-change: transform;
}

/* Layered ridges (SVG injected inline in page) */
.atmos .ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; will-change: transform; }
.atmos .glow {
  position: absolute; right: 8%; bottom: 20%; width: clamp(140px, 16vw, 260px); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 42%, rgba(217,178,106,0.85) 0%, rgba(217,178,106,0.4) 42%, transparent 70%);
  filter: blur(6px); opacity: 0.8; will-change: transform;
}

/* Crepuscular god-rays */
.atmos .rays {
  position: absolute; inset: -12% -6% 0 28%;
  background:
    linear-gradient(108deg, transparent 38%, rgba(217,178,106,0.16) 42%, transparent 46%),
    linear-gradient(112deg, transparent 50%, rgba(217,178,106,0.10) 54%, transparent 58%),
    linear-gradient(116deg, transparent 62%, rgba(217,178,106,0.08) 66%, transparent 70%);
  mix-blend-mode: screen; filter: blur(2px);
  animation: rayDrift 22s var(--ease-grace) infinite alternate;
}
@keyframes rayDrift {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0.5; }
  100% { transform: translateX(-3%) translateY(2%) rotate(0.6deg); opacity: 0.9; }
}

/* Drifting particles */
.atmos .field { position: absolute; inset: 0; }
.atmos .field i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--grace-2); box-shadow: 0 0 8px rgba(217,201,136,0.9);
  opacity: 0; animation: drift linear infinite;
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.9; }
  85%  { opacity: 0.6; }
  100% { transform: translate(40px,-260px) scale(1.1); opacity: 0; }
}

/* Grain + scrim for legibility */
.atmos .grain {
  position: absolute; inset: 0; opacity: 0.3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.atmos .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251,247,239,0.62) 0%, rgba(251,247,239,0.82) 36%, rgba(251,247,239,0.5) 70%, rgba(251,247,239,0) 100%);
}

/* Dark-section ambient glow (about / contact dark bands) */
.glow-band { position: relative; overflow: hidden; }
.glow-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 82% 24%, rgba(217,178,106,0.16), transparent 60%),
              radial-gradient(ellipse 50% 40% at 12% 96%, rgba(217,178,106,0.08), transparent 65%);
}

/* Cursor-following warm light in the hero */
.cursor-light {
  position: absolute; top: 0; left: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(217,178,106,0.20) 0%, rgba(217,178,106,0.10) 35%, transparent 68%);
  mix-blend-mode: screen; opacity: 0;
  transition: opacity 600ms var(--ease-soft, ease);
  will-change: transform, opacity;
}

/* Gentle perpetual breath on the hero glow orb (independent of parallax) */
.atmos .glow { animation: glowBreath 7s ease-in-out infinite; }
@keyframes glowBreath {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .atmos .rays, .atmos .field i { animation: none !important; }
}
@media (max-width: 600px) {
  .atmos .rays { opacity: 0.5; }
  .atmos .field { display: none; }
}