/*
Theme Name: Sound of Music
Description: Grand Mesa northern lights with interactive parallax and six press-and-hold sounds.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: soundofmusic
*/
:root {
  color-scheme: dark;
  --bg-color: #06030a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--bg-color);
}

#night {
  position: fixed;
  inset: 0;
  overflow: hidden;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

#night:active {
  cursor: grabbing;
}

/* Loading poster, and the still fallback when WebGL is unavailable. */
.photograph, canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.photograph {
  background-image: url('./assets/poster.jpg');
  background-size: cover;
  /* resize() supplies the same framing used by the shader, including ultrawide
     and portrait crops. Cover is the fallback before that calculation runs. */
  background-position: center;
  background-repeat: no-repeat;
  /* The poster sits above the canvas and holds until the live frame is fully
     developed, then dissolves. Fading the two against each other on independent
     timers dipped through black in the middle. */
  opacity: 0;
  z-index: 1;
  transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.poster-ready .photograph {
  opacity: 1;
}

.ready .photograph {
  opacity: 0;
  pointer-events: none;
  transition-duration: 1.7s;
}

@media (prefers-reduced-motion: reduce) {
  .photograph {
    transition: none !important;
  }
}

/* Keep the photograph available with JavaScript disabled, too. */
.photograph { opacity: 1; }
.ready .photograph { opacity: 0; }
#night { -webkit-touch-callout: none; }
#night:focus-visible { outline: 2px solid #bde8d2; outline-offset: -4px; }
.admin-bar #night { top: 32px; }
.scene-caption {
  position: absolute;
  z-index: 2;
  top: max(26px, env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  right: 24px;
  pointer-events: none;
  color: #fff;
  font: 13px/1.7 system-ui, sans-serif;
  text-shadow: 0 1px 8px #000, 0 1px 3px #000;
}
.scene-location { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.scene-help { font-size: 11px; color: #dedbdf; }
@media (max-width: 782px) { .admin-bar #night { top: 46px; } }
@media (max-width: 480px) {
  .scene-caption { left: 20px; top: max(20px, env(safe-area-inset-top)); }
  .scene-help { display: none; }
}