/* Add the HTML overlay directly under body, outside transformed containers. */
:root {
  --grain-breath-duration: 5s;
  --grain-rotation-duration: 28s;
  --grain-edge-width: 6%;
  --grain-color-strength: .82;
  --grain-texture-strength: .16;
  --grain-rest-strength: .22;
  --grain-palette: conic-gradient(from 0deg at 50% 50%,
    #ff5269 0deg, #ff9c36 51deg, #f3d94e 103deg,
    #54d58b 154deg, #40c9e8 206deg, #6384f5 257deg,
    #ba6be6 309deg, #ff5269 360deg);
  --grain-edge-x: linear-gradient(to right,
    #000 0%, #000a calc(var(--grain-edge-width) * .1),
    #0004 calc(var(--grain-edge-width) * .3),
    #0001 calc(var(--grain-edge-width) * .6),
    #0000 var(--grain-edge-width),
    #0000 calc(100% - var(--grain-edge-width)),
    #0001 calc(100% - var(--grain-edge-width) * .6),
    #0004 calc(100% - var(--grain-edge-width) * .3),
    #000a calc(100% - var(--grain-edge-width) * .1), #000 100%);
  --grain-edge-y: linear-gradient(to bottom,
    #000 0%, #000a calc(var(--grain-edge-width) * .1),
    #0004 calc(var(--grain-edge-width) * .3),
    #0001 calc(var(--grain-edge-width) * .6),
    #0000 var(--grain-edge-width),
    #0000 calc(100% - var(--grain-edge-width)),
    #0001 calc(100% - var(--grain-edge-width) * .6),
    #0004 calc(100% - var(--grain-edge-width) * .3),
    #000a calc(100% - var(--grain-edge-width) * .1), #000 100%);
}
.breathing-grain {
  position: fixed !important;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  z-index: 96; /* Adjust to the destination site's stacking order. */
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  will-change: opacity;
  transform: translateZ(0);
  animation: grain-breathe var(--grain-breath-duration) ease-in-out infinite;
}
.breathing-grain > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--grain-palette);
}
.breathing-grain__color {
  opacity: var(--grain-color-strength);
  -webkit-mask-image: var(--grain-edge-x), var(--grain-edge-y);
  mask-image: var(--grain-edge-x), var(--grain-edge-y);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
/* Rotate a compact color field, then stretch its parent to the viewport.
   The edge mask stays fixed; no blur filter or animated gradient stops. */
.grain-motion-ready .breathing-grain__color { background: none; }
.breathing-grain__rotor {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  width: 256px; height: 256px;
  transform: translate(-50%, -50%) scale(var(--grain-scale-x, 1), var(--grain-scale-y, 1));
}
.grain-motion-ready .breathing-grain__rotor { display: block; }
.breathing-grain__rotor::before {
  content: "";
  position: absolute;
  inset: -54px;
  background: var(--grain-palette);
  will-change: transform;
  transform: translateZ(0);
  animation: grain-rotate var(--grain-rotation-duration) linear infinite;
}
@keyframes grain-rotate { to { transform: rotate(360deg); } }
.grain-paused .breathing-grain,
.grain-paused .breathing-grain__rotor::before { animation-play-state: paused; }
@media (max-width: 767px) {
  :root { --grain-edge-width: 4%; --grain-texture-strength: .08; --grain-rotation-duration: 36s; }
}
.breathing-grain__texture { display: none; opacity: var(--grain-texture-strength); }
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .breathing-grain__texture {
    display: block;
    -webkit-mask-image: url('./grain-mask.svg'), var(--grain-edge-x), var(--grain-edge-y);
    mask-image: url('./grain-mask.svg'), var(--grain-edge-x), var(--grain-edge-y);
    -webkit-mask-size: 180px 180px, 100% 100%, 100% 100%;
    mask-size: 180px 180px, 100% 100%, 100% 100%;
    -webkit-mask-repeat: repeat, no-repeat, no-repeat;
    mask-repeat: repeat, no-repeat, no-repeat;
    -webkit-mask-composite: source-in, source-over, source-over;
    mask-composite: intersect, add, add;
  }
}
/* Without masking, hide the effect instead of tinting the entire page. */
@supports not ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  .breathing-grain { display: none; }
}
@keyframes grain-breathe {
  0%, 100% { opacity: var(--grain-rest-strength); }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .breathing-grain { animation: none; opacity: 1; }
  .breathing-grain__rotor::before { animation: none; }
}
.reduced-motion .breathing-grain { animation: none; opacity: 1; }
.reduced-motion .breathing-grain__rotor::before { animation: none; }