/* ============================================================
   AMBIENT — the light in the room.
   Fixed, behind everything, fully non-interactive. Uses only
   transform/opacity so it stays off the main thread's critical path.
   ============================================================ */

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

/* Base warm wash so the page is never flat white */
.ambient__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 0%,   rgba(246, 222, 218, 0.85) 0%, transparent 58%),
    radial-gradient(100% 80% at 92% 12%,  rgba(227, 205, 164, 0.52) 0%, transparent 55%),
    radial-gradient(120% 100% at 50% 100%, rgba(251, 234, 230, 0.9) 0%, transparent 62%),
    linear-gradient(180deg, var(--ivory) 0%, var(--cream) 52%, var(--ivory) 100%);
}

/* ------------------------------------------------------------
   Slow-moving gradient shapes — the "breathing" of the page
   ------------------------------------------------------------ */
.ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.5;
  will-change: transform;
}

.ambient__blob--1 {
  width: 46vmax; height: 46vmax;
  top: -14vmax; left: -12vmax;
  background: radial-gradient(circle at 34% 34%, rgba(214, 154, 162, 0.62), transparent 70%);
  animation: drift-a 34s var(--e-in-out) infinite alternate;
}
.ambient__blob--2 {
  width: 40vmax; height: 40vmax;
  top: 32%; right: -14vmax;
  background: radial-gradient(circle at 62% 42%, rgba(227, 205, 164, 0.6), transparent 70%);
  animation: drift-b 44s var(--e-in-out) infinite alternate;
}
.ambient__blob--3 {
  width: 52vmax; height: 52vmax;
  bottom: -20vmax; left: 22%;
  background: radial-gradient(circle at 46% 56%, rgba(235, 196, 190, 0.5), transparent 68%);
  animation: drift-c 52s var(--e-in-out) infinite alternate;
}

@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(9vw, 7vh, 0) scale(1.16); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  100% { transform: translate3d(-11vw, -6vh, 0) scale(0.94); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(0.96); }
  100% { transform: translate3d(6vw, -9vh, 0) scale(1.2); }
}

/* ------------------------------------------------------------
   Light leaks — thin diagonal beams that sweep very slowly
   ------------------------------------------------------------ */
.ambient__leak {
  position: absolute;
  width: 150vmax;
  height: 34vmax;
  filter: blur(46px);
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
}
.ambient__leak--1 {
  top: -6vmax; left: -30vmax;
  background: linear-gradient(96deg, transparent 12%, rgba(255, 240, 214, 0.9) 44%, rgba(255,255,255,.55) 56%, transparent 84%);
  transform: rotate(-14deg);
  animation: leak-1 26s ease-in-out infinite;
}
.ambient__leak--2 {
  bottom: 4vmax; right: -34vmax;
  background: linear-gradient(84deg, transparent 16%, rgba(255, 226, 226, 0.75) 48%, transparent 82%);
  transform: rotate(11deg);
  animation: leak-2 38s ease-in-out infinite;
}

@keyframes leak-1 {
  0%, 100% { opacity: 0.22; transform: rotate(-14deg) translate3d(-4vw, 0, 0); }
  50%      { opacity: 0.62; transform: rotate(-11deg) translate3d(5vw, 2vh, 0); }
}
@keyframes leak-2 {
  0%, 100% { opacity: 0.16; transform: rotate(11deg) translate3d(3vw, 0, 0); }
  50%      { opacity: 0.48; transform: rotate(8deg) translate3d(-4vw, -2vh, 0); }
}

/* ------------------------------------------------------------
   Bokeh canvas — soft floating particles (js/modules/ambient.js)
   ------------------------------------------------------------ */
.ambient__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
}

/* ------------------------------------------------------------
   Film grain — kills banding in the gradients, adds a printed feel
   ------------------------------------------------------------ */
.ambient__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
  will-change: transform;
}

@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Grain is pure texture; it is the first thing to go on small screens
   where fill-rate matters most. */
@media (max-width: 700px) {
  .ambient__grain { display: none; }
  .ambient__blob { filter: blur(52px); }
  .ambient__leak { filter: blur(38px); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient__blob,
  .ambient__leak,
  .ambient__grain { animation: none; }
  .ambient__leak { opacity: 0.3; }
  .ambient__canvas { display: none; }
}