html::before,
html::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
  will-change: transform, opacity;
}

html::before {
  top: -45%;
  left: -25%;
  width: 150%;
  height: 120%;
  background: radial-gradient(closest-side, oklch(22% 0.05 25 / 0.55), transparent 70%);
  animation: ambient-warm 23s ease-in-out infinite;
}

html::after {
  right: -40%;
  bottom: -40%;
  width: 130%;
  height: 115%;
  background: radial-gradient(closest-side, oklch(30% 0.05 280 / 0.45), transparent 72%);
  animation: ambient-cool 31s ease-in-out infinite;
}

@keyframes ambient-warm {
  0%   { transform: translate3d(0, 0, 0) scale(1);           opacity: 0.8; }
  19%  { transform: translate3d(16%, 7%, 0) scale(1.18);     opacity: 1; }
  43%  { transform: translate3d(-12%, 14%, 0) scale(0.9);    opacity: 0.55; }
  61%  { transform: translate3d(18%, -8%, 0) scale(1.12);    opacity: 0.95; }
  84%  { transform: translate3d(-9%, 11%, 0) scale(1.04);    opacity: 0.68; }
  100% { transform: translate3d(0, 0, 0) scale(1);           opacity: 0.8; }
}

@keyframes ambient-cool {
  0%   { transform: translate3d(0, 0, 0) scale(1);           opacity: 0.75; }
  23%  { transform: translate3d(-17%, -10%, 0) scale(1.16);  opacity: 1; }
  47%  { transform: translate3d(11%, -19%, 0) scale(0.88);   opacity: 0.5; }
  71%  { transform: translate3d(-15%, 8%, 0) scale(1.2);     opacity: 0.95; }
  89%  { transform: translate3d(9%, 13%, 0) scale(0.96);     opacity: 0.66; }
  100% { transform: translate3d(0, 0, 0) scale(1);           opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after { animation: none; }
}


body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grain-img) repeat 0 0 / var(--grain-tile) var(--grain-tile);
  opacity: var(--grain-opacity);
}


.film-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--film-grain-opacity);
}

html:has(.site-roar.is-active) .film-grain {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .film-grain { display: none; }
}


.home-team,
.intro,
.capabilities,
.bruut,
.process,
.cases,
.contact {
  isolation: isolate;
}

.capabilities { position: relative; }

.home-team::before,
.intro::before,
.capabilities::before,
.bruut::before,
.process::before,
.cases::before,
.contact::before,
.spotlight[data-carousel] .spotlight__stage > .spotlight-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grain-img) repeat 0 0 / var(--grain-tile) var(--grain-tile);
  opacity: var(--grain-opacity);
}

.spotlight[data-carousel] .spotlight__stage > .spotlight-card::after {
  z-index: auto;
}

.film-grain--local {
  z-index: -1;
}

.capabilities { clip-path: inset(0); }

.spotlight-card > .film-grain--local {
  position: absolute;
  z-index: auto;
}