/* Glamarie Studios: ambient background layer (pairs with js/ambient.js).
   Markup: <div id="ambient" aria-hidden="true"></div> as first child of <body>. */

#ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  background: #E0DCD2;
  /* Static textured frame shown before JS/WebGL is ready, and as the no-JS look */
  background-image: url("../assets/web/ambient/plaster-sm.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  --amb-i: 1;
  --amb-ease: cubic-bezier(.86, 0, .07, 1);
  transition: background-color .6s cubic-bezier(.215, .61, .355, 1);
}

/* The page background must not hide the fixed layer behind it.
   Colour lives on <html> (canvas), body stays see-through. */
html.has-ambient { background-color: #E0DCD2; transition: background-color .6s cubic-bezier(.215, .61, .355, 1); }

/* ---------- Evening (dark theme) ---------- */
html[data-theme="dark"].has-ambient { background-color: #211913; }
html[data-theme="dark"] #ambient { background-color: #211913; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]).has-ambient, html:not([data-theme]) #ambient { background-color: #211913; }
}
html.has-ambient body { background-color: transparent; background-image: none; }

/* ---------- WebGL ---------- */
#ambient .amb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s var(--amb-ease);
}
#ambient.is-ready .amb-canvas { opacity: 1; }

/* ---------- CSS fallback (no WebGL) ---------- */
#ambient.amb-css { background-image: none; }
#ambient.amb-css > div { position: absolute; will-change: transform; }

#ambient .amb-plaster {
  inset: 0;
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: .9;
}

/* warm sun patch drifting across the wall (~52s each way) */
#ambient .amb-sun {
  left: -35vmax; top: -30vmax;
  width: 90vmax; height: 70vmax;
  background: radial-gradient(closest-side, rgba(255, 240, 214, .55), rgba(255, 240, 214, 0) 100%);
  transform: rotate(-30deg);
  mix-blend-mode: soft-light;
  opacity: calc(.9 * var(--amb-i));
  transition: opacity 1.2s var(--amb-ease);
  animation: amb-sun 52s ease-in-out infinite alternate;
}
@keyframes amb-sun {
  0%   { translate: 0vw 6vh; }
  50%  { translate: 45vw -4vh; }
  100% { translate: 90vw 10vh; }
}

/* leaf shadows: wrapper = scroll parallax (JS), .amb-gust = periodic gust, .amb-sway = breeze */
/* blend on the wrapper (it carries the opacity), so leaves multiply onto the wall */
#ambient .amb-leaves { inset: 0; mix-blend-mode: multiply; transition: opacity 1.2s var(--amb-ease); }
#ambient .amb-gust, #ambient .amb-sway { position: absolute; }
#ambient .amb-gust { inset: 0; transform-origin: 50% -45vh; }
#ambient .amb-sway {
  top: 0; left: 50%;
  width: max(112vw, 125vh);
  aspect-ratio: 2 / 1;
  margin-left: calc(max(112vw, 125vh) / -2);
  background-size: 100% 100%;
  transform-origin: 50% -45vh;
  filter: invert(1) blur(2px);
}
#ambient .amb-l1 { opacity: calc(.17 * var(--amb-i)); }
#ambient .amb-l2 { opacity: calc(.10 * var(--amb-i)); }
#ambient .amb-l1 .amb-sway { animation: amb-sway-a 13s ease-in-out infinite alternate; }
#ambient .amb-l2 .amb-sway {
  width: max(146vw, 162vh);
  margin-left: calc(max(146vw, 162vh) / -2);
  top: -5vh;
  scale: -1 1;
  filter: invert(1) blur(7px);
  animation: amb-sway-b 19s ease-in-out infinite alternate;
}
#ambient .amb-l1 .amb-gust { animation: amb-gust 23s cubic-bezier(.45, 0, .2, 1) infinite; }
#ambient .amb-l2 .amb-gust { animation: amb-gust 23s cubic-bezier(.45, 0, .2, 1) 1.1s infinite; }

@keyframes amb-sway-a {
  0%   { transform: rotate(-.55deg) translateX(-.6vw); }
  35%  { transform: rotate(.25deg) translateX(.2vw); }
  60%  { transform: rotate(-.15deg) translateX(-.1vw); }
  100% { transform: rotate(.6deg) translateX(.7vw); }
}
@keyframes amb-sway-b {
  0%   { transform: rotate(.4deg) translateX(.5vw); }
  50%  { transform: rotate(-.1deg); }
  100% { transform: rotate(-.45deg) translateX(-.6vw); }
}
@keyframes amb-gust {
  0%, 62%, 100% { transform: none; }
  70% { transform: rotate(1.1deg) translateX(1vw); }
  76% { transform: rotate(.7deg) translateX(.6vw); }
  86% { transform: rotate(.15deg); }
}

/* mouse-follow highlight (fallback) */
#ambient .amb-glow {
  left: -22vmax; top: -22vmax;
  width: 44vmax; height: 44vmax;
  background: radial-gradient(closest-side, rgba(255, 246, 232, .5), rgba(255, 246, 232, 0));
  mix-blend-mode: soft-light;
  opacity: 0;
}

/* grain */
#ambient .amb-grain {
  inset: -64px;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: .05;
  animation: amb-grain .9s steps(1) infinite;
}
@keyframes amb-grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-37px, 21px); }
  25%  { transform: translate(18px, -44px); }
  37%  { transform: translate(-52px, -9px); }
  50%  { transform: translate(41px, 33px); }
  62%  { transform: translate(-13px, 55px); }
  75%  { transform: translate(29px, -17px); }
  87%  { transform: translate(-46px, 40px); }
}

/* CSS fallback in the evening: low-contrast plaster, deeper leaf silhouettes, dim lamp glow */
#ambient .amb-plaster, #ambient .amb-sun, #ambient .amb-glow, #ambient .amb-grain { transition: opacity .6s cubic-bezier(.215, .61, .355, 1), background .6s; }
#ambient.amb-dark .amb-plaster { opacity: .35; }
#ambient.amb-dark .amb-sun {
  background: radial-gradient(closest-side, rgba(214, 150, 84, .22), rgba(214, 150, 84, 0) 100%);
  mix-blend-mode: screen; opacity: calc(.8 * var(--amb-i));
}
#ambient.amb-dark .amb-l1 { opacity: calc(.32 * var(--amb-i)); }
#ambient.amb-dark .amb-l2 { opacity: calc(.2 * var(--amb-i)); }
#ambient.amb-dark .amb-glow { background: radial-gradient(closest-side, rgba(214, 160, 100, .14), rgba(214, 160, 100, 0)); mix-blend-mode: screen; }
#ambient.amb-dark .amb-grain { opacity: .08; }
#ambient.amb-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0, 0, 0, .35));
}

#ambient.amb-paused *, #ambient.amb-static * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  #ambient *, #ambient .amb-canvas { animation: none !important; transition: none !important; }
}