:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background: #14100f;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.scene {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

.scene__photo,
.scene__shade,
.leaf-field {
  position: absolute;
  inset: 0;
}

.scene__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  filter: saturate(1.08) contrast(1.04);
  z-index: -3;
}

.scene__shade {
  background:
    linear-gradient(90deg, rgba(13, 9, 8, 0.68), rgba(13, 9, 8, 0.08) 48%, rgba(13, 9, 8, 0.55)),
    linear-gradient(0deg, rgba(13, 9, 8, 0.7), transparent 48%, rgba(13, 9, 8, 0.18));
  z-index: -2;
}

.leaf {
  position: absolute;
  top: -8vh;
  width: var(--size);
  aspect-ratio: 1.55;
  border-radius: 70% 10% 70% 10%;
  background: linear-gradient(135deg, var(--leaf-a), var(--leaf-b));
  opacity: var(--opacity);
  transform: translate3d(var(--start-x), -10vh, 0) rotate(var(--rotation));
  animation: drift var(--duration) linear var(--delay) infinite;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
}

.leaf::after {
  content: "";
  position: absolute;
  left: 16%;
  top: 46%;
  width: 70%;
  height: 1px;
  background: rgba(88, 36, 14, 0.4);
  transform: rotate(-18deg);
}

@keyframes drift {
  0% {
    transform: translate3d(var(--start-x), -10vh, 0) rotate(var(--rotation));
  }

  50% {
    transform: translate3d(calc(var(--start-x) + var(--sway)), 48vh, 0) rotate(calc(var(--rotation) + 180deg));
  }

  100% {
    transform: translate3d(calc(var(--start-x) + var(--travel)), 108vh, 0) rotate(calc(var(--rotation) + 360deg));
  }
}

@media (max-width: 700px) {
  body {
    overflow: auto;
  }

  .scene {
    min-height: 100svh;
  }
}