/* page-local art direction — header.php supplies the custom properties */

/* Registered as real colors so gradients can animate on theme change —
   a plain var() swapped inside background-image jumps, a registered
   property interpolates and the gradient repaints along with it. */
@property --atmosphere-wall {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}
@property --atmosphere-band {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

body[class].atmosphere-active {
  position: relative;
  isolation: isolate;
  min-block-size: 100vh;
  background: transparent;
}

body.atmosphere-active::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  block-size: 100vh;
  pointer-events: none;
  --atmosphere-wall: var(--color-wall);
  /* theme change: the room answers immediately but takes a slow full
     second — the page content (.4s) leads, the big wall breathes behind it */
  transition:
    background-color 1s cubic-bezier(.4, 0, .2, 1),
    --atmosphere-wall 1s cubic-bezier(.4, 0, .2, 1),
    --atmosphere-band 1s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  body.atmosphere-active::before { transition: none; }
}

/* mesh mode — first viewport, fading into the wall */
body.atmosphere-mode-mesh::before {
  background-color: var(--color-wall);
  background-image:
    linear-gradient(to bottom, transparent 61%, var(--atmosphere-wall) 100%),
    radial-gradient(circle at 0% 0%, var(--atmosphere-mesh-11, transparent) 0, transparent 42%),
    radial-gradient(circle at 50% 0%, var(--atmosphere-mesh-12, transparent) 0, transparent 42%),
    radial-gradient(circle at 100% 0%, var(--atmosphere-mesh-13, transparent) 0, transparent 42%),
    radial-gradient(circle at 0% 50%, var(--atmosphere-mesh-21, transparent) 0, transparent 42%),
    radial-gradient(circle at 49.9553% 34.0459%, var(--atmosphere-mesh-22, transparent) 0, transparent 42%),
    radial-gradient(circle at 100% 50%, var(--atmosphere-mesh-23, transparent) 0, transparent 42%),
    radial-gradient(circle at 0% 92.9593%, var(--atmosphere-mesh-31, transparent) 0, transparent 42%),
    radial-gradient(circle at 49.9553% 92.9593%, var(--atmosphere-mesh-32, transparent) 0, transparent 42%),
    radial-gradient(circle at 100% 92.9593%, var(--atmosphere-mesh-33, transparent) 0, transparent 42%),
    radial-gradient(circle at 0% 100%, var(--atmosphere-wall) 0, transparent 42%),
    radial-gradient(circle at 50% 100%, var(--atmosphere-wall) 0, transparent 42%),
    radial-gradient(circle at 100% 100%, var(--atmosphere-wall) 0, transparent 42%);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100vh;
}

/* gallery light — three ceiling spots; see docs/atmosphere-system.md */
body.atmosphere-mode-light::before {
  background-color: var(--color-wall);
  /* the wall's own pigment, darkened + chroma-boosted — never flat black */
  --atmosphere-shade: oklch(from var(--color-wall) calc(l * 1) calc(c * 4) h);
  --atmosphere-band: light-dark(
    color-mix(in oklab, var(--atmosphere-shade), transparent 48%),
    transparent
  );
  background-image:
    radial-gradient(33% 80% at 18% -6%, var(--atmosphere-light-1, transparent) 0, transparent 60%),
    radial-gradient(33% 88% at 50% -6%, var(--atmosphere-light-2, transparent) 0, transparent 62%),
    radial-gradient(33% 80% at 82% -6%, var(--atmosphere-light-3, transparent) 0, transparent 60%),
    linear-gradient(to bottom, transparent 6%,
      var(--atmosphere-band) 40%,
      transparent 86%);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  background-blend-mode: screen, screen, screen, multiply;
}

body.atmosphere-mode-image::before {
  background-color: var(--color-wall);
  background-image:
    linear-gradient(to bottom, transparent 61%, var(--atmosphere-wall) 100%),
    var(--atmosphere-image);
  background-position: center top, center;
  background-repeat: no-repeat;
  background-size: 100% 100vh, cover;
}

body.atmosphere-mode-image.atmosphere-image-soft::before {
  filter: blur(.875rem) saturate(.85) contrast(.9);
  transform: scale(1.035);
  transform-origin: top center;
}

body.atmosphere-mode-image.atmosphere-image-hazy::before {
  filter: blur(1.5rem) saturate(.68) contrast(.8);
  opacity: .82;
  transform: scale(1.06);
  transform-origin: top center;
}

body.atmosphere-active.t-design-studio .studio-masthead {
  background: transparent;
}

body.atmosphere-nav-light .header-grid :is(.site-home, .menu, .header-search > summary),
body.atmosphere-nav-light .studio-menu :is(a, strong, .theme-toggle),
body.atmosphere-nav-light > .lights .theme-toggle {
  color: #fff;
  text-shadow: 0 .1rem .3rem rgb(0 0 0 / .45);
}

body.atmosphere-nav-dark .header-grid :is(.site-home, .menu, .header-search > summary),
body.atmosphere-nav-dark .studio-menu :is(a, strong, .theme-toggle),
body.atmosphere-nav-dark > .lights .theme-toggle {
  color: #1c1711;
  text-shadow: 0 .1rem .3rem rgb(255 255 255 / .35);
}