/* Base reset to prevent scrollbars + make sizing predictable */
html, body {
  height: 100%;
  margin: 0;
}

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

/* Keep background animations from causing sideways scroll */
body {
  overflow-x: hidden;
}

.page-center {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Light autumn background (warm + bright) */
#bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 650px at 18% 12%, rgba(255, 204, 140, 0.40), transparent 62%),
    radial-gradient(900px 560px at 85% 22%, rgba(255, 168, 92, 0.34), transparent 58%),
    radial-gradient(900px 650px at 55% 95%, rgba(190, 110, 60, 0.18), transparent 62%),
    linear-gradient(180deg, #fff6e7 0%, #ffe4c6 45%, #ffd3a6 100%);
}

/* Very subtle vignette to keep focus centered */
#bg::after {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(closest-side, transparent 62%, rgba(120, 60, 20, 0.10) 100%);
  filter: blur(10px);
  opacity: 0.9;
}

/* =========================================
   Falling leaf images layer
   ========================================= */

#leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Outer wrapper: FALL */
.leaf {
  position: absolute;
  top: -15vh;
  left: 0;

  width: var(--size, 26px);
  height: var(--size, 26px);

  opacity: 0.5;

  animation: fall var(--fallDur, 10s) linear infinite;
  animation-delay: var(--fallDelay, 0s);
}

/* Inner: SWAY + ROTATE (does not affect fall) */
.leaf__motion {
  width: 100%;
  height: 100%;

  animation: sway var(--swayDur, 4s) ease-in-out infinite;
  animation-delay: var(--swayDelay, 0s);
}

/* The image itself */
.leaf__img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;

  /* orientation variety */
  transform: rotate(var(--baseRot, 0deg)) scaleX(var(--flip, 1));
  transform-origin: 50% 50%;

  /* optional: soften edges a touch */
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12));
}

/* Fade out as it falls: 50% -> 0% */
@keyframes fall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.40; }
  70%  { opacity: 0.15; }
  100% { transform: translate3d(0, 120vh, 0); opacity: 0.00; }
}

/* Subtle sway */
@keyframes sway {
  0%   { transform: translateX(0) rotate(0deg); }
  30%  { transform: translateX(calc(var(--sway, 18px) * 0.85)) rotate(calc(var(--rot, 0deg) * 0.55)); }
  62%  { transform: translateX(calc(var(--sway, 18px) * -0.55)) rotate(calc(var(--rot, 0deg) * -0.35)); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #leaves { display: none; }
}