/* Faith and Grind — shared cinematic scene background.
   A real photograph (public domain, NPS/Wikimedia Commons — mountains at
   sunset, Glacier National Park) with a slow Ken Burns pan/zoom, a warm
   color grade to match the brand, drifting light motes, and a vignette.
   Two image sizes ship (desktop/mobile) to keep this light on cellular data. */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #14100A;
}

.scene .photo {
  position: absolute;
  inset: -6%;
  background-image: url('/assets/img/mountains-dawn.jpg');
  background-size: cover;
  background-position: center 60%;
  animation: kenburns 46s ease-in-out infinite alternate;
  will-change: transform;
}
@media (max-width: 640px) {
  .scene .photo {
    background-image: url('/assets/img/mountains-dawn-sm.jpg');
  }
}
@keyframes kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.4%, -1%); }
}

.scene .grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,10,4,0.72) 0%, rgba(30,19,7,0.38) 26%, rgba(40,25,8,0.08) 48%, rgba(20,12,4,0.5) 100%),
    linear-gradient(15deg, rgba(230,160,60,0.14), rgba(230,160,60,0) 55%);
}

.scene .rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 200deg at 45% 55%,
    rgba(255,255,255,0) 0deg,
    rgba(255,247,224,0.14) 8deg,
    rgba(255,255,255,0) 16deg,
    rgba(255,255,255,0) 40deg,
    rgba(255,247,224,0.11) 48deg,
    rgba(255,255,255,0) 56deg,
    rgba(255,255,255,0) 90deg,
    rgba(255,247,224,0.13) 98deg,
    rgba(255,255,255,0) 106deg);
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: sway 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes sway {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(3deg); }
}

.scene canvas.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene .vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 18vmin 4vmin rgba(10,7,3,0.4);
  pointer-events: none;
}

.scene .grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  .scene .photo,
  .scene .rays {
    animation: none !important;
  }
}