/* Teal-night theme inspired by the supplied reference image. */
:root {
  --dark-color: #02090c;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #02090c;
  isolation: isolate;
}

.night {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  filter: none;
  background-color: #02090c;
  background-image:
    radial-gradient(3px 3px at 5% 14%, rgba(20, 255, 249, .95) 0, rgba(20, 255, 249, .18) 65%, transparent 100%),
    radial-gradient(2px 2px at 20% 21%, rgba(8, 226, 235, .85) 0, transparent 100%),
    radial-gradient(3px 3px at 29% 13%, rgba(22, 251, 247, .75) 0, transparent 100%),
    radial-gradient(2px 2px at 40% 10%, rgba(0, 237, 234, .7) 0, transparent 100%),
    radial-gradient(4px 4px at 58% 13%, rgba(12, 255, 249, .95) 0, rgba(12, 255, 249, .1) 70%, transparent 100%),
    radial-gradient(2px 2px at 69% 19%, rgba(0, 230, 236, .85) 0, transparent 100%),
    radial-gradient(2px 2px at 86% 14%, rgba(3, 221, 226, .8) 0, transparent 100%),
    radial-gradient(3px 3px at 95% 22%, rgba(14, 255, 243, .8) 0, transparent 100%),
    radial-gradient(2px 2px at 10% 39%, rgba(0, 224, 228, .8) 0, transparent 100%),
    radial-gradient(5px 5px at 22% 48%, rgba(11, 255, 249, .95) 0, rgba(11, 255, 249, .12) 72%, transparent 100%),
    radial-gradient(2px 2px at 36% 42%, rgba(0, 240, 240, .7) 0, transparent 100%),
    radial-gradient(4px 4px at 49% 37%, rgba(0, 255, 250, .95) 0, rgba(0, 255, 250, .13) 70%, transparent 100%),
    radial-gradient(2px 2px at 72% 42%, rgba(0, 232, 236, .75) 0, transparent 100%),
    radial-gradient(5px 5px at 85% 48%, rgba(11, 255, 249, .95) 0, rgba(11, 255, 249, .1) 70%, transparent 100%),
    radial-gradient(2px 2px at 94% 39%, rgba(0, 229, 233, .65) 0, transparent 100%),
    radial-gradient(ellipse at 50% 31%, rgba(0, 98, 111, .18), transparent 43%),
    linear-gradient(to bottom, #020c10 0%, #031114 42%, #000607 83%, #000303 100%);
  opacity: 1;
}

.night::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 4%, rgba(16, 221, 225, .75), transparent 100%),
    radial-gradient(2px 2px at 31% 24%, rgba(0, 251, 244, .9), transparent 100%),
    radial-gradient(2px 2px at 43% 32%, rgba(0, 233, 237, .8), transparent 100%),
    radial-gradient(5px 5px at 58% 24%, rgba(10, 255, 248, .9), transparent 100%),
    radial-gradient(2px 2px at 64% 36%, rgba(0, 255, 245, .85), transparent 100%),
    radial-gradient(2px 2px at 79% 27%, rgba(0, 244, 246, .8), transparent 100%),
    radial-gradient(4px 4px at 79% 55%, rgba(5, 249, 246, .85), transparent 100%),
    radial-gradient(2px 2px at 17% 56%, rgba(0, 223, 231, .8), transparent 100%),
    radial-gradient(3px 3px at 28% 30%, rgba(4, 245, 245, .8), transparent 100%),
    radial-gradient(2px 2px at 92% 65%, rgba(0, 223, 232, .8), transparent 100%);
  opacity: .88;
  animation: star-twinkle 5.5s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  from { opacity: .48; }
  to { opacity: 1; }
}

.flowers {
  z-index: 2;
  transform: scale(1.22);
  transform-origin: bottom center;
}

/* Glowing aqua petals */
.flower__leaf {
  background-color: #0099a2;
  background-image: linear-gradient(to top, #20c8cb 2%, #52e4df 100%);
  box-shadow: inset 0 0 2.4vmin rgba(209, 255, 255, .56), 0 0 1.2vmin rgba(0, 238, 238, .12);
  opacity: .94;
}

.flower__leaf--4 {
  background-image: linear-gradient(to top, #12b9be 0%, #7af0e9 100%);
}

.flower__leafs::after {
  background-color: rgba(0, 238, 231, .68);
  filter: blur(9vmin);
}

.flower__white-circle {
  background: linear-gradient(135deg, #c4fff7, #7df4eb);
  box-shadow: 0 0 1.3vmin rgba(88, 255, 247, .38);
}

.flower__white-circle::after {
  background: linear-gradient(135deg, #a6e994, #56c98e 65%, #a2f4ce);
  width: 61%;
  height: 58%;
  opacity: .96;
}

.flower__line {
  background-image:
    linear-gradient(to left, rgba(0, 0, 0, .38), transparent 42%, rgba(127, 255, 248, .28)),
    linear-gradient(to top, transparent 2%, #004e55 18%, #16b9bd 100%);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .65), 0 0 1vmin rgba(0, 238, 235, .12);
}

.flower__line__leaf {
  background-image: linear-gradient(to top, rgba(0, 78, 82, .83), #079c9b 94%);
  filter: drop-shadow(0 0 .35vmin rgba(0, 238, 231, .12));
}

.flower__light {
  background-color: #00f7f4;
  box-shadow: 0 0 1.1vmin rgba(0, 255, 248, .72);
}

.flower__light:nth-child(odd) {
  background-color: #39e5de;
}


/* Lush romantic foliage: preserve the original leaf silhouettes and motion, enrich only their colors and glow. */
.flower__grass {
  --c: #39d66a;
  filter: drop-shadow(0 0 .45vmin rgba(68, 255, 139, .16));
}

.flower__grass--2 {
  --c: #8be58a;
  filter: drop-shadow(0 0 .6vmin rgba(126, 255, 173, .12));
}

.flower__grass__leaf {
  background-image: linear-gradient(115deg, rgba(12, 94, 54, .12), transparent 38%, rgba(199, 255, 177, .16)),
    linear-gradient(to top, transparent, transparent 23%, var(--c));
  filter: drop-shadow(0 0 .3vmin rgba(87, 255, 143, .2));
}

.flower__grass--top {
  border-right-color: #61e78c;
}

.flower__grass--bottom {
  background-image: linear-gradient(to top, transparent, #087c48 38%, #53e68b 100%);
}

.flower__g-long {
  --c: #31b967;
  filter: drop-shadow(0 0 .35vmin rgba(77, 255, 155, .13));
}

.long-g .leaf {
  --c: #37c86e;
  border-left-color: #55dc83;
  filter: drop-shadow(0 0 .3vmin rgba(74, 255, 148, .1));
}

.flower__g-right .leaf,
.flower__g-fr .leaf {
  border-left-color: #43d879;
  background-image: linear-gradient(115deg, transparent 15%, rgba(83, 235, 133, .08) 42%, transparent 66%),
    linear-gradient(to bottom, transparent, var(--dark-color) 60%);
  filter: drop-shadow(0 0 .5vmin rgba(40, 235, 118, .12));
}

.flower__g-front__line {
  background-image: linear-gradient(to top, transparent, #4be27b, transparent 100%);
}

.flower__g-front__leaf,
.flower__g-fr__leaf {
  box-shadow: inset 0 2px 1vmin rgba(208, 255, 208, .13), 0 0 .7vmin rgba(72, 255, 151, .08);
  background-image: linear-gradient(to bottom left, transparent, var(--dark-color) 93%),
    linear-gradient(to bottom right, #4bd878 50%, transparent 50%, transparent);
}

/* Tiny blush-pink blossoms tucked into the side foliage for a romantic garden feel. */
.long-g--2 .leaf--0::after,
.long-g--3 .leaf--1::after,
.long-g--4 .leaf--2::after,
.long-g--5 .leaf--0::after,
.long-g--7 .leaf--1::after {
  content: "";
  position: absolute;
  top: 2.5vmin;
  left: 48%;
  width: 2.35vmin;
  height: 2.35vmin;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 17%, #ffe5ef 0 19%, transparent 22%),
    radial-gradient(ellipse at 82% 40%, #f8b9d2 0 20%, transparent 23%),
    radial-gradient(ellipse at 70% 78%, #ffd8e8 0 20%, transparent 23%),
    radial-gradient(ellipse at 29% 78%, #f5a9ca 0 20%, transparent 23%),
    radial-gradient(ellipse at 17% 39%, #ffe7f0 0 20%, transparent 23%);
  filter: drop-shadow(0 0 .65vmin rgba(255, 153, 204, .62));
  opacity: .9;
  animation: blossom-glimmer 4.8s ease-in-out infinite alternate;
}

.long-g--3 .leaf--1::after { animation-delay: .8s; }
.long-g--4 .leaf--2::after { animation-delay: 1.4s; }
.long-g--5 .leaf--0::after { animation-delay: .45s; }
.long-g--7 .leaf--1::after { animation-delay: 1.8s; }

@keyframes blossom-glimmer {
  from { opacity: .68; transform: scale(.88); }
  to { opacity: 1; transform: scale(1.05); }
}

/* Keep the flowers framed like the portrait reference, while adapting to landscape screens. */
@media (orientation: landscape) {
  .flowers {
    transform: scale(.9);
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  .flowers {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .night::after { animation: none; }
}


@media (prefers-reduced-motion: reduce) {
  .long-g--2 .leaf--0::after,
  .long-g--3 .leaf--1::after,
  .long-g--4 .leaf--2::after,
  .long-g--5 .leaf--0::after,
  .long-g--7 .leaf--1::after { animation: none; }
}

.flower__grass__overlay {
  background-color: rgba(0, 0, 0, .42);
}