/*
 * Pink rose background — shared by index.html and flower.html.
 * Overrides the old dark ".night" with a soft blush→rose→deep-pink
 * gradient, and lays a field of floating SVG roses + petals behind
 * all page content.
 */

/* Never allow sideways scrolling, even when the big bouquet is scaled up */
html,
body {
  overflow-x: hidden;
}

/* Soft pink gradient sky (overrides the previous dark starry .night) */
.night {
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(ellipse at 80% 85%, rgba(255, 138, 184, 0.55), transparent 55%),
    linear-gradient(160deg, #ffe3ef 0%, #ffc0da 35%, #ff8fb8 70%, #f06a9e 100%) !important;
  filter: none !important;
}

/* The container that holds all floating roses/petals */
.roses-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1; /* above .night(0-ish), below the page content/titles */
}

/* ---- Floating roses ---- */
.rose {
  position: absolute;
  bottom: -12vh;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  will-change: transform, opacity;
  animation:
    rose-rise var(--dur) linear var(--delay) infinite,
    rose-sway var(--sway-dur) ease-in-out var(--delay) infinite alternate;
}

.rose__svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(200, 40, 100, 0.25));
}

/* Rise from below the screen to above it, fading in and out at the edges */
@keyframes rose-rise {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: var(--op);
  }
  90% {
    opacity: var(--op);
  }
  100% {
    transform: translateY(-125vh) rotate(var(--spin));
    opacity: 0;
  }
}

/* Gentle horizontal sway layered on top of the rise */
@keyframes rose-sway {
  from {
    margin-left: calc(var(--drift) * -1);
  }
  to {
    margin-left: var(--drift);
  }
}

/* ---- Falling / drifting petals ---- */
.petal {
  position: absolute;
  top: -10vh;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  will-change: transform, opacity;
  animation:
    petal-fall var(--dur) linear var(--delay) infinite,
    petal-sway var(--sway-dur) ease-in-out var(--delay) infinite alternate;
}

.petal__svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(200, 40, 100, 0.2));
}

@keyframes petal-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: var(--op);
  }
  90% {
    opacity: var(--op);
  }
  100% {
    transform: translateY(120vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes petal-sway {
  from {
    margin-left: calc(var(--drift) * -1);
  }
  to {
    margin-left: var(--drift);
  }
}

/* Accessibility: users who prefer reduced motion get a still rose field */
@media (prefers-reduced-motion: reduce) {
  .rose,
  .petal {
    animation: none;
    opacity: var(--op);
  }
}