/* ambient.css: the atmosphere canvas and the motion toggle (v6, atmos coder). Plain text only in comments. */

/* One fixed full-viewport canvas over the film and under the content. Pointer events pass straight through. */
.atmos {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.atmos[hidden] { display: none; }

/* Motion toggle: a 44 px touch target (the button box) holding a 34 px leather disc with a gold ring. The disc is
   ::after and the ring ::before. Desktop bottom left; phones top right, inside the safe area. */
.motion-toggle {
  position: fixed;
  z-index: 60;
  left: calc(11px + env(safe-area-inset-left, 0px));
  bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--gold-hi, #d9bf8a);
  opacity: .7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The leather disc, centred in the 44 px box. */
.motion-toggle::after {
  content: "";
  position: absolute;
  top: 5px; right: 5px; bottom: 5px; left: 5px; inset: 5px;
  border: 1px solid #b8955a;
  border-radius: 50%;
  background-color: #3d0f17;
  background-image: var(--grain-light, none), var(--leather, none);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 4px rgba(0, 0, 0, .45),
    0 3px 8px rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* Inner hairline ring, like tooling on the disc. Above the disc. */
.motion-toggle::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px; bottom: 8px; left: 8px; inset: 8px;
  border: 1px solid rgba(217, 191, 138, .5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Hover only where a hover exists (touch phones keep the resting opacity). */
@media (hover: hover) {
  .motion-toggle:hover { opacity: 1; }
}
.motion-toggle:focus-visible { opacity: 1; }

.motion-toggle:focus-visible {
  outline: 2px solid var(--gold-hi, #d9bf8a);
  outline-offset: 3px;
}

.motion-toggle__svg {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5));
}

/* The slash is drawn only while motion is off (html.still, set by motion-pref.js). */
.motion-toggle__slash { opacity: 0; }
html.still .motion-toggle__slash { opacity: 1; }

/* Phones: top right, inside the safe area, away from the bottom bar. */
@media (max-width: 959px) {
  .motion-toggle {
    top: calc(7px + env(safe-area-inset-top, 0px));
    right: calc(7px + env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
  }
}