/* Lawndo ocean background (2026-10-17). Renderer: web-ocean by Maksymilian Dendura, MIT, see ocean/LICENSE.
   Only active once html.has-ocean is set by ocean-bg.js; without it the page keeps its black look. */
.ocean-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.001;
  transition: opacity 1.2s ease;
  background: #000;
}
.ocean-bg iframe,
.ocean-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
/* Scrim so the copy stays readable over the bright sunset sky */
.ocean-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.6) 100%);
}
html.has-ocean { background: #000; }
html.has-ocean .ocean-bg { opacity: 1; }
html.has-ocean body { background: transparent; }
html.has-ocean .can-ad {
  background: radial-gradient(ellipse at 50% 42%, rgba(184, 255, 0, 0.10), transparent 52%);
}
/* The can art is an opaque PNG on black; ocean-bg.js swaps in a cut-out copy (ocean/lawndo-can-cutout.webp) before .has-ocean is set. */
html.has-ocean .below { background: rgba(7, 8, 7, 0.86); }
html.has-ocean .site-footer { background: rgba(0, 0, 0, 0.8); }
@media (prefers-reduced-motion: reduce) {
  .ocean-bg { transition: none; }
}
@media print {
  .ocean-bg { display: none !important; }
}