:root {
  --scene-image: url("../images/hero/hero-mountain-pair-v1.webp");
  --mist: 197 213 221;
  --light: 231 158 91;
}

.scene, .scene__image, .tree-layer, .light-breath, .fog, .air-particles, .vignette { position: absolute; inset: 0; }
.scene { position: fixed; z-index: 0; inset: -3%; overflow: hidden; animation: scene-drift 24s ease-in-out infinite alternate; will-change: transform; }
.scene::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to bottom, rgba(4,11,17,.52) 0%, rgba(4,11,17,.2) 24%, rgba(4,11,17,.3) 68%, rgba(3,9,14,.66) 100%), radial-gradient(ellipse 64% 58% at 50% 43%, rgba(3,10,16,.62) 0%, rgba(3,10,16,.28) 58%, transparent 80%); }
.scene__image, .tree-layer { background-image: var(--scene-image); background-position: center; background-repeat: no-repeat; background-size: cover; }
.scene__image { filter: saturate(.9) contrast(1.04) brightness(.79); }
.tree-layer { z-index: 1; pointer-events: none; will-change: transform; filter: brightness(.79); }
.tree-layer--left { -webkit-mask-image: radial-gradient(ellipse 37% 44% at 13% 61%, #000 0 43%, rgb(0 0 0 / .9) 58%, transparent 100%); mask-image: radial-gradient(ellipse 37% 44% at 13% 61%, #000 0 43%, rgb(0 0 0 / .9) 58%, transparent 100%); transform-origin: 20% 75%; animation: tree-left-sway 10.5s ease-in-out infinite; }
.tree-layer--right { -webkit-mask-image: radial-gradient(ellipse 34% 39% at 90% 63%, #000 0 42%, rgb(0 0 0 / .88) 58%, transparent 100%); mask-image: radial-gradient(ellipse 34% 39% at 90% 63%, #000 0 42%, rgb(0 0 0 / .88) 58%, transparent 100%); transform-origin: 86% 78%; animation: tree-right-sway 13s ease-in-out infinite; }
.light-breath { z-index: 2; pointer-events: none; background: radial-gradient(ellipse 8% 25% at 50% 57%, rgb(var(--light) / .28), transparent 68%), radial-gradient(ellipse 19% 26% at 50% 72%, rgb(var(--light) / .14), transparent 72%); mix-blend-mode: screen; opacity: .64; transform-origin: 50% 58%; animation: light-breath 6.8s ease-in-out infinite; }
.fog { z-index: 3; inset: auto -25vw -14vh; width: 150vw; pointer-events: none; background-repeat: repeat-x; mix-blend-mode: screen; will-change: transform, opacity; }
.fog--far { height: 58vh; background-image: radial-gradient(ellipse 18% 36% at 12% 62%, rgb(var(--mist) / .15), transparent 72%), radial-gradient(ellipse 22% 40% at 38% 72%, rgb(var(--mist) / .13), transparent 74%), radial-gradient(ellipse 17% 34% at 66% 58%, rgb(var(--mist) / .12), transparent 72%), radial-gradient(ellipse 25% 38% at 91% 70%, rgb(var(--mist) / .14), transparent 74%); filter: blur(26px); opacity: .58; animation: fog-far 27s ease-in-out infinite alternate; }
.fog--near { height: 43vh; background-image: radial-gradient(ellipse 17% 45% at 8% 72%, rgb(225 233 235 / .11), transparent 70%), radial-gradient(ellipse 21% 50% at 31% 68%, rgb(225 233 235 / .1), transparent 72%), radial-gradient(ellipse 19% 46% at 59% 78%, rgb(225 233 235 / .09), transparent 73%), radial-gradient(ellipse 23% 47% at 86% 68%, rgb(225 233 235 / .11), transparent 71%); filter: blur(38px); opacity: .48; animation: fog-near 20s ease-in-out infinite alternate-reverse; }
.air-particles { z-index: 4; pointer-events: none; background-image: radial-gradient(circle at 16% 72%, rgb(230 235 235 / .18) 0 1px, transparent 1.5px), radial-gradient(circle at 64% 66%, rgb(230 235 235 / .12) 0 1px, transparent 1.5px), radial-gradient(circle at 83% 79%, rgb(230 235 235 / .16) 0 .8px, transparent 1.4px), radial-gradient(circle at 41% 84%, rgb(230 235 235 / .1) 0 1px, transparent 1.6px); background-size: 31vw 24vh, 36vw 29vh, 27vw 21vh, 33vw 25vh; opacity: .42; animation: particles-drift 18s linear infinite; }
.vignette { z-index: 5; pointer-events: none; background: linear-gradient(to bottom, rgb(3 9 15 / .28), transparent 26%, transparent 68%, rgb(2 7 11 / .74)), radial-gradient(ellipse at center, transparent 48%, rgb(1 6 10 / .4) 100%); }

@keyframes scene-drift { from { transform: translate3d(-.35%, .25%, 0) scale(1.035); } to { transform: translate3d(.35%, -.3%, 0) scale(1.055); } }
@keyframes light-breath { 0%,100% { opacity: .46; transform: scale(.94); } 50% { opacity: .88; transform: scale(1.07); } }
@keyframes tree-left-sway { 0%,100% { transform: rotate(-.14deg) translate3d(-.08%, .03%, 0); } 48% { transform: rotate(.42deg) translate3d(.36%, -.12%, 0); } }
@keyframes tree-right-sway { 0%,100% { transform: rotate(.12deg) translate3d(.06%, .02%, 0); } 54% { transform: rotate(-.36deg) translate3d(-.32%, -.1%, 0); } }
@keyframes fog-far { from { opacity: .38; transform: translate3d(-10vw, .5vh, 0) scaleY(.94); } to { opacity: .7; transform: translate3d(10vw, -2.6vh, 0) scaleY(1.08); } }
@keyframes fog-near { from { opacity: .34; transform: translate3d(11vw, 1vh, 0) scale(1.04,.94); } to { opacity: .62; transform: translate3d(-12vw, -1.8vh, 0) scale(.97,1.08); } }
@keyframes particles-drift { from { transform: translate3d(-2vw, 1vh, 0); } to { transform: translate3d(3vw, -2vh, 0); } }

@media (max-width: 700px), (orientation: portrait) {
  .tree-layer { display: none; }
  .scene__image { background-position: 50% 50%; }
  .scene::after { background: linear-gradient(to bottom, rgba(5,13,19,.24) 0%, rgba(5,13,19,.12) 36%, rgba(5,13,19,.82) 74%, rgba(5,13,19,.96) 100%); }
  .light-breath { background: radial-gradient(ellipse 17% 24% at 50% 58%, rgb(var(--light) / .22), transparent 70%), radial-gradient(ellipse 38% 23% at 50% 72%, rgb(var(--light) / .1), transparent 74%); }
  .air-particles { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) { .scene, .tree-layer, .light-breath, .fog, .air-particles { animation: none; } }