/* The light stays behind the transparent book canvas and never receives input. */
body { isolation: isolate; }
#album { position: relative; z-index: 1; }

.morning-light {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.2s ease;
}

.morning-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 9% 5%, #fff8dfeb 0, #fff9e578 28%, transparent 64%),
    radial-gradient(ellipse at 94% 87%, #abbc9f57 0, transparent 63%);
}

.morning-window {
  position: absolute;
  top: -24vh;
  left: -14vw;
  width: min(108vw, 1440px);
  height: 118vh;
  transform: rotate(-24deg) skewX(-12deg);
  background:
    linear-gradient(0deg, transparent 48%, #69775838 48%, #69775838 50%, transparent 50%),
    linear-gradient(90deg,
      #fffbe778 0% 28%, #74806342 28% 29.5%,
      #fffbe778 29.5% 61%, #74806342 61% 62.5%,
      #fffbe778 62.5% 94%, transparent 94%);
  filter: blur(8px);
  mask-image: radial-gradient(ellipse at 42% 33%, #000 12%, #0009 48%, transparent 76%);
}

.morning-foliage {
  position: absolute;
  top: -12vh;
  left: -9vw;
  width: min(65vw, 900px);
  height: 110vh;
  background: url('../assets/effects/morning-foliage.svg') left top / 100% 100% no-repeat;
  filter: blur(6px);
  opacity: .2;
  transform-origin: 0 0;
  animation: foliage-sway 24s ease-in-out infinite alternate;
  mask-image: linear-gradient(125deg, #000 8%, #000c 32%, transparent 77%);
}

body:is([data-state="opening"], [data-state="open"], [data-state="turning"]) .morning-light {
  opacity: .48;
}

@keyframes foliage-sway {
  from { transform: translate3d(-6px, -3px, 0) rotate(-1deg); }
  to { transform: translate3d(9px, 5px, 0) rotate(1.2deg); }
}

.bamboo-leaves {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .95;
  transition: opacity 1.2s ease;
}

.bamboo-mote {
  --drift: var(--travel);
  position: absolute;
  left: var(--x);
  top: -60px;
  width: var(--size);
  height: calc(var(--size) * 2.8);
  animation: bamboo-fall var(--duration) linear var(--delay) infinite;
}

.bamboo-mote.is-right { left: auto; right: var(--x); }

.bamboo-blade {
  display: block;
  width: 100%;
  height: 100%;
  background: url('../assets/effects/bamboo-leaf.svg') center / contain no-repeat;
  transform-origin: 50% 75%;
  animation: bamboo-sway var(--sway) ease-in-out var(--delay) infinite alternate;
}

body:is([data-state="opening"], [data-state="open"], [data-state="turning"]) .bamboo-leaves { opacity: .8; }
.bamboo-leaves.is-resting .bamboo-mote,
.bamboo-leaves.is-resting .bamboo-blade { animation-play-state: paused; }

@keyframes bamboo-fall {
  0% { transform: translate3d(0, -5vh, 0); opacity: 0; }
  8% { opacity: .9; }
  25% { transform: translate3d(var(--drift), 25vh, 0); }
  50% { transform: translate3d(calc(var(--drift) * -.5), 55vh, 0); }
  75% { transform: translate3d(var(--drift), 85vh, 0); }
  92% { opacity: .9; }
  100% { transform: translate3d(0, 115vh, 0); opacity: 0; }
}

@keyframes bamboo-sway {
  from { transform: rotate(calc(var(--tilt) - 22deg)) rotateY(5deg); }
  to { transform: rotate(calc(var(--tilt) + 28deg)) rotateY(58deg); }
}

@media (max-width: 680px) {
  .morning-window { width: 190vw; left: -65vw; opacity: .75; }
  .morning-foliage { width: 135vw; left: -55vw; opacity: .15; }
  body:is([data-state="opening"], [data-state="open"], [data-state="turning"]) .morning-light { opacity: .38; }
  .bamboo-mote { left: var(--mobile-x); --drift: var(--mobile-travel); }
  .bamboo-mote.is-right { left: auto; right: var(--mobile-x); }
  .bamboo-mote:nth-child(n+17) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .morning-foliage { animation: none !important; transform: rotate(-.5deg); }
  .morning-light { transition: none; }
  .bamboo-leaves { display: none; }
  .bamboo-mote, .bamboo-blade { animation: none !important; }
}