*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #cfe8f4;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #b8daf0;
  pointer-events: auto;
  --parallax-sky-x: 0px;
  --parallax-sky-y: 0px;
  --parallax-sun-x: 0px;
  --parallax-sun-y: 0px;
  --parallax-cloud-x: 0px;
  --parallax-cloud-y: 0px;
  --parallax-bird-x: 0px;
  --parallax-bird-y: 0px;
  --tint-amount: 0;
  --tint-under-opacity: 0;
  --tint-over-opacity: 0;
  --vignette-blur: 200px;
  --vignette-spread: 0px;
  --vignette-color: rgb(0 0 0 / 0.85);
}

.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}

#sky-layer {
  z-index: 1;
  transform: translate3d(var(--parallax-sky-x), var(--parallax-sky-y), 0);
}

#sun-layer {
  z-index: 3;
  transform: translate3d(var(--parallax-sun-x), var(--parallax-sun-y), 0);
}

#cloud-layer {
  z-index: 4;
  transform: translate3d(var(--parallax-cloud-x), var(--parallax-cloud-y), 0);
}

#bird-layer {
  z-index: 5;
  transform: translate3d(var(--parallax-bird-x), var(--parallax-bird-y), 0);
}

/* Day–night tint overlays (--tint-amount 0→1 from edges→center, driven in scene.js) */

.layer-tint {
  z-index: 2;
  background: #010107;
  opacity: 0;
  will-change: opacity;
}

#tint-under-layer {
  opacity: var(--tint-under-opacity, 0);
}

#tint-over-layer {
  z-index: 6;
  opacity: var(--tint-over-opacity, 0);
}

/* Full-window inset shadow vignette (cf. codepen.io/Ragnarokkr/pen/DWQPPM) */

#vignette-layer {
  z-index: 7;
  box-shadow: inset 0 0 var(--vignette-blur) var(--vignette-spread) var(--vignette-color);
}

/* --- Cut-paper pieces --- */

.paper {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.paper-sky {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paper-sun {
  width: var(--sun-size, 9rem);
  height: auto;
}

.mover {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  will-change: transform;
}

.cloud-wrap .paper-cloud {
  width: clamp(10rem, 28vw, 24rem);
  height: auto;
}

.bird-wrap .paper-bird {
  width: clamp(5rem, 14vw, 11rem);
  height: auto;
}

.paper-cloud,
.paper-bird {
  transform-origin: center center;
}

/* Scrap-paper shadows on all cut-out layers (not sky) */

.paper-sky {
  filter: none;
}

.paper-sun,
.paper-cloud,
.paper-bird {
  filter:
    drop-shadow(var(--paper-hard-x, 6px) var(--paper-hard-y, 10px) var(--paper-hard-blur, 12px) var(--paper-hard, rgb(30 28 24 / 0.16)))
    drop-shadow(var(--paper-soft-x, 22px) var(--paper-soft-y, 34px) var(--paper-soft-blur, 64px) var(--paper-soft, rgb(20 18 16 / 0.14)));
}

.paper-sun {
  --paper-hard-x: 3px;
  --paper-hard-y: 5px;
  --paper-hard-blur: 1px;
  --paper-hard: rgb(120 70 10 / 0.38);
  --paper-soft-x: 7px;
  --paper-soft-y: 10px;
  --paper-soft-blur: 12px;
  --paper-soft: rgb(80 50 8 / 0.11);
}

.paper-cloud {
  --paper-hard-x: 7px;
  --paper-hard-y: 11px;
  --paper-hard-blur: 12px;
  --paper-hard: rgb(50 46 42 / 0.44);
  --paper-soft-x: 22px;
  --paper-soft-y: 30px;
  --paper-soft-blur: 24px;
  --paper-soft: rgb(35 32 28 / 0.38);
}

.paper-bird {
  --paper-hard-x: 6px;
  --paper-hard-y: 10px;
  --paper-hard-blur: 10px;
  --paper-hard: rgb(25 22 18 / 0.3);
  --paper-soft-x: 20px;
  --paper-soft-y: 30px;
  --paper-soft-blur: 46px;
  --paper-soft: rgb(20 18 16 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .mover {
    will-change: auto;
  }
}

/* Time debugger — enable with ?debug=time */

body.time-debug {
  padding-bottom: 3.25rem;
}

.time-debug-bar {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  color: #f2ece3;
  background: rgb(20 18 16 / 0.88);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.time-debug-label {
  flex: 0 0 auto;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  opacity: 0.75;
}

.time-debug-readout {
  flex: 0 0 3rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.time-debug-slider {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #f6d66a;
}

.time-debug-play {
  flex: 0 0 auto;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 0.35rem;
  background: rgb(255 255 255 / 0.08);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.time-debug-play:hover {
  background: rgb(255 255 255 / 0.14);
}

.time-debug-play[aria-pressed="true"] {
  background: rgb(246 214 106 / 0.22);
  border-color: rgb(246 214 106 / 0.45);
}