*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--dark-color: #ffb6c18c;
--fl-speed: 0.8s;
--speed-leaf: 2s;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--dark-color);
overflow: hidden;
perspective: 1000px;
}
.night {
position: fixed;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 100%;
height: 100%;
filter: blur(0.1vmin);
background-image:
repeating-linear-gradient(
220deg,
rgb(0, 0, 0) 0px,
rgb(0, 0, 0) 19px,
transparent 19px,
transparent 22px
),
repeating-linear-gradient(
189deg,
rgb(0, 0, 0) 0px,
rgb(0, 0, 0) 19px,
transparent 19px,
transparent 22px
),
repeating-linear-gradient(
148deg,
rgb(0, 0, 0) 0px,
rgb(0, 0, 0) 19px,
transparent 19px,
transparent 22px
),
}
.shooting-stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.shooting-star {
position: absolute;
width: 4px;
height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
opacity: 0;
animation: shootingStar 3s linear infinite;
}
.shooting-star::before {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 0;
height: 2px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
animation: shootingStarTail 3s linear infinite;
}
.shooting-star:nth-child(1) {
top: 5%;
left: -10%;
animation-delay: 0s;
animation-duration: 2.5s;
}
.shooting-star:nth-child(2) {
top: 15%;
left: -10%;
animation-delay: 2s;
animation-duration: 3s;
}
.shooting-star:nth-child(3) {
top: 25%;
left: -10%;
animation-delay: 4s;
animation-duration: 2.8s;
}
.shooting-star:nth-child(4) {
top: 0%;
left: -10%;
animation-delay: 6s;
animation-duration: 3.2s;
}
.shooting-star:nth-child(5) {
top: 35%;
left: -10%;
animation-delay: 8s;
animation-duration: 2.7s;
}
.shooting-star:nth-child(6) {
top: 8%;
left: -10%;
animation-delay: 10s;
animation-duration: 3.1s;
}
.shooting-star:nth-child(7) {
top: 45%;
left: -10%;
animation-delay: 12s;
animation-duration: 2.9s;
}
.shooting-star:nth-child(8) {
top: 3%;
left: -10%;
animation-delay: 14s;
animation-duration: 3.3s;
}
@keyframes shootingStar {
0% {
opacity: 0;
transform: translateX(0) translateY(0) rotate(45deg);
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(120vw) translateY(50vh) rotate(10deg);
}
}
@keyframes shootingStarTail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
.flowers {
position: absolute;
bottom: 45%;
left: 50%;
transform: translateX(-50%) scale(0.45);
z-index: 2;
}
.bouquet-container {
position: relative;
width: min(90vw, 500px);
aspect-ratio: 5 / 6;
display: flex;
justify-content: center;
align-items: flex-end;
transform: translateY(115px);
}
@media (max-width: 600px) {
.bouquet-container {
width: min(94vw, 500px);
transform: translateY(0);
}
.flowers {
bottom: 45%;
transform: translateX(-50%) scale(0.45);
}
}
.bouquet-img {
position: absolute;
bottom: 15%;
width: 100%;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity 1s ease;
}
.flower {
position: absolute;
bottom: 10vmin;
transform-origin: bottom center;
z-index: 50;
}
.flower--1 {
animation: moving-flower-1 4s linear infinite;
}
.flower--1 .flower__line {
height: 70vmin;
animation-delay: 0.3s;
}
.flower--1 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 1.6s backwards;
}
.flower--1 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 1.4s backwards;
}
.flower--1 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 1.2s backwards;
}
.flower--1 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 1s backwards;
}
.flower--2 {
left: 50%;
transform: rotate(20deg);
animation: moving-flower-2 4s linear infinite;
}
.flower--2 .flower__line {
height: 60vmin;
animation-delay: 0.6s;
}
.flower--2 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 1.9s backwards;
}
.flower--2 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 1.7s backwards;
}
.flower--2 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 1.5s backwards;
}
.flower--2 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 1.3s backwards;
}
.flower--3 {
left: 50%;
transform: rotate(-15deg);
animation: moving-flower-3 4s linear infinite;
}
.flower--3 .flower__line {
animation-delay: 0.9s;
}
.flower--3 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
}
.flower--3 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 2.3s backwards;
}
.flower--3 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
}
.flower--3 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 1.9s backwards;
}
.flower--4 {
left: -25%;
z-index: -6;
transform: rotate(10deg);
animation: moving-flower-4 3.5s linear infinite;
}
.flower--4 .flower__line {
height: 90vmin;
animation-delay: 1.2s;
}
.flower--4 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 2.8s backwards;
}
.flower--4 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 2.6s backwards;
}
.flower--4 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 2.4s backwards;
}
.flower--4 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 2.2s backwards;
}
.flower--5 {
left: 75%;
z-index: -7;
transform: rotate(-25deg);
animation: moving-flower-5 4.5s linear infinite;
}
.flower--5 .flower__line {
height: 85vmin;
animation-delay: 1.9s;
}
.flower--5 .flower__line__leaf--1 {
animation: blooming-leaf-right var(--fl-speed) 2.7s backwards;
}
.flower--5 .flower__line__leaf--2 {
animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
}
.flower--5 .flower__line__leaf--3 {
animation: blooming-leaf-left var(--fl-speed) 2.3s backwards;
}
.flower--5 .flower__line__leaf--4 {
animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
}
.flower__leafs {
position: relative;
animation: blooming-flower 2s backwards;
}
.flower__leafs--1 {
animation-delay: 1.1s;
}
.flower__leafs--2 {
animation-delay: 1.4s;
}
.flower__leafs--3 {
animation-delay: 1.7s;
}
.flower__leafs--4 {
animation-delay: 2s;
}
.flower__leafs--5 {
animation-delay: 2s;
}
.flower__leafs::after {
content: "";
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -100%);
width: 8vmin;
height: 8vmin;
filter: blur(10vmin);
}
.flower__leaf {
position: absolute;
bottom: 0;
left: 50%;
width: 23vmin;
height: 6vmin;
border-radius: 60% 40% 60% 40%;
background-color: #ffd700;
background-image: linear-gradient(to top, #ff8c00, #ffd700, #ffff00);
transform-origin: bottom center;
opacity: 0.95;
box-shadow:
inset 0 0 1vmin rgba(255, 255, 255, 0.7),
0 0 3vmin rgba(255, 215, 0, 0.4);
z-index: 2;
}
.flower__leaf--1 {
transform: translate(-50%, -10%) rotate(-45deg);
}
.flower__leaf--2 {
transform: translate(-50%, -10%) rotate(-15deg);
}
.flower__leaf--3 {
transform: translate(-50%, -10%) rotate(15deg);
}
.flower__leaf--4 {
transform: translate(-50%, -10%) rotate(45deg);
}
.flower__white-circle {
position: absolute;
left: -4vmin;
top: -4vmin;
width: 10vmin;
height: 10vmin;
border-radius: 50%;
background-color: #8b4513;
background-image: radial-gradient(
circle at 30% 30%,
#654321,
#8b4513,
#2f1b14
);
box-shadow:
inset 0 0 2vmin rgba(0, 0, 0, 0.8),
0 0 1vmin rgba(139, 69, 19, 0.6);
}
.flower__white-circle::after {
content: "";
position: absolute;
left: 46%;
top: 31%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
z-index: 3;
border-radius: inherit;
background-image:
repeating-conic-gradient(
from 0deg,
#2f1b14 0deg 15deg,
#654321 15deg 30deg
),
radial-gradient(circle at center, #8b4513, #654321);
}
.flower__line {
height: 55vmin;
width: 2vmin;
background-image:
linear-gradient(
to left,
rgb(0, 0, 0, 0.3),
transparent,
rgba(255, 255, 255, 0.2)
),
linear-gradient(to top, transparent 10%, #2d5016, #4a7c23, #6b8e23);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.7);
animation: grow-flower-tree 4s backwards;
}
.flower__line__leaf {
--w: 8vmin;
--h: calc(var(--w) + 3vmin);
position: absolute;
top: 20%;
left: 90%;
width: var(--w);
height: var(--h);
border-top-right-radius: var(--h);
border-bottom-left-radius: var(--h);
background-image: linear-gradient(
to top,
rgba(45, 80, 22, 0.6),
#4a7c23,
#6b8e23
);
box-shadow: inset 0 0 1vmin rgba(0, 0, 0, 0.3);
}
.flower__line__leaf--1 {
transform: rotate(70deg) rotateY(30deg);
}
.flower__line__leaf--2 {
top: 45%;
transform: rotate(70deg) rotateY(30deg);
}
.flower__line__leaf--3,
.flower__line__leaf--4 {
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: var(--h);
border-bottom-right-radius: var(--h);
left: -460%;
top: 12%;
transform: rotate(-70deg) rotateY(30deg);
}
.flower__line__leaf--4 {
top: 40%;
}
.flower__light {
position: absolute;
bottom: 0vmin;
width: 0.8vmin;
height: 0.8vmin;
background-color: #8b4513;
border-radius: 50%;
filter: blur(0.1vmin);
animation: sunflower-seeds 6s linear infinite backwards;
box-shadow: 0 0 1vmin rgba(139, 69, 19, 0.8);
}
.flower__light:nth-child(odd) {
background-color: #654321;
}
.flower__light--1 {
left: -2vmin;
animation-delay: 1s;
}
.flower__light--2 {
left: 3vmin;
animation-delay: 0.5s;
}
.flower__light--3 {
left: -6vmin;
animation-delay: 0.3s;
}
.flower__light--4 {
left: 6vmin;
animation-delay: 0.9s;
}
.flower__light--5 {
left: -1vmin;
animation-delay: 1.5s;
}
.flower__light--6 {
left: -4vmin;
animation-delay: 3s;
}
.flower__light--7 {
left: 3vmin;
animation-delay: 2s;
}
.flower__light--8 {
left: -6vmin;
animation-delay: 3.5s;
}
.flower__grass {
--c: #4a7c23;
--line-w: 2vmin;
position: absolute;
bottom: 12vmin;
left: -7vmin;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 20;
transform-origin: bottom center;
transform: rotate(-48deg) rotateY(40deg);
}
.flower__grass--1 {
animation: moving-grass 2s linear infinite;
}
.flower__grass--2 {
left: 2vmin;
bottom: 10vmin;
transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
opacity: 0.8;
z-index: 0;
animation: moving-grass--2 1.5s linear infinite;
}
.flower__grass--3 {
left: -25vmin;
bottom: 8vmin;
transform: scale(0.7) rotate(-30deg) rotateY(45deg);
opacity: 0.9;
z-index: 15;
animation: moving-grass--3 2.2s linear infinite;
}
.flower__grass--4 {
left: -35vmin;
bottom: 15vmin;
transform: scale(0.4) rotate(60deg) rotateX(15deg) rotateY(-180deg);
opacity: 0.7;
z-index: 5;
animation: moving-grass--4 1.8s linear infinite;
}
.flower__grass--5 {
left: -18vmin;
bottom: 6vmin;
transform: scale(0.6) rotate(-60deg) rotateY(60deg);
opacity: 0.85;
z-index: 12;
animation: moving-grass--5 2.5s linear infinite;
}
.flower__grass--6 {
left: 25vmin;
bottom: 9vmin;
transform: scale(0.65) rotate(35deg) rotateY(-45deg);
opacity: 0.9;
z-index: 15;
animation: moving-grass--6 2.3s linear infinite;
}
.flower__grass--7 {
left: 35vmin;
bottom: 14vmin;
transform: scale(0.45) rotate(-70deg) rotateX(20deg) rotateY(170deg);
opacity: 0.75;
z-index: 8;
animation: moving-grass--7 1.9s linear infinite;
}
.flower__grass--8 {
left: 18vmin;
bottom: 5vmin;
transform: scale(0.55) rotate(50deg) rotateY(-70deg);
opacity: 0.8;
z-index: 10;
animation: moving-grass--8 2.1s linear infinite;
}
.flower__grass--9 {
left: -45vmin;
bottom: 20vmin;
transform: scale(0.3) rotate(20deg) rotateY(90deg);
opacity: 0.6;
z-index: 2;
animation: moving-grass--9 1.6s linear infinite;
}
.flower__grass--10 {
left: 42vmin;
bottom: 18vmin;
transform: scale(0.35) rotate(-45deg) rotateY(-120deg);
opacity: 0.65;
z-index: 3;
animation: moving-grass--10 2s linear infinite;
}
.flower__grass--top {
width: 7vmin;
height: 10vmin;
border-top-right-radius: 100%;
border-right: var(--line-w) solid var(--c);
transform-origin: bottom center;
transform: rotate(-2deg);
}
.flower__grass--bottom {
margin-top: -2px;
width: var(--line-w);
height: 25vmin;
background-image: linear-gradient(to top, transparent, var(--c));
}
.flower__grass__leaf {
--size: 10vmin;
position: absolute;
width: calc(var(--size) * 2.1);
height: var(--size);
border-top-left-radius: var(--size);
border-top-right-radius: var(--size);
background-image: linear-gradient(
to top,
transparent,
transparent 30%,
var(--c)
);
z-index: 100;
}
.flower__grass__leaf--1 {
top: -6%;
left: 30%;
--size: 6vmin;
transform: rotate(-20deg);
animation: growing-grass-ans--1 var(--speed-leaf) 2.6s backwards;
}
.flower__grass__leaf--2 {
top: -5%;
left: -110%;
--size: 6vmin;
transform: rotate(10deg);
animation: growing-grass-ans--2 var(--speed-leaf) 2.4s linear backwards;
}
.flower__grass__leaf--3 {
top: 5%;
left: 60%;
--size: 8vmin;
transform: rotate(-18deg) rotateX(-20deg);
animation: growing-grass-ans--3 var(--speed-leaf) 2.2s linear backwards;
}
.flower__grass__leaf--4 {
top: 6%;
left: -135%;
--size: 8vmin;
transform: rotate(2deg);
animation: growing-grass-ans--4 var(--speed-leaf) 2s linear backwards;
}
.flower__grass__leaf--5 {
top: 20%;
left: 60%;
--size: 10vmin;
transform: rotate(-24deg) rotateX(-20deg);
animation: growing-grass-ans--5 var(--speed-leaf) 1.8s linear backwards;
}
.flower__grass__leaf--6 {
top: 22%;
left: -180%;
--size: 10vmin;
transform: rotate(10deg);
animation: growing-grass-ans--6 var(--speed-leaf) 1.6s linear backwards;
}
.flower__grass__leaf--7 {
top: 39%;
left: 70%;
--size: 10vmin;
transform: rotate(-10deg);
animation: growing-grass-ans--7 var(--speed-leaf) 1.4s linear backwards;
}
.flower__grass__leaf--8 {
top: 40%;
left: -215%;
--size: 11vmin;
transform: rotate(10deg);
animation: growing-grass-ans--8 var(--speed-leaf) 1.2s linear backwards;
}
.flower__grass__overlay {
position: absolute;
top: -10%;
right: 0%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
filter: blur(1.5vmin);
z-index: 100;
}
.grow-ans {
animation: grow-ans 2s var(--d) backwards;
}
.growing-grass {
animation: growing-grass-ans 1s 2s backwards;
}
.not-loaded * {
animation-play-state: paused !important;
}
@keyframes grow-ans {
0% {
transform: scale(0);
opacity: 0;
}
}
@keyframes growing-grass-ans {
0% {
transform: scale(0);
}
}
@keyframes growing-grass-ans--1 {
0% {
transform-origin: bottom left;
transform: rotate(-20deg) scale(0);
}
}
@keyframes growing-grass-ans--2 {
0% {
transform-origin: bottom right;
transform: rotate(10deg) scale(0);
}
}
@keyframes growing-grass-ans--3 {
0% {
transform-origin: bottom left;
transform: rotate(-18deg) rotateX(-20deg) scale(0);
}
}
@keyframes growing-grass-ans--4 {
0% {
transform-origin: bottom right;
transform: rotate(2deg) scale(0);
}
}
@keyframes growing-grass-ans--5 {
0% {
transform-origin: bottom left;
transform: rotate(-24deg) rotateX(-20deg) scale(0);
}
}
@keyframes growing-grass-ans--6 {
0% {
transform-origin: bottom right;
transform: rotate(10deg) scale(0);
}
}
@keyframes growing-grass-ans--7 {
0% {
transform-origin: bottom left;
transform: rotate(-10deg) scale(0);
}
}
@keyframes growing-grass-ans--8 {
0% {
transform-origin: bottom right;
transform: rotate(10deg) scale(0);
}
}
@keyframes sunflower-seeds {
0% {
opacity: 0;
transform: translateY(0vmin) rotate(0deg);
}
20% {
opacity: 1;
transform: translateY(-3vmin) translateX(-1vmin) rotate(45deg);
}
40% {
opacity: 1;
transform: translateY(-8vmin) translateX(1vmin) rotate(90deg);
}
60% {
transform: translateY(-12vmin) translateX(-1vmin) rotate(135deg);
}
80% {
transform: translateY(-16vmin) translateX(2vmin) rotate(180deg);
opacity: 0.5;
}
100% {
transform: translateY(-25vmin) rotate(225deg);
opacity: 0;
}
}
@keyframes moving-flower-1 {
0%,
100% {
transform: rotate(2deg);
}
50% {
transform: rotate(-2deg);
}
}
@keyframes moving-flower-2 {
0%,
100% {
transform: rotate(18deg);
}
50% {
transform: rotate(14deg);
}
}
@keyframes moving-flower-3 {
0%,
100% {
transform: rotate(-18deg);
}
50% {
transform: rotate(-20deg) rotateY(-10deg);
}
}
@keyframes moving-flower-4 {
0%,
100% {
transform: rotate(9deg);
}
50% {
transform: rotate(12deg) rotateY(9deg);
}
}
@keyframes moving-flower-5 {
0%,
100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(-11deg) rotateY(5deg);
}
}
@keyframes blooming-leaf-right {
0% {
transform-origin: left;
transform: rotate(70deg) rotateY(30deg) scale(0);
}
}
@keyframes blooming-leaf-left {
0% {
transform-origin: right;
transform: rotate(-70deg) rotateY(30deg) scale(0);
}
}
@keyframes grow-flower-tree {
0% {
height: 0;
border-radius: 1vmin;
}
}
@keyframes blooming-flower {
0% {
transform: scale(0);
}
}
@keyframes moving-grass {
0%,
100% {
transform: rotate(-48deg) rotateY(40deg);
}
50% {
transform: rotate(-50deg) rotateY(40deg);
}
}
@keyframes moving-grass--2 {
0%,
100% {
transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
}
50% {
transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg);
}
}
@keyframes moving-grass--3 {
0%,
100% {
transform: scale(0.7) rotate(-30deg) rotateY(45deg);
}
50% {
transform: scale(0.7) rotate(-33deg) rotateY(50deg);
}
}
@keyframes moving-grass--4 {
0%,
100% {
transform: scale(0.4) rotate(60deg) rotateX(15deg) rotateY(-180deg);
}
50% {
transform: scale(0.4) rotate(63deg) rotateX(18deg) rotateY(-175deg);
}
}
@keyframes moving-grass--5 {
0%,
100% {
transform: scale(0.6) rotate(-60deg) rotateY(60deg);
}
50% {
transform: scale(0.6) rotate(-57deg) rotateY(65deg);
}
}
@keyframes moving-grass--6 {
0%,
100% {
transform: scale(0.65) rotate(35deg) rotateY(-45deg);
}
50% {
transform: scale(0.65) rotate(38deg) rotateY(-40deg);
}
}
@keyframes moving-grass--7 {
0%,
100% {
transform: scale(0.45) rotate(-70deg) rotateX(20deg) rotateY(170deg);
}
50% {
transform: scale(0.45) rotate(-67deg) rotateX(23deg) rotateY(175deg);
}
}
@keyframes moving-grass--8 {
0%,
100% {
transform: scale(0.55) rotate(50deg) rotateY(-70deg);
}
50% {
transform: scale(0.55) rotate(53deg) rotateY(-65deg);
}
}
@keyframes moving-grass--9 {
0%,
100% {
transform: scale(0.3) rotate(20deg) rotateY(90deg);
}
50% {
transform: scale(0.3) rotate(23deg) rotateY(95deg);
}
}
@keyframes moving-grass--10 {
0%,
100% {
transform: scale(0.35) rotate(-45deg) rotateY(-120deg);
}
50% {
transform: scale(0.35) rotate(-42deg) rotateY(-115deg);
}
}
.typing-message {
position: absolute;
bottom: -80px;
width: 100%;
text-align: center;
font-size: 0.7rem;
color: #fff;
font-family: monospace;
letter-spacing: 1px;
}
#typing-text::after {
content: "|";
animation: blink 1s infinite;
}
@keyframes blink {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.mini-mark {
position: fixed;
bottom: 8px;
right: 12px;
font-size: 0.6rem;
font-family: monospace;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.291);
z-index: 5;
pointer-events: none;
transition: 0.3s ease;
}
.mini-mark:hover {
color: rgba(255, 255, 255, 0.8);
}
.petal-0 { transform: translate(-50%, -10%) rotate(0deg); }
.petal-30 { transform: translate(-50%, -10%) rotate(30deg); }
.petal-60 { transform: translate(-50%, -10%) rotate(60deg); }
.petal-90 { transform: translate(-50%, -10%) rotate(90deg); }
.petal-120 { transform: translate(-50%, -10%) rotate(120deg); }
.petal-150 { transform: translate(-50%, -10%) rotate(150deg); }
.petal-180 { transform: translate(-50%, -10%) rotate(180deg); }
.petal-210 { transform: translate(-50%, -10%) rotate(210deg); }
.petal-240 { transform: translate(-50%, -10%) rotate(240deg); }
.petal-270 { transform: translate(-50%, -10%) rotate(270deg); }
.petal-300 { transform: translate(-50%, -10%) rotate(300deg); }
.petal-330 { transform: translate(-50%, -10%) rotate(330deg); }
.grow-delay-12 { --d: 1.2s; }
@media (min-width: 601px) {
.flower--1 .flower__line {
height: 58vmin;
}
.flower--2 .flower__line {
height: 50vmin;
}
.flower--3 .flower__line {
height: 47vmin;
}
.flower--4 .flower__line {
height: 72vmin;
}
.flower--5 .flower__line {
height: 68vmin;
}
}
@media (min-width: 601px) {
.flowers {
bottom: 35%;
}
}
.flowers {
width: 92vmin;
height: 88vmin;
bottom: 30%;
left: 50%;
transform: translateX(-50%) scale(.61);
transform-origin: bottom center;
z-index: 6;
}
.flower {
left: 50% !important;
bottom: 24vmin;
transform-origin: bottom center;
z-index: auto !important;
}
.flower__leafs {
position: relative;
z-index: 8;
transform-origin: 0 0;
}
.flower__head-img {
position: absolute;
left: 0;
top: 0;
display: block;
height: auto;
object-fit: contain;
pointer-events: none;
user-select: none;
transform: translate(-50%, -50%);
filter: drop-shadow(0 .65vmin .8vmin rgba(0,0,0,.15));
}
.flower--1 .flower__head-img--sunflower { width: 28vmin; }
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose { width: 25vmin; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower { width: 24.5vmin; }
.flower--1 { margin-left: 0; }
.flower--2 { margin-left: -3vmin; }
.flower--3 { margin-left: 3vmin; }
.flower--4 { margin-left: -4vmin; }
.flower--5 { margin-left: 4vmin; }
.flower--1 .flower__line { height: 66vmin; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 55vmin; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 47vmin; }
.flower__line {
position: relative;
z-index: 2;
width: 1.55vmin;
}
.flower__line__leaf {
--w: 5.3vmin;
--h: calc(var(--w) + 2vmin);
opacity: .82;
z-index: 3;
}
.flower__line__leaf--2,
.flower__line__leaf--4 {
display: none;
}
.flower__line__leaf--1 {
top: 43%;
left: 88%;
}
.flower__line__leaf--3 {
top: 57%;
left: -390%;
}
@keyframes moving-flower-1 {
0%,100% { transform: rotate(.5deg); }
50% { transform: rotate(-.5deg); }
}
@keyframes moving-flower-2 {
0%,100% { transform: rotate(-16deg); }
50% { transform: rotate(-14deg); }
}
@keyframes moving-flower-3 {
0%,100% { transform: rotate(16deg); }
50% { transform: rotate(14deg); }
}
@keyframes moving-flower-4 {
0%,100% { transform: rotate(-22deg); }
50% { transform: rotate(-20deg); }
}
@keyframes moving-flower-5 {
0%,100% { transform: rotate(22deg); }
50% { transform: rotate(20deg); }
}
.flower__leafs--1 { animation-delay: 1.05s; }
.flower__leafs--2 { animation-delay: 1.38s; }
.flower__leafs--3 { animation-delay: 1.71s; }
.flower__leafs--4 { animation-delay: 2.04s; }
.flower__leafs--5 { animation-delay: 2.37s; }
.bouquet-img--back { z-index: 1; }
.bouquet-img--front {
z-index: 12;
clip-path: inset(57% 0 0 0);
pointer-events: none;
}
@media (min-width: 601px) {
.flowers {
bottom: 30%;
transform: translateX(-50%) scale(.61);
}
.flower { bottom: 24vmin; }
.flower--1 .flower__line { height: 66vmin; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 55vmin; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 47vmin; }
}
html, body {
width: 100%;
height: 100%;
}
body {
min-height: 100svh;
height: 100dvh;
overflow: hidden;
position: relative;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.night {
inset: 0;
left: 0;
width: 100%;
height: 100%;
transform: none;
filter: none;
background:
radial-gradient(circle at 50% 69%, rgba(255, 114, 157, .16), transparent 32%),
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .11) 0 1px, transparent 1.8px),
radial-gradient(circle at 76% 11%, rgba(255, 255, 255, .12) 0 1px, transparent 1.8px),
radial-gradient(circle at 34% 35%, rgba(255, 207, 224, .10) 0 1px, transparent 1.8px),
linear-gradient(180deg, #100916 0%, #1e1026 47%, #4b253b 100%);
background-size: auto, 120px 120px, 165px 165px, 205px 205px, auto;
}
.shooting-stars { opacity: .65; z-index: 2; }
.bouquet-container {
--scene-max: 452px;
--scene-width: 92vw;
--scene-height: 89dvh;
--fan-inner: 0cqw;
--fan-outer: 0cqw;
--rose-angle: 10deg;
--side-angle: 20deg;
position: fixed !important;
left: 50% !important;
bottom: max(48px, calc(env(safe-area-inset-bottom) + 34px)) !important;
width: min(var(--scene-width), calc(var(--scene-height) * 5 / 6), var(--scene-max)) !important;
aspect-ratio: 5 / 6 !important;
height: auto !important;
transform: translateX(-50%) !important;
display: block !important;
container-type: inline-size;
overflow: visible;
z-index: 3;
}
.bouquet-container::before {
content: "";
position: absolute;
left: 50%;
bottom: 2cqw;
width: 72%;
height: 12%;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255, 126, 164, .16), transparent 70%);
filter: blur(16px);
z-index: 0;
pointer-events: none;
}
.bouquet-img {
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: auto !important;
opacity: 0;
transition: opacity 1s ease;
pointer-events: none;
filter: drop-shadow(0 15px 22px rgba(0, 0, 0, .18));
}
.bouquet-img--back { z-index: 4 !important; }
.bouquet-img--front {
z-index: 14 !important;
clip-path: inset(39% 0 0 0) !important;
}
.flowers {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
left: 0 !important;
bottom: auto !important;
transform: none !important;
transform-origin: bottom center !important;
z-index: 8 !important;
overflow: visible;
pointer-events: none;
}
.flower {
left: 50% !important;
bottom: 42.5cqw !important;
margin-left: 0 !important;
transform-origin: bottom center !important;
}
.flower--1 { z-index: 10 !important; }
.flower--2 { z-index: 12 !important; }
.flower--3 { z-index: 12 !important; }
.flower--4 { z-index: 8 !important; }
.flower--5 { z-index: 8 !important; }
.flower--1 .flower__line { height: 36cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 29.5cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 24cqw !important; }
.flower__line {
position: relative;
width: clamp(4px, .95cqw, 6px) !important;
z-index: 2;
background-image:
linear-gradient(to left, rgba(0,0,0,.16), transparent, rgba(255,255,255,.12)),
linear-gradient(to top, #31531e, #4d7d2c, #668f39) !important;
box-shadow: inset 0 0 1px rgba(0,0,0,.45) !important;
}
.flower__line__leaf {
--w: clamp(15px, 4.4cqw, 23px) !important;
--h: calc(var(--w) + 6px) !important;
opacity: .78 !important;
}
.flower__line__leaf--2,
.flower__line__leaf--4 { display: none !important; }
.flower__line__leaf--1 { top: 40% !important; left: 82% !important; }
.flower__line__leaf--3 { top: 57% !important; left: -350% !important; }
.flower__leafs {
position: relative;
z-index: 8;
transform-origin: 0 0;
}
.flower__head-img {
position: absolute !important;
left: 0 !important;
top: 0 !important;
display: block;
height: auto !important;
object-fit: contain;
transform: translate(-50%, -50%) !important;
filter: drop-shadow(0 4px 5px rgba(0,0,0,.16)) !important;
}
.flower--1 .flower__head-img--sunflower { width: 23cqw !important; }
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose { width: 21cqw !important; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower { width: 18.5cqw !important; }
@keyframes moving-flower-1 {
0%, 100% { transform: rotate(.4deg); }
50% { transform: rotate(-.4deg); }
}
@keyframes moving-flower-2 {
0%, 100% { transform: rotate(calc(var(--rose-angle) * -1)); }
50% { transform: rotate(calc((var(--rose-angle) - 1deg) * -1)); }
}
@keyframes moving-flower-3 {
0%, 100% { transform: rotate(var(--rose-angle)); }
50% { transform: rotate(calc(var(--rose-angle) - 1deg)); }
}
@keyframes moving-flower-4 {
0%, 100% { transform: rotate(calc(var(--side-angle) * -1)); }
50% { transform: rotate(calc((var(--side-angle) - 1.2deg) * -1)); }
}
@keyframes moving-flower-5 {
0%, 100% { transform: rotate(var(--side-angle)); }
50% { transform: rotate(calc(var(--side-angle) - 1.2deg)); }
}
.flower__leafs--1 { animation-delay: 1.05s !important; }
.flower__leafs--2 { animation-delay: 1.38s !important; }
.flower__leafs--3 { animation-delay: 1.71s !important; }
.flower__leafs--4 { animation-delay: 2.04s !important; }
.flower__leafs--5 { animation-delay: 2.37s !important; }
.typing-message {
position: fixed !important;
left: 50% !important;
bottom: max(12px, env(safe-area-inset-bottom)) !important;
width: min(88vw, 520px) !important;
transform: translateX(-50%) !important;
text-align: center !important;
font-size: clamp(.67rem, 1.55vw, .78rem) !important;
line-height: 1.55;
color: rgba(255,255,255,.9);
letter-spacing: .08em;
text-shadow: 0 1px 8px rgba(0,0,0,.45);
z-index: 20;
}
.mini-mark {
right: max(10px, env(safe-area-inset-right)) !important;
bottom: max(8px, env(safe-area-inset-bottom)) !important;
z-index: 21 !important;
}
@media (max-width: 430px) {
.bouquet-container {
--scene-width: 94vw;
--scene-height: 86dvh;
--scene-max: 386px;
--rose-angle: 9deg;
--side-angle: 18deg;
bottom: max(58px, calc(env(safe-area-inset-bottom) + 44px)) !important;
}
.flower--1 .flower__line { height: 37cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 30cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 24.5cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.bouquet-container {
--scene-width: 64vw;
--scene-height: 84dvh;
--scene-max: 510px;
--rose-angle: 10.5deg;
--side-angle: 20deg;
bottom: max(34px, calc(env(safe-area-inset-bottom) + 24px)) !important;
}
.flower--1 .flower__head-img--sunflower { width: 22.5cqw !important; }
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose { width: 20.5cqw !important; }
}
@media (min-width: 1051px) {
.bouquet-container {
--scene-width: 42vw;
--scene-height: 84dvh;
--scene-max: 525px;
bottom: 24px !important;
}
}
@media (orientation: landscape) and (max-height: 760px) {
.bouquet-container {
--scene-width: 48vw;
--scene-height: 88dvh;
--scene-max: 430px;
bottom: 4px !important;
}
.typing-message {
left: 2.5vw !important;
bottom: 14px !important;
width: min(34vw, 320px) !important;
transform: none !important;
text-align: left !important;
}
}
.flower__line {
animation: grow-flower-tree 4s backwards !important;
}
.flower__leafs {
animation: blooming-flower 2s backwards !important;
}
.flower__leafs--1 { animation-delay: 1.1s !important; }
.flower__leafs--2 { animation-delay: 1.4s !important; }
.flower__leafs--3 { animation-delay: 1.7s !important; }
.flower__leafs--4 { animation-delay: 2s !important; }
.flower__leafs--5 { animation-delay: 2s !important; }
.flower--1 .flower__line { animation-delay: 0.3s !important; }
.flower--2 .flower__line { animation-delay: 0.6s !important; }
.flower--3 .flower__line { animation-delay: 0.9s !important; }
.flower--4 .flower__line { animation-delay: 1.2s !important; }
.flower--5 .flower__line { animation-delay: 1.9s !important; }
.flower--1 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 1.6s backwards !important; }
.flower--1 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 1.4s backwards !important; }
.flower--1 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 1.2s backwards !important; }
.flower--1 .flower__line__leaf--4 { animation: blooming-leaf-left var(--fl-speed) 1s backwards !important; }
.flower--2 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 1.9s backwards !important; }
.flower--2 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 1.7s backwards !important; }
.flower--2 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 1.5s backwards !important; }
.flower--2 .flower__line__leaf--4 { animation: blooming-leaf-left var(--fl-speed) 1.3s backwards !important; }
.flower--3 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 2.5s backwards !important; }
.flower--3 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 2.3s backwards !important; }
.flower--3 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 2.1s backwards !important; }
.flower--3 .flower__line__leaf--4 { animation: blooming-leaf-left var(--fl-speed) 1.9s backwards !important; }
.flower--4 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 2.8s backwards !important; }
.flower--4 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 2.6s backwards !important; }
.flower--4 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 2.4s backwards !important; }
.flower--4 .flower__line__leaf--4 { animation: blooming-leaf-left var(--fl-speed) 2.2s backwards !important; }
.flower--5 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 2.7s backwards !important; }
.flower--5 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 2.5s backwards !important; }
.flower--5 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 2.3s backwards !important; }
.flower--5 .flower__line__leaf--4 { animation: blooming-leaf-left var(--fl-speed) 2.1s backwards !important; }
.flower {
will-change: transform;
}
.flower--1 {
animation:
sprout-flower-1 1.25s cubic-bezier(.22,.61,.36,1) .3s backwards,
moving-flower-1 4s linear 1.55s infinite !important;
}
.flower--2 {
animation:
sprout-flower-2 1.28s cubic-bezier(.22,.61,.36,1) .6s backwards,
moving-flower-2 4s linear 1.88s infinite !important;
}
.flower--3 {
animation:
sprout-flower-3 1.28s cubic-bezier(.22,.61,.36,1) .9s backwards,
moving-flower-3 4s linear 2.18s infinite !important;
}
.flower--4 {
animation:
sprout-flower-4 1.34s cubic-bezier(.22,.61,.36,1) 1.2s backwards,
moving-flower-4 3.5s linear 2.54s infinite !important;
}
.flower--5 {
animation:
sprout-flower-5 1.34s cubic-bezier(.22,.61,.36,1) 1.9s backwards,
moving-flower-5 4.5s linear 3.24s infinite !important;
}
@keyframes sprout-flower-1 {
0% {
transform: translateY(14px) rotate(0deg);
opacity: 0;
}
18% {
opacity: 1;
}
100% {
transform: translateY(0) rotate(.4deg);
opacity: 1;
}
}
@keyframes sprout-flower-2 {
0% {
transform: translateY(18px) rotate(0deg);
opacity: 0;
}
18% {
opacity: 1;
}
100% {
transform: translateY(0) rotate(calc(var(--rose-angle) * -1));
opacity: 1;
}
}
@keyframes sprout-flower-3 {
0% {
transform: translateY(18px) rotate(0deg);
opacity: 0;
}
18% {
opacity: 1;
}
100% {
transform: translateY(0) rotate(var(--rose-angle));
opacity: 1;
}
}
@keyframes sprout-flower-4 {
0% {
transform: translateY(22px) rotate(0deg);
opacity: 0;
}
18% {
opacity: 1;
}
100% {
transform: translateY(0) rotate(calc(var(--side-angle) * -1));
opacity: 1;
}
}
@keyframes sprout-flower-5 {
0% {
transform: translateY(22px) rotate(0deg);
opacity: 0;
}
18% {
opacity: 1;
}
100% {
transform: translateY(0) rotate(var(--side-angle));
opacity: 1;
}
}
.bouquet-container {
--rose-angle: 12deg !important;
--side-angle: 24deg !important;
}
.flower--1 { z-index: 16 !important; }
.flower--1 .flower__line { height: 39cqw !important; }
.flower--1 .flower__head-img--sunflower {
width: 23.6cqw !important;
}
.flower--2,
.flower--3 { z-index: 12 !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 27.8cqw !important; }
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose {
width: 19.6cqw !important;
}
.flower--4,
.flower--5 { z-index: 10 !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 27cqw !important; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower {
width: 20.2cqw !important;
}
@keyframes sprout-flower-2 {
0% { transform: translateY(18px) rotate(0deg); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateY(0) rotate(-12deg); opacity: 1; }
}
@keyframes sprout-flower-3 {
0% { transform: translateY(18px) rotate(0deg); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateY(0) rotate(12deg); opacity: 1; }
}
@keyframes sprout-flower-4 {
0% { transform: translateY(22px) rotate(0deg); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateY(0) rotate(-24deg); opacity: 1; }
}
@keyframes sprout-flower-5 {
0% { transform: translateY(22px) rotate(0deg); opacity: 0; }
18% { opacity: 1; }
100% { transform: translateY(0) rotate(24deg); opacity: 1; }
}
@media (max-width: 430px) {
.flower--1 .flower__line { height: 40.5cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 28.4cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 27.8cqw !important; }
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose { width: 19.2cqw !important; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower { width: 20.8cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.bouquet-container {
--rose-angle: 11.5deg !important;
--side-angle: 23deg !important;
}
.flower--1 .flower__line { height: 38cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 28.2cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 26.4cqw !important; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower { width: 19.5cqw !important; }
}
:root {
--rose-angle: 11deg;
--side-angle: 18deg;
}
body {
background: #b88e98 !important;
}
.night {
inset: 0;
background:
radial-gradient(circle at 50% 65%, rgba(255,255,255,.06), transparent 22%),
radial-gradient(circle at 8% 12%, #dffbff 0 1.2px, transparent 1.9px),
radial-gradient(circle at 21% 16%, #dffbff 0 0.9px, transparent 1.7px),
radial-gradient(circle at 31% 9%, #dffbff 0 1.4px, transparent 2px),
radial-gradient(circle at 40% 14%, #dffbff 0 1px, transparent 1.7px),
radial-gradient(circle at 52% 10%, #dffbff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 66% 13%, #dffbff 0 1px, transparent 1.8px),
radial-gradient(circle at 78% 8%, #dffbff 0 1.2px, transparent 1.9px),
radial-gradient(circle at 86% 10%, #dffbff 0 1.1px, transparent 1.7px),
radial-gradient(circle at 96% 18%, #eefcff 0 1.2px, transparent 1.8px),
radial-gradient(circle at 6% 62%, #e8fcff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 17% 73%, #e8fcff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 29% 58%, #e8fcff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 48% 71%, #e8fcff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 64% 67%, #e8fcff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 81% 56%, #e8fcff 0 1.1px, transparent 1.8px),
radial-gradient(circle at 93% 76%, #eefcff 0 1.2px, transparent 1.8px),
linear-gradient(180deg, #8d7079 0%, #a8848d 45%, #c39da7 100%) !important;
background-color: #b88e98 !important;
background-size: auto !important;
filter: none !important;
}
.night::after {
content: none !important;
}
.shooting-stars {
opacity: .72 !important;
}
.shooting-star {
width: 3px !important;
height: 3px !important;
box-shadow: 0 0 8px 2px rgba(255,255,255,.75) !important;
}
.shooting-star::before {
height: 2px !important;
}
.bouquet-container {
--scene-width: 74vw !important;
--scene-height: 78dvh !important;
--scene-max: 650px !important;
left: 50% !important;
bottom: 50% !important;
transform: translate(-50%, 50%) !important;
}
.bouquet-container::before {
width: 78% !important;
height: 14% !important;
bottom: 0.5cqw !important;
background: radial-gradient(ellipse, rgba(110, 53, 73, .14), transparent 72%) !important;
filter: blur(18px) !important;
}
.bouquet-img {
filter: drop-shadow(0 12px 20px rgba(70, 34, 45, .14)) !important;
}
.bouquet-img--front {
clip-path: inset(35.5% 0 0 0) !important;
}
.flower {
bottom: 42.4cqw !important;
}
.flower--1 { z-index: 18 !important; }
.flower--1 .flower__line { height: 40.5cqw !important; }
.flower--1 .flower__head-img--sunflower { width: 23.8cqw !important; }
.flower--2,
.flower--3 { z-index: 14 !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 31cqw !important; }
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose { width: 20.4cqw !important; }
.flower--4,
.flower--5 { z-index: 10 !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 26cqw !important; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower { width: 19.2cqw !important; }
.flower__line {
width: clamp(4px, .9cqw, 6px) !important;
}
.flower__line__leaf {
--w: clamp(18px, 5.2cqw, 28px) !important;
--h: calc(var(--w) + 8px) !important;
opacity: .82 !important;
}
.flower__line__leaf--2,
.flower__line__leaf--4 {
display: block !important;
opacity: .7 !important;
}
.flower__line__leaf--1 { top: 33% !important; left: 88% !important; }
.flower__line__leaf--2 { top: 56% !important; left: 86% !important; }
.flower__line__leaf--3 { top: 44% !important; left: -380% !important; }
.flower__line__leaf--4 { top: 66% !important; left: -365% !important; }
.typing-message,
.mini-mark {
display: none !important;
}
@media (max-width: 430px) {
.bouquet-container {
--scene-width: 86vw !important;
--scene-height: 74dvh !important;
--scene-max: 420px !important;
}
.flower--1 .flower__line { height: 41cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 31.3cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 26.2cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.bouquet-container {
--scene-width: 61vw !important;
--scene-height: 76dvh !important;
--scene-max: 640px !important;
}
}
@media (min-width: 1051px) {
.bouquet-container {
--scene-width: 34vw !important;
--scene-height: 74dvh !important;
--scene-max: 600px !important;
}
}
.flower--1 { z-index: 9 !important; }
.flower--1 .flower__line { height: 39.2cqw !important; }
.flower--1 .flower__head-img--sunflower { width: 22.8cqw !important; }
.flower--2,
.flower--3 { z-index: 14 !important; }
.flower--4,
.flower--5 { z-index: 18 !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 27.2cqw !important; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower { width: 20.1cqw !important; }
@media (max-width: 430px) {
.flower--1 .flower__line { height: 39.8cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 27.5cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 .flower__line { height: 38.8cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 26.8cqw !important; }
}
.flower--1 .flower__line { height: 41.1cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 25.6cqw !important; }
@media (max-width: 430px) {
.flower--1 .flower__line { height: 41.8cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 25.9cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 .flower__line { height: 40.6cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 25.3cqw !important; }
}
.bouquet-img--back {
z-index: 4 !important;
}
.bouquet-img--front {
z-index: 15 !important;
clip-path: polygon(
33.5% 45.8%,
41.5% 45.3%,
48% 46.4%,
52% 46.4%,
58.5% 45.3%,
66.5% 45.8%,
64% 50.6%,
59% 54.7%,
53.5% 56.3%,
46.5% 56.3%,
41% 54.7%,
36% 50.6%
) !important;
}
.flower__leafs,
.flower__head-img {
overflow: visible !important;
}
.bouquet-img--front {
filter: drop-shadow(0 5px 7px rgba(65, 35, 39, .07)) !important;
}
body {
background: #c39aa8 !important;
}
.night {
background:
radial-gradient(circle at 50% 31%, rgba(171, 194, 220, .92) 0%, rgba(171, 194, 220, .56) 12%, rgba(171, 194, 220, .16) 26%, transparent 42%),
radial-gradient(circle at 9% 9%, rgba(255,255,255,.82) 0 1px, transparent 2px),
radial-gradient(circle at 23% 18%, rgba(229,252,255,.85) 0 1.1px, transparent 2px),
radial-gradient(circle at 37% 12%, rgba(229,252,255,.8) 0 1.1px, transparent 2px),
radial-gradient(circle at 49% 9%, rgba(229,252,255,.85) 0 1px, transparent 2px),
radial-gradient(circle at 62% 16%, rgba(229,252,255,.8) 0 1px, transparent 2px),
radial-gradient(circle at 78% 11%, rgba(229,252,255,.85) 0 1px, transparent 2px),
radial-gradient(circle at 91% 13%, rgba(229,252,255,.82) 0 1px, transparent 2px),
linear-gradient(180deg, #b18a97 0%, #c39aa8 48%, #cfa9b5 100%) !important;
background-color: #c39aa8 !important;
}
.shooting-stars {
opacity: .78 !important;
}
.shooting-star {
width: 3px !important;
height: 3px !important;
box-shadow: 0 0 8px 2px rgba(255,255,255,.7) !important;
}
.shooting-star::before {
height: 2px !important;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%) !important;
}
.bouquet-container {
--scene-width: 86vw !important;
--scene-height: 74dvh !important;
--scene-max: 560px !important;
left: 50% !important;
bottom: 50% !important;
transform: translate(-50%, 50%) !important;
}
.bouquet-container::before {
width: 76% !important;
height: 13% !important;
bottom: 1cqw !important;
background: radial-gradient(ellipse, rgba(90, 48, 58, .13), transparent 74%) !important;
}
.bouquet-img {
filter: drop-shadow(0 10px 18px rgba(76, 42, 50, .12)) !important;
}
.bouquet-img--front {
z-index: 15 !important;
clip-path: polygon(
31% 44.8%,
40.2% 44.4%,
47.6% 46.1%,
52.4% 46.1%,
59.8% 44.4%,
69% 44.8%,
66.4% 49.8%,
61.2% 54.4%,
54.2% 56.4%,
45.8% 56.4%,
38.8% 54.4%,
33.6% 49.8%
) !important;
}
.flower {
bottom: 42.2cqw !important;
}
.flower--1 { z-index: 9 !important; }
.flower--1 .flower__line { height: 40.6cqw !important; }
.flower--1 .flower__head-img--sunflower { width: 23.6cqw !important; }
.flower--2,
.flower--3 { z-index: 15 !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 31.4cqw !important; }
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose { width: 20.8cqw !important; }
.flower--4,
.flower--5 { z-index: 18 !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 24.9cqw !important; }
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower { width: 20.2cqw !important; }
.flower__line__leaf {
--w: clamp(18px, 5.5cqw, 28px) !important;
--h: calc(var(--w) + 8px) !important;
opacity: .85 !important;
}
.flower__line__leaf--2,
.flower__line__leaf--4 {
display: block !important;
opacity: .78 !important;
}
.flower__line__leaf--1 { top: 33% !important; left: 90% !important; }
.flower__line__leaf--2 { top: 59% !important; left: 87% !important; }
.flower__line__leaf--3 { top: 44% !important; left: -388% !important; }
.flower__line__leaf--4 { top: 68% !important; left: -370% !important; }
.typing-message,
.mini-mark {
display: none !important;
}
@media (max-width: 430px) {
.bouquet-container {
--scene-width: 89vw !important;
--scene-height: 72dvh !important;
--scene-max: 420px !important;
}
.flower--1 .flower__line { height: 41cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 31.8cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 25.1cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.bouquet-container {
--scene-width: 60vw !important;
--scene-height: 72dvh !important;
--scene-max: 560px !important;
}
}
@media (min-width: 1051px) {
.bouquet-container {
--scene-width: 36vw !important;
--scene-height: 70dvh !important;
--scene-max: 540px !important;
}
}
.bouquet-img--front {
z-index: 15 !important;
clip-path: polygon(
31.5% 46.2%,
40.3% 45.8%,
47.7% 47.0%,
52.3% 47.0%,
59.7% 45.8%,
68.5% 46.2%,
66.2% 50.5%,
61.0% 54.8%,
54.0% 56.5%,
46.0% 56.5%,
39.0% 54.8%,
33.8% 50.5%
) !important;
}
.flower--4 .flower__line,
.flower--5 .flower__line {
height: 22.2cqw !important;
}
.flower--2 .flower__line,
.flower--3 .flower__line {
height: 30.7cqw !important;
}
.flower--4 .flower__line__leaf--2,
.flower--5 .flower__line__leaf--2,
.flower--4 .flower__line__leaf--4,
.flower--5 .flower__line__leaf--4 {
opacity: .84 !important;
}
@media (max-width: 430px) {
.flower--4 .flower__line,
.flower--5 .flower__line { height: 22.5cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 30.9cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--4 .flower__line,
.flower--5 .flower__line { height: 22.0cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 30.5cqw !important; }
}
.bouquet-img--front {
z-index: 15 !important;
clip-path: polygon(
31.5% 46.2%,
40.3% 45.8%,
47.7% 47.0%,
52.3% 47.0%,
59.7% 45.8%,
68.5% 46.2%,
66.2% 50.5%,
61.0% 54.8%,
54.0% 56.5%,
46.0% 56.5%,
39.0% 54.8%,
33.8% 50.5%
) !important;
}
.flower--4 .flower__line,
.flower--5 .flower__line {
height: 19.35cqw !important;
}
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower {
width: 20.6cqw !important;
}
.flower--4 .flower__line__leaf--1,
.flower--5 .flower__line__leaf--1 { top: 29% !important; }
.flower--4 .flower__line__leaf--2,
.flower--5 .flower__line__leaf--2 { top: 49% !important; }
.flower--4 .flower__line__leaf--3,
.flower--5 .flower__line__leaf--3 { top: 39% !important; }
.flower--4 .flower__line__leaf--4,
.flower--5 .flower__line__leaf--4 { top: 60% !important; }
@media (max-width: 430px) {
.flower--4 .flower__line,
.flower--5 .flower__line { height: 19.55cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--4 .flower__line,
.flower--5 .flower__line { height: 19.15cqw !important; }
}
.flower--1 .flower__head-img--sunflower {
width: 21.6cqw !important;
}
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose {
width: 19.0cqw !important;
}
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower {
width: 18.8cqw !important;
}
.flower--4 .flower__line,
.flower--5 .flower__line {
height: 18.45cqw !important;
}
@media (max-width: 430px) {
.flower--4 .flower__line,
.flower--5 .flower__line {
height: 18.65cqw !important;
}
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--4 .flower__line,
.flower--5 .flower__line {
height: 18.25cqw !important;
}
}
:root {
--rose-angle: 11deg !important;
--side-angle: 18deg !important;
}
.flower--1 .flower__line { height: 39.8cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 31.2cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 18.45cqw !important; }
.flower--2 {
animation:
sprout-flower-2-curve 1.35s cubic-bezier(.22,.61,.36,1) .6s backwards,
moving-flower-2-curve 4s linear 1.95s infinite !important;
}
.flower--3 {
animation:
sprout-flower-3-curve 1.35s cubic-bezier(.22,.61,.36,1) .9s backwards,
moving-flower-3-curve 4s linear 2.25s infinite !important;
}
.flower--4 {
animation:
sprout-flower-4-curve 1.34s cubic-bezier(.22,.61,.36,1) 1.2s backwards,
moving-flower-4-curve 3.5s linear 2.54s infinite !important;
}
.flower--5 {
animation:
sprout-flower-5-curve 1.34s cubic-bezier(.22,.61,.36,1) 1.9s backwards,
moving-flower-5-curve 4.5s linear 3.24s infinite !important;
}
@keyframes sprout-flower-2-curve {
0% {
transform: translateY(20px) translateX(0) rotate(0deg);
opacity: 0;
}
28% {
transform: translateY(13px) translateX(-4px) rotate(-4deg);
opacity: 1;
}
58% {
transform: translateY(6px) translateX(-10px) rotate(-13deg);
opacity: 1;
}
100% {
transform: translateY(0) translateX(0) rotate(-11deg);
opacity: 1;
}
}
@keyframes sprout-flower-3-curve {
0% {
transform: translateY(20px) translateX(0) rotate(0deg);
opacity: 0;
}
28% {
transform: translateY(13px) translateX(4px) rotate(4deg);
opacity: 1;
}
58% {
transform: translateY(6px) translateX(10px) rotate(13deg);
opacity: 1;
}
100% {
transform: translateY(0) translateX(0) rotate(11deg);
opacity: 1;
}
}
@keyframes sprout-flower-4-curve {
0% {
transform: translateY(18px) translateX(0) rotate(0deg);
opacity: 0;
}
45% {
transform: translateY(9px) translateX(-5px) rotate(-8deg);
opacity: 1;
}
100% {
transform: translateY(0) translateX(0) rotate(-18deg);
opacity: 1;
}
}
@keyframes sprout-flower-5-curve {
0% {
transform: translateY(18px) translateX(0) rotate(0deg);
opacity: 0;
}
45% {
transform: translateY(9px) translateX(5px) rotate(8deg);
opacity: 1;
}
100% {
transform: translateY(0) translateX(0) rotate(18deg);
opacity: 1;
}
}
@keyframes moving-flower-2-curve {
0%, 100% { transform: rotate(-11deg); }
50% { transform: rotate(-10deg); }
}
@keyframes moving-flower-3-curve {
0%, 100% { transform: rotate(11deg); }
50% { transform: rotate(10deg); }
}
@keyframes moving-flower-4-curve {
0%, 100% { transform: rotate(-18deg); }
50% { transform: rotate(-16.8deg); }
}
@keyframes moving-flower-5-curve {
0%, 100% { transform: rotate(18deg); }
50% { transform: rotate(16.8deg); }
}
@media (max-width: 430px) {
.flower--2 .flower__line,
.flower--3 .flower__line { height: 31.4cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 18.65cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--2 .flower__line,
.flower--3 .flower__line { height: 30.8cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 18.25cqw !important; }
}
.flower--1 {
z-index: 9 !important;
margin-left: 0.6cqw !important;
}
.flower--1 .flower__line {
height: 39.2cqw !important;
}
.flower--1 .flower__head-img--sunflower {
width: 21.9cqw !important;
}
.flower--2 {
z-index: 16 !important;
margin-left: -4.4cqw !important;
}
.flower--3 {
z-index: 15 !important;
margin-left: 4.8cqw !important;
}
.flower--2 .flower__line {
height: 30.6cqw !important;
}
.flower--3 .flower__line {
height: 29.8cqw !important;
}
.flower--2 .flower__head-img--rose,
.flower--3 .flower__head-img--rose {
width: 19.2cqw !important;
}
.flower--4 {
z-index: 18 !important;
margin-left: -7cqw !important;
}
.flower--5 {
z-index: 19 !important;
margin-left: 6.2cqw !important;
}
.flower--4 .flower__line {
height: 18.7cqw !important;
}
.flower--5 .flower__line {
height: 19.3cqw !important;
}
.flower--4 .flower__head-img--sunflower,
.flower--5 .flower__head-img--sunflower {
width: 18.9cqw !important;
}
.flower--2 .flower__line__leaf--2,
.flower--3 .flower__line__leaf--2,
.flower--4 .flower__line__leaf--2,
.flower--5 .flower__line__leaf--2,
.flower--4 .flower__line__leaf--4,
.flower--5 .flower__line__leaf--4 {
display: block !important;
opacity: .76 !important;
}
.flower--4 .flower__line__leaf--1 { top: 31% !important; }
.flower--4 .flower__line__leaf--2 { top: 52% !important; }
.flower--4 .flower__line__leaf--3 { top: 43% !important; }
.flower--4 .flower__line__leaf--4 { top: 66% !important; }
.flower--5 .flower__line__leaf--1 { top: 28% !important; }
.flower--5 .flower__line__leaf--2 { top: 49% !important; }
.flower--5 .flower__line__leaf--3 { top: 39% !important; }
.flower--5 .flower__line__leaf--4 { top: 62% !important; }
.bouquet-img--front {
z-index: 15 !important;
}
@media (max-width: 430px) {
.flower--1 { margin-left: 0.4cqw !important; }
.flower--2 { margin-left: -4.1cqw !important; }
.flower--3 { margin-left: 4.3cqw !important; }
.flower--4 { margin-left: -6.6cqw !important; }
.flower--5 { margin-left: 5.9cqw !important; }
.flower--1 .flower__line { height: 39.6cqw !important; }
.flower--2 .flower__line { height: 30.8cqw !important; }
.flower--3 .flower__line { height: 30.1cqw !important; }
.flower--4 .flower__line { height: 18.95cqw !important; }
.flower--5 .flower__line { height: 19.5cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 { margin-left: 0.7cqw !important; }
.flower--2 { margin-left: -4.7cqw !important; }
.flower--3 { margin-left: 5.0cqw !important; }
.flower--4 { margin-left: -7.2cqw !important; }
.flower--5 { margin-left: 6.5cqw !important; }
.flower--1 .flower__line { height: 38.9cqw !important; }
.flower--2 .flower__line { height: 30.2cqw !important; }
.flower--3 .flower__line { height: 29.5cqw !important; }
.flower--4 .flower__line { height: 18.5cqw !important; }
.flower--5 .flower__line { height: 19.1cqw !important; }
}
:root {
--rose-angle: 10deg !important;
--side-angle: 16deg !important;
}
.flower--1 {
z-index: 9 !important;
margin-left: 1.2cqw !important;
}
.flower--1 .flower__line {
height: 38.8cqw !important;
}
.flower--1 .flower__head-img--sunflower {
width: 21.6cqw !important;
}
.flower--2 {
z-index: 16 !important;
margin-left: -5.6cqw !important;
}
.flower--3 {
z-index: 15 !important;
margin-left: 3.4cqw !important;
}
.flower--2 .flower__line {
height: 29.4cqw !important;
}
.flower--3 .flower__line {
height: 30.9cqw !important;
}
.flower--2 .flower__head-img--rose {
width: 18.8cqw !important;
}
.flower--3 .flower__head-img--rose {
width: 19.4cqw !important;
}
.flower--4 {
z-index: 18 !important;
margin-left: -8.4cqw !important;
}
.flower--5 {
z-index: 19 !important;
margin-left: 7.1cqw !important;
}
.flower--4 .flower__line {
height: 18.0cqw !important;
}
.flower--5 .flower__line {
height: 19.7cqw !important;
}
.flower--4 .flower__head-img--sunflower {
width: 18.4cqw !important;
}
.flower--5 .flower__head-img--sunflower {
width: 19.0cqw !important;
}
.flower--2 .flower__line__leaf--1 { top: 35% !important; }
.flower--2 .flower__line__leaf--2 { top: 57% !important; display: block !important; opacity: .74 !important; }
.flower--2 .flower__line__leaf--3 { top: 47% !important; }
.flower--2 .flower__line__leaf--4 { top: 69% !important; display: block !important; opacity: .72 !important; }
.flower--3 .flower__line__leaf--1 { top: 31% !important; }
.flower--3 .flower__line__leaf--2 { top: 54% !important; display: block !important; opacity: .76 !important; }
.flower--3 .flower__line__leaf--3 { top: 43% !important; }
.flower--3 .flower__line__leaf--4 { top: 66% !important; display: block !important; opacity: .73 !important; }
.flower--4 .flower__line__leaf--1 { top: 30% !important; }
.flower--4 .flower__line__leaf--2 { top: 50% !important; display: block !important; opacity: .74 !important; }
.flower--4 .flower__line__leaf--3 { top: 40% !important; }
.flower--4 .flower__line__leaf--4 { top: 61% !important; display: block !important; opacity: .72 !important; }
.flower--5 .flower__line__leaf--1 { top: 27% !important; }
.flower--5 .flower__line__leaf--2 { top: 48% !important; display: block !important; opacity: .74 !important; }
.flower--5 .flower__line__leaf--3 { top: 38% !important; }
.flower--5 .flower__line__leaf--4 { top: 59% !important; display: block !important; opacity: .72 !important; }
@media (max-width: 430px) {
.flower--1 { margin-left: 1.0cqw !important; }
.flower--2 { margin-left: -5.2cqw !important; }
.flower--3 { margin-left: 3.1cqw !important; }
.flower--4 { margin-left: -8.0cqw !important; }
.flower--5 { margin-left: 6.8cqw !important; }
.flower--1 .flower__line { height: 39.2cqw !important; }
.flower--2 .flower__line { height: 29.8cqw !important; }
.flower--3 .flower__line { height: 31.2cqw !important; }
.flower--4 .flower__line { height: 18.2cqw !important; }
.flower--5 .flower__line { height: 19.9cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 { margin-left: 1.3cqw !important; }
.flower--2 { margin-left: -5.9cqw !important; }
.flower--3 { margin-left: 3.6cqw !important; }
.flower--4 { margin-left: -8.7cqw !important; }
.flower--5 { margin-left: 7.3cqw !important; }
.flower--1 .flower__line { height: 38.4cqw !important; }
.flower--2 .flower__line { height: 29.1cqw !important; }
.flower--3 .flower__line { height: 30.5cqw !important; }
.flower--4 .flower__line { height: 17.8cqw !important; }
.flower--5 .flower__line { height: 19.3cqw !important; }
}
:root {
--rose-angle: 12.5deg !important;
--side-angle: 20deg !important;
}
.flower--1 {
z-index: 8 !important;
margin-left: 1.8cqw !important;
}
.flower--1 .flower__line {
height: 38.2cqw !important;
}
.flower--1 .flower__head-img--sunflower {
width: 21.4cqw !important;
}
.flower--2 {
z-index: 17 !important;
margin-left: -7.2cqw !important;
}
.flower--2 .flower__line {
height: 28.8cqw !important;
}
.flower--2 .flower__head-img--rose {
width: 19.2cqw !important;
}
.flower--3 {
z-index: 15 !important;
margin-left: 2.6cqw !important;
}
.flower--3 .flower__line {
height: 31.6cqw !important;
}
.flower--3 .flower__head-img--rose {
width: 18.8cqw !important;
}
.flower--4 {
z-index: 18 !important;
margin-left: -9.3cqw !important;
}
.flower--4 .flower__line {
height: 17.6cqw !important;
}
.flower--4 .flower__head-img--sunflower {
width: 18.1cqw !important;
}
.flower--5 {
z-index: 19 !important;
margin-left: 8.0cqw !important;
}
.flower--5 .flower__line {
height: 20.8cqw !important;
}
.flower--5 .flower__head-img--sunflower {
width: 19.4cqw !important;
}
.flower--2 .flower__line__leaf--1,
.flower--2 .flower__line__leaf--2,
.flower--2 .flower__line__leaf--3,
.flower--2 .flower__line__leaf--4,
.flower--3 .flower__line__leaf--1,
.flower--3 .flower__line__leaf--2,
.flower--3 .flower__line__leaf--3,
.flower--3 .flower__line__leaf--4,
.flower--4 .flower__line__leaf--1,
.flower--4 .flower__line__leaf--2,
.flower--4 .flower__line__leaf--3,
.flower--4 .flower__line__leaf--4,
.flower--5 .flower__line__leaf--1,
.flower--5 .flower__line__leaf--2,
.flower--5 .flower__line__leaf--3,
.flower--5 .flower__line__leaf--4 {
display: block !important;
opacity: .74 !important;
}
.flower--2 .flower__line__leaf--1 { top: 31% !important; left: 94% !important; }
.flower--2 .flower__line__leaf--2 { top: 53% !important; left: 88% !important; }
.flower--2 .flower__line__leaf--3 { top: 41% !important; left: -382% !important; }
.flower--2 .flower__line__leaf--4 { top: 65% !important; left: -350% !important; }
.flower--3 .flower__line__leaf--1 { top: 34% !important; left: 88% !important; }
.flower--3 .flower__line__leaf--2 { top: 56% !important; left: 84% !important; }
.flower--3 .flower__line__leaf--3 { top: 45% !important; left: -378% !important; }
.flower--3 .flower__line__leaf--4 { top: 67% !important; left: -360% !important; }
.flower--4 .flower__line__leaf--1 { top: 28% !important; left: 90% !important; }
.flower--4 .flower__line__leaf--2 { top: 48% !important; left: 86% !important; }
.flower--4 .flower__line__leaf--3 { top: 38% !important; left: -376% !important; }
.flower--4 .flower__line__leaf--4 { top: 59% !important; left: -354% !important; }
.flower--5 .flower__line__leaf--1 { top: 29% !important; left: 86% !important; }
.flower--5 .flower__line__leaf--2 { top: 51% !important; left: 82% !important; }
.flower--5 .flower__line__leaf--3 { top: 39% !important; left: -370% !important; }
.flower--5 .flower__line__leaf--4 { top: 61% !important; left: -350% !important; }
.bouquet-img--front {
z-index: 15 !important;
}
@media (max-width: 430px) {
.flower--1 { margin-left: 1.6cqw !important; }
.flower--2 { margin-left: -6.8cqw !important; }
.flower--3 { margin-left: 2.4cqw !important; }
.flower--4 { margin-left: -8.8cqw !important; }
.flower--5 { margin-left: 7.5cqw !important; }
.flower--1 .flower__line { height: 38.5cqw !important; }
.flower--2 .flower__line { height: 29.1cqw !important; }
.flower--3 .flower__line { height: 31.9cqw !important; }
.flower--4 .flower__line { height: 17.9cqw !important; }
.flower--5 .flower__line { height: 21.1cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 { margin-left: 2.0cqw !important; }
.flower--2 { margin-left: -7.5cqw !important; }
.flower--3 { margin-left: 2.8cqw !important; }
.flower--4 { margin-left: -9.6cqw !important; }
.flower--5 { margin-left: 8.3cqw !important; }
.flower--1 .flower__line { height: 37.8cqw !important; }
.flower--2 .flower__line { height: 28.5cqw !important; }
.flower--3 .flower__line { height: 31.2cqw !important; }
.flower--4 .flower__line { height: 17.4cqw !important; }
.flower--5 .flower__line { height: 20.4cqw !important; }
}
:root {
--rose-angle: 12deg !important;
--side-angle: 19deg !important;
}
.flower--1 { z-index: 8 !important; margin-left: 1.3cqw !important; }
.flower--1 .flower__line { height: 38.4cqw !important; }
.flower--1 .flower__head-img--sunflower { width: 20.8cqw !important; }
.flower--2 { z-index: 17 !important; margin-left: -6.6cqw !important; }
.flower--2 .flower__line { height: 29.0cqw !important; }
.flower--2 .flower__head-img--rose { width: 18.8cqw !important; }
.flower--3 { z-index: 16 !important; margin-left: 3.7cqw !important; }
.flower--3 .flower__line { height: 30.8cqw !important; }
.flower--3 .flower__head-img--rose { width: 18.9cqw !important; }
.flower--4 { z-index: 19 !important; margin-left: -9.1cqw !important; }
.flower--4 .flower__line { height: 17.8cqw !important; }
.flower--4 .flower__head-img--sunflower { width: 17.9cqw !important; }
.flower--5 { z-index: 20 !important; margin-left: 8.4cqw !important; }
.flower--5 .flower__line { height: 19.8cqw !important; }
.flower--5 .flower__head-img--sunflower { width: 18.9cqw !important; }
.flower--6 { z-index: 13 !important; margin-left: -1.8cqw !important; }
.flower--6 .flower__line { height: 32.1cqw !important; }
.flower--6 .flower__head-img--rose { width: 17.2cqw !important; }
.flower--7 { z-index: 14 !important; margin-left: -0.2cqw !important; }
.flower--7 .flower__line { height: 22.6cqw !important; }
.flower--7 .flower__head-img--sunflower { width: 16.8cqw !important; }
.flower--6 .flower__line__leaf,
.flower--7 .flower__line__leaf {
display: block !important;
opacity: .74 !important;
}
.flower--6 .flower__line__leaf--1 { top: 30% !important; left: 92% !important; }
.flower--6 .flower__line__leaf--2 { top: 53% !important; left: 86% !important; }
.flower--6 .flower__line__leaf--3 { top: 42% !important; left: -376% !important; }
.flower--6 .flower__line__leaf--4 { top: 66% !important; left: -352% !important; }
.flower--7 .flower__line__leaf--1 { top: 26% !important; left: 90% !important; }
.flower--7 .flower__line__leaf--2 { top: 47% !important; left: 86% !important; }
.flower--7 .flower__line__leaf--3 { top: 37% !important; left: -370% !important; }
.flower--7 .flower__line__leaf--4 { top: 58% !important; left: -348% !important; }
.flower__leafs--6 { animation: blooming-flower 2s backwards !important; animation-delay: 1.55s !important; }
.flower__leafs--7 { animation: blooming-flower 2s backwards !important; animation-delay: 2.15s !important; }
.flower--6 .flower__line { animation: grow-flower-tree 4s backwards !important; animation-delay: 1.05s !important; }
.flower--7 .flower__line { animation: grow-flower-tree 4s backwards !important; animation-delay: 1.45s !important; }
.flower--6 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 2.15s backwards !important; }
.flower--6 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 1.95s backwards !important; }
.flower--6 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 1.75s backwards !important; }
.flower--6 .flower__line__leaf--4 { animation: blooming-leaf-left var(--fl-speed) 1.55s backwards !important; }
.flower--7 .flower__line__leaf--1 { animation: blooming-leaf-right var(--fl-speed) 2.55s backwards !important; }
.flower--7 .flower__line__leaf--2 { animation: blooming-leaf-right var(--fl-speed) 2.35s backwards !important; }
.flower--7 .flower__line__leaf--3 { animation: blooming-leaf-left var(--fl-speed) 2.15s backwards !important; }
.flower--7 .flower__line__leaf--4 { animation: blooming-leaf-left var(--fl-speed) 1.95s backwards !important; }
.flower--6 {
animation:
sprout-flower-6 1.32s cubic-bezier(.22,.61,.36,1) 1.05s backwards,
moving-flower-6 4.2s linear 2.37s infinite !important;
}
.flower--7 {
animation:
sprout-flower-7 1.36s cubic-bezier(.22,.61,.36,1) 1.45s backwards,
moving-flower-7 4s linear 2.81s infinite !important;
}
@keyframes sprout-flower-6 {
0% { transform: translateY(20px) translateX(0) rotate(0deg); opacity: 0; }
32% { transform: translateY(11px) translateX(-4px) rotate(-3deg); opacity: 1; }
62% { transform: translateY(6px) translateX(-8px) rotate(-10deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(-8.5deg); opacity: 1; }
}
@keyframes sprout-flower-7 {
0% { transform: translateY(18px) translateX(0) rotate(0deg); opacity: 0; }
45% { transform: translateY(9px) translateX(-1px) rotate(-4deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(-2deg); opacity: 1; }
}
@keyframes moving-flower-6 {
0%, 100% { transform: rotate(-8.5deg); }
50% { transform: rotate(-7.6deg); }
}
@keyframes moving-flower-7 {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(-1.2deg); }
}
@media (max-width: 430px) {
.flower--1 { margin-left: 1.1cqw !important; }
.flower--2 { margin-left: -6.2cqw !important; }
.flower--3 { margin-left: 3.4cqw !important; }
.flower--4 { margin-left: -8.7cqw !important; }
.flower--5 { margin-left: 8.0cqw !important; }
.flower--6 { margin-left: -1.6cqw !important; }
.flower--7 { margin-left: -0.1cqw !important; }
.flower--1 .flower__line { height: 38.8cqw !important; }
.flower--2 .flower__line { height: 29.4cqw !important; }
.flower--3 .flower__line { height: 31.1cqw !important; }
.flower--4 .flower__line { height: 18.1cqw !important; }
.flower--5 .flower__line { height: 20.1cqw !important; }
.flower--6 .flower__line { height: 32.4cqw !important; }
.flower--7 .flower__line { height: 22.9cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 { margin-left: 1.5cqw !important; }
.flower--2 { margin-left: -6.9cqw !important; }
.flower--3 { margin-left: 4.0cqw !important; }
.flower--4 { margin-left: -9.5cqw !important; }
.flower--5 { margin-left: 8.8cqw !important; }
.flower--6 { margin-left: -2.0cqw !important; }
.flower--7 { margin-left: -0.3cqw !important; }
.flower--1 .flower__line { height: 37.9cqw !important; }
.flower--2 .flower__line { height: 28.6cqw !important; }
.flower--3 .flower__line { height: 30.5cqw !important; }
.flower--4 .flower__line { height: 17.5cqw !important; }
.flower--5 .flower__line { height: 19.4cqw !important; }
.flower--6 .flower__line { height: 31.6cqw !important; }
.flower--7 .flower__line { height: 22.2cqw !important; }
}
:root {
--rose-angle: 10.5deg !important;
--side-angle: 17deg !important;
}
.flower--1 {
z-index: 8 !important;
margin-left: -0.9cqw !important;
}
.flower--1 .flower__line {
height: 37.8cqw !important;
}
.flower--1 .flower__head-img--sunflower {
width: 19.8cqw !important;
}
.flower--2 {
z-index: 17 !important;
margin-left: -8.0cqw !important;
}
.flower--2 .flower__line {
height: 28.7cqw !important;
}
.flower--2 .flower__head-img--rose {
width: 18.3cqw !important;
}
.flower--3 {
z-index: 18 !important;
margin-left: 2.6cqw !important;
}
.flower--3 .flower__line {
height: 29.9cqw !important;
}
.flower--3 .flower__head-img--rose {
width: 18.6cqw !important;
}
.flower--4 {
z-index: 20 !important;
margin-left: -10.2cqw !important;
}
.flower--4 .flower__line {
height: 18.6cqw !important;
}
.flower--4 .flower__head-img--sunflower {
width: 17.3cqw !important;
}
.flower--5 {
z-index: 21 !important;
margin-left: 9.5cqw !important;
}
.flower--5 .flower__line {
height: 18.9cqw !important;
}
.flower--5 .flower__head-img--sunflower {
width: 17.8cqw !important;
}
.flower--6 {
z-index: 16 !important;
margin-left: -2.6cqw !important;
}
.flower--6 .flower__line {
height: 31.5cqw !important;
}
.flower--6 .flower__head-img--rose {
width: 17.4cqw !important;
}
.flower--7 {
z-index: 19 !important;
margin-left: -0.2cqw !important;
}
.flower--7 .flower__line {
height: 20.7cqw !important;
}
.flower--7 .flower__head-img--sunflower {
width: 16.7cqw !important;
}
.flower--2 .flower__line__leaf,
.flower--3 .flower__line__leaf,
.flower--4 .flower__line__leaf,
.flower--5 .flower__line__leaf,
.flower--6 .flower__line__leaf,
.flower--7 .flower__line__leaf {
display: block !important;
opacity: .76 !important;
}
.flower--2 .flower__line__leaf--1 { top: 31% !important; left: 92% !important; }
.flower--2 .flower__line__leaf--2 { top: 53% !important; left: 86% !important; }
.flower--2 .flower__line__leaf--3 { top: 42% !important; left: -372% !important; }
.flower--2 .flower__line__leaf--4 { top: 64% !important; left: -348% !important; }
.flower--3 .flower__line__leaf--1 { top: 30% !important; left: 88% !important; }
.flower--3 .flower__line__leaf--2 { top: 52% !important; left: 84% !important; }
.flower--3 .flower__line__leaf--3 { top: 41% !important; left: -370% !important; }
.flower--3 .flower__line__leaf--4 { top: 63% !important; left: -346% !important; }
.flower--4 .flower__line__leaf--1 { top: 27% !important; left: 90% !important; }
.flower--4 .flower__line__leaf--2 { top: 47% !important; left: 85% !important; }
.flower--4 .flower__line__leaf--3 { top: 38% !important; left: -368% !important; }
.flower--4 .flower__line__leaf--4 { top: 58% !important; left: -344% !important; }
.flower--5 .flower__line__leaf--1 { top: 28% !important; left: 86% !important; }
.flower--5 .flower__line__leaf--2 { top: 49% !important; left: 82% !important; }
.flower--5 .flower__line__leaf--3 { top: 39% !important; left: -364% !important; }
.flower--5 .flower__line__leaf--4 { top: 59% !important; left: -340% !important; }
.flower--6 .flower__line__leaf--1 { top: 30% !important; left: 90% !important; }
.flower--6 .flower__line__leaf--2 { top: 51% !important; left: 85% !important; }
.flower--6 .flower__line__leaf--3 { top: 40% !important; left: -372% !important; }
.flower--6 .flower__line__leaf--4 { top: 61% !important; left: -348% !important; }
.flower--7 .flower__line__leaf--1 { top: 26% !important; left: 89% !important; }
.flower--7 .flower__line__leaf--2 { top: 46% !important; left: 84% !important; }
.flower--7 .flower__line__leaf--3 { top: 37% !important; left: -366% !important; }
.flower--7 .flower__line__leaf--4 { top: 57% !important; left: -342% !important; }
.flower--6 {
animation:
sprout-flower-6-v5 1.28s cubic-bezier(.22,.61,.36,1) 1.0s backwards,
moving-flower-6-v5 4.2s linear 2.28s infinite !important;
}
.flower--7 {
animation:
sprout-flower-7-v5 1.3s cubic-bezier(.22,.61,.36,1) 1.35s backwards,
moving-flower-7-v5 4s linear 2.65s infinite !important;
}
@keyframes sprout-flower-6-v5 {
0% { transform: translateY(18px) translateX(0) rotate(0deg); opacity: 0; }
35% { transform: translateY(10px) translateX(-2px) rotate(-4deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(-5deg); opacity: 1; }
}
@keyframes moving-flower-6-v5 {
0%,100% { transform: rotate(-5deg); }
50% { transform: rotate(-4.2deg); }
}
@keyframes sprout-flower-7-v5 {
0% { transform: translateY(16px) translateX(0) rotate(0deg); opacity: 0; }
45% { transform: translateY(8px) translateX(1px) rotate(2deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(1deg); opacity: 1; }
}
@keyframes moving-flower-7-v5 {
0%,100% { transform: rotate(1deg); }
50% { transform: rotate(1.7deg); }
}
@media (max-width: 430px) {
.flower--1 { margin-left: -0.8cqw !important; }
.flower--2 { margin-left: -7.6cqw !important; }
.flower--3 { margin-left: 2.4cqw !important; }
.flower--4 { margin-left: -9.8cqw !important; }
.flower--5 { margin-left: 9.1cqw !important; }
.flower--6 { margin-left: -2.4cqw !important; }
.flower--7 { margin-left: -0.1cqw !important; }
.flower--1 .flower__line { height: 38.1cqw !important; }
.flower--2 .flower__line { height: 29.0cqw !important; }
.flower--3 .flower__line { height: 30.2cqw !important; }
.flower--4 .flower__line { height: 18.9cqw !important; }
.flower--5 .flower__line { height: 19.2cqw !important; }
.flower--6 .flower__line { height: 31.9cqw !important; }
.flower--7 .flower__line { height: 21.0cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 { margin-left: -1.1cqw !important; }
.flower--2 { margin-left: -8.3cqw !important; }
.flower--3 { margin-left: 2.8cqw !important; }
.flower--4 { margin-left: -10.6cqw !important; }
.flower--5 { margin-left: 9.8cqw !important; }
.flower--6 { margin-left: -2.8cqw !important; }
.flower--7 { margin-left: -0.3cqw !important; }
.flower--1 .flower__line { height: 37.3cqw !important; }
.flower--2 .flower__line { height: 28.3cqw !important; }
.flower--3 .flower__line { height: 29.5cqw !important; }
.flower--4 .flower__line { height: 18.3cqw !important; }
.flower--5 .flower__line { height: 18.6cqw !important; }
.flower--6 .flower__line { height: 31.1cqw !important; }
.flower--7 .flower__line { height: 20.3cqw !important; }
}
:root {
--rose-angle: 9.5deg !important;
--side-angle: 15deg !important;
}
.flower--1 {
z-index: 8 !important;
margin-left: 0cqw !important;
}
.flower--1 .flower__line {
height: 38.8cqw !important;
}
.flower--1 .flower__head-img--sunflower {
width: 19.2cqw !important;
}
.flower--2 {
z-index: 16 !important;
margin-left: -8.3cqw !important;
}
.flower--2 .flower__line {
height: 28.7cqw !important;
}
.flower--2 .flower__head-img--rose {
width: 17.8cqw !important;
}
.flower--3 {
z-index: 16 !important;
margin-left: 8.3cqw !important;
}
.flower--3 .flower__line {
height: 28.7cqw !important;
}
.flower--3 .flower__head-img--rose {
width: 17.8cqw !important;
}
.flower--4 {
z-index: 20 !important;
margin-left: -10.7cqw !important;
}
.flower--4 .flower__line {
height: 18.9cqw !important;
}
.flower--4 .flower__head-img--sunflower {
width: 17.1cqw !important;
}
.flower--5 {
z-index: 20 !important;
margin-left: 10.7cqw !important;
}
.flower--5 .flower__line {
height: 18.9cqw !important;
}
.flower--5 .flower__head-img--sunflower {
width: 17.1cqw !important;
}
.flower--6 {
z-index: 18 !important;
margin-left: 0cqw !important;
}
.flower--6 .flower__line {
height: 31.2cqw !important;
}
.flower--6 .flower__head-img--rose {
width: 18.6cqw !important;
}
.flower--7 {
z-index: 19 !important;
margin-left: 0cqw !important;
}
.flower--7 .flower__line {
height: 21.5cqw !important;
}
.flower--7 .flower__head-img--sunflower {
width: 16.6cqw !important;
}
.flower--2 .flower__line__leaf,
.flower--3 .flower__line__leaf,
.flower--4 .flower__line__leaf,
.flower--5 .flower__line__leaf,
.flower--6 .flower__line__leaf,
.flower--7 .flower__line__leaf {
display: block !important;
opacity: .76 !important;
}
.flower--2 .flower__line__leaf--1 { top: 31% !important; left: 92% !important; }
.flower--2 .flower__line__leaf--2 { top: 52% !important; left: 86% !important; }
.flower--2 .flower__line__leaf--3 { top: 42% !important; left: -370% !important; }
.flower--2 .flower__line__leaf--4 { top: 64% !important; left: -346% !important; }
.flower--3 .flower__line__leaf--1 { top: 31% !important; left: 88% !important; }
.flower--3 .flower__line__leaf--2 { top: 52% !important; left: 84% !important; }
.flower--3 .flower__line__leaf--3 { top: 42% !important; left: -370% !important; }
.flower--3 .flower__line__leaf--4 { top: 64% !important; left: -346% !important; }
.flower--4 .flower__line__leaf--1 { top: 27% !important; left: 90% !important; }
.flower--4 .flower__line__leaf--2 { top: 48% !important; left: 85% !important; }
.flower--4 .flower__line__leaf--3 { top: 38% !important; left: -366% !important; }
.flower--4 .flower__line__leaf--4 { top: 58% !important; left: -342% !important; }
.flower--5 .flower__line__leaf--1 { top: 27% !important; left: 86% !important; }
.flower--5 .flower__line__leaf--2 { top: 48% !important; left: 82% !important; }
.flower--5 .flower__line__leaf--3 { top: 38% !important; left: -366% !important; }
.flower--5 .flower__line__leaf--4 { top: 58% !important; left: -342% !important; }
.flower--6 .flower__line__leaf--1 { top: 30% !important; left: 90% !important; }
.flower--6 .flower__line__leaf--2 { top: 51% !important; left: 85% !important; }
.flower--6 .flower__line__leaf--3 { top: 40% !important; left: -370% !important; }
.flower--6 .flower__line__leaf--4 { top: 61% !important; left: -346% !important; }
.flower--7 .flower__line__leaf--1 { top: 26% !important; left: 89% !important; }
.flower--7 .flower__line__leaf--2 { top: 46% !important; left: 84% !important; }
.flower--7 .flower__line__leaf--3 { top: 37% !important; left: -364% !important; }
.flower--7 .flower__line__leaf--4 { top: 57% !important; left: -340% !important; }
.flower--6 {
animation:
sprout-flower-6-v6 1.28s cubic-bezier(.22,.61,.36,1) 1.0s backwards,
moving-flower-6-v6 4.2s linear 2.28s infinite !important;
}
.flower--7 {
animation:
sprout-flower-7-v6 1.3s cubic-bezier(.22,.61,.36,1) 1.35s backwards,
moving-flower-7-v6 4s linear 2.65s infinite !important;
}
@keyframes sprout-flower-6-v6 {
0% { transform: translateY(18px) translateX(0) rotate(0deg); opacity: 0; }
35% { transform: translateY(10px) translateX(0) rotate(1deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes moving-flower-6-v6 {
0%,100% { transform: rotate(0deg); }
50% { transform: rotate(.8deg); }
}
@keyframes sprout-flower-7-v6 {
0% { transform: translateY(16px) translateX(0) rotate(0deg); opacity: 0; }
45% { transform: translateY(8px) translateX(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes moving-flower-7-v6 {
0%,100% { transform: rotate(0deg); }
50% { transform: rotate(.7deg); }
}
@media (max-width: 430px) {
.flower--2 { margin-left: -7.9cqw !important; }
.flower--3 { margin-left: 7.9cqw !important; }
.flower--4 { margin-left: -10.1cqw !important; }
.flower--5 { margin-left: 10.1cqw !important; }
.flower--1 .flower__line { height: 39.1cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 29.0cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 19.1cqw !important; }
.flower--6 .flower__line { height: 31.5cqw !important; }
.flower--7 .flower__line { height: 21.8cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--2 { margin-left: -8.7cqw !important; }
.flower--3 { margin-left: 8.7cqw !important; }
.flower--4 { margin-left: -11.0cqw !important; }
.flower--5 { margin-left: 11.0cqw !important; }
.flower--1 .flower__line { height: 38.2cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 28.4cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 18.5cqw !important; }
.flower--6 .flower__line { height: 30.8cqw !important; }
.flower--7 .flower__line { height: 21.0cqw !important; }
}
:root {
--rose-angle: 13.5deg !important;
--side-angle: 21deg !important;
}
.flower--1 {
z-index: 8 !important;
margin-left: 5.8cqw !important;
}
.flower--1 .flower__line {
height: 39.8cqw !important;
}
.flower--1 .flower__head-img--sunflower {
width: 18.9cqw !important;
}
.flower--2 {
z-index: 18 !important;
margin-left: -11.3cqw !important;
}
.flower--2 .flower__line {
height: 27.6cqw !important;
}
.flower--2 .flower__head-img--rose {
width: 18.1cqw !important;
}
.flower--3 {
z-index: 16 !important;
margin-left: 6.6cqw !important;
}
.flower--3 .flower__line {
height: 30.9cqw !important;
}
.flower--3 .flower__head-img--rose {
width: 17.8cqw !important;
}
.flower--4 {
z-index: 22 !important;
margin-left: -12.8cqw !important;
}
.flower--4 .flower__line {
height: 18.1cqw !important;
}
.flower--4 .flower__head-img--sunflower {
width: 17.4cqw !important;
}
.flower--5 {
z-index: 20 !important;
margin-left: 10.8cqw !important;
}
.flower--5 .flower__line {
height: 20.6cqw !important;
}
.flower--5 .flower__head-img--sunflower {
width: 17.2cqw !important;
}
.flower--6 {
z-index: 19 !important;
margin-left: -1.2cqw !important;
}
.flower--6 .flower__line {
height: 31.8cqw !important;
}
.flower--6 .flower__head-img--rose {
width: 18.9cqw !important;
}
.flower--7 {
z-index: 21 !important;
margin-left: 2.2cqw !important;
}
.flower--7 .flower__line {
height: 21.4cqw !important;
}
.flower--7 .flower__head-img--sunflower {
width: 16.4cqw !important;
}
.flower--2 .flower__line__leaf,
.flower--3 .flower__line__leaf,
.flower--4 .flower__line__leaf,
.flower--5 .flower__line__leaf,
.flower--6 .flower__line__leaf,
.flower--7 .flower__line__leaf {
display: block !important;
opacity: .77 !important;
}
.flower--2 .flower__line__leaf--1 { top: 33% !important; left: 94% !important; }
.flower--2 .flower__line__leaf--2 { top: 56% !important; left: 88% !important; }
.flower--2 .flower__line__leaf--3 { top: 45% !important; left: -376% !important; }
.flower--2 .flower__line__leaf--4 { top: 67% !important; left: -352% !important; }
.flower--3 .flower__line__leaf--1 { top: 29% !important; left: 86% !important; }
.flower--3 .flower__line__leaf--2 { top: 50% !important; left: 82% !important; }
.flower--3 .flower__line__leaf--3 { top: 39% !important; left: -368% !important; }
.flower--3 .flower__line__leaf--4 { top: 61% !important; left: -344% !important; }
.flower--4 .flower__line__leaf--1 { top: 28% !important; left: 92% !important; }
.flower--4 .flower__line__leaf--2 { top: 49% !important; left: 86% !important; }
.flower--4 .flower__line__leaf--3 { top: 40% !important; left: -370% !important; }
.flower--4 .flower__line__leaf--4 { top: 60% !important; left: -346% !important; }
.flower--5 .flower__line__leaf--1 { top: 26% !important; left: 86% !important; }
.flower--5 .flower__line__leaf--2 { top: 47% !important; left: 81% !important; }
.flower--5 .flower__line__leaf--3 { top: 37% !important; left: -362% !important; }
.flower--5 .flower__line__leaf--4 { top: 58% !important; left: -338% !important; }
.flower--6 .flower__line__leaf--1 { top: 31% !important; left: 89% !important; }
.flower--6 .flower__line__leaf--2 { top: 53% !important; left: 84% !important; }
.flower--6 .flower__line__leaf--3 { top: 42% !important; left: -370% !important; }
.flower--6 .flower__line__leaf--4 { top: 63% !important; left: -346% !important; }
.flower--7 .flower__line__leaf--1 { top: 27% !important; left: 88% !important; }
.flower--7 .flower__line__leaf--2 { top: 48% !important; left: 84% !important; }
.flower--7 .flower__line__leaf--3 { top: 38% !important; left: -364% !important; }
.flower--7 .flower__line__leaf--4 { top: 58% !important; left: -340% !important; }
.flower--2 {
animation:
sprout-flower-2-v7 1.34s cubic-bezier(.22,.61,.36,1) .62s backwards,
moving-flower-2-v7 4.2s linear 1.96s infinite !important;
}
.flower--3 {
animation:
sprout-flower-3-v7 1.34s cubic-bezier(.22,.61,.36,1) .92s backwards,
moving-flower-3-v7 4.2s linear 2.26s infinite !important;
}
.flower--6 {
animation:
sprout-flower-6-v7 1.30s cubic-bezier(.22,.61,.36,1) 1.04s backwards,
moving-flower-6-v7 4s linear 2.34s infinite !important;
}
.flower--7 {
animation:
sprout-flower-7-v7 1.28s cubic-bezier(.22,.61,.36,1) 1.36s backwards,
moving-flower-7-v7 4s linear 2.64s infinite !important;
}
@keyframes sprout-flower-2-v7 {
0% { transform: translateY(19px) translateX(0) rotate(0deg); opacity: 0; }
35% { transform: translateY(10px) translateX(-5px) rotate(-5deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(-13.5deg); opacity: 1; }
}
@keyframes moving-flower-2-v7 {
0%,100% { transform: rotate(-13.5deg); }
50% { transform: rotate(-12.3deg); }
}
@keyframes sprout-flower-3-v7 {
0% { transform: translateY(19px) translateX(0) rotate(0deg); opacity: 0; }
35% { transform: translateY(10px) translateX(5px) rotate(4deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(12deg); opacity: 1; }
}
@keyframes moving-flower-3-v7 {
0%,100% { transform: rotate(12deg); }
50% { transform: rotate(10.9deg); }
}
@keyframes sprout-flower-6-v7 {
0% { transform: translateY(18px) translateX(0) rotate(0deg); opacity: 0; }
38% { transform: translateY(9px) translateX(-1px) rotate(-1deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(-2deg); opacity: 1; }
}
@keyframes moving-flower-6-v7 {
0%,100% { transform: rotate(-2deg); }
50% { transform: rotate(-1deg); }
}
@keyframes sprout-flower-7-v7 {
0% { transform: translateY(16px) translateX(0) rotate(0deg); opacity: 0; }
45% { transform: translateY(8px) translateX(2px) rotate(2deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(3deg); opacity: 1; }
}
@keyframes moving-flower-7-v7 {
0%,100% { transform: rotate(3deg); }
50% { transform: rotate(4deg); }
}
@media (max-width: 430px) {
.flower--1 { margin-left: 5.2cqw !important; }
.flower--2 { margin-left: -10.7cqw !important; }
.flower--3 { margin-left: 6.1cqw !important; }
.flower--4 { margin-left: -12.2cqw !important; }
.flower--5 { margin-left: 10.2cqw !important; }
.flower--6 { margin-left: -1.0cqw !important; }
.flower--7 { margin-left: 2.0cqw !important; }
.flower--1 .flower__line { height: 40.1cqw !important; }
.flower--2 .flower__line { height: 27.9cqw !important; }
.flower--3 .flower__line { height: 31.2cqw !important; }
.flower--4 .flower__line { height: 18.4cqw !important; }
.flower--5 .flower__line { height: 20.9cqw !important; }
.flower--6 .flower__line { height: 32.1cqw !important; }
.flower--7 .flower__line { height: 21.7cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 { margin-left: 6.2cqw !important; }
.flower--2 { margin-left: -11.9cqw !important; }
.flower--3 { margin-left: 7.0cqw !important; }
.flower--4 { margin-left: -13.4cqw !important; }
.flower--5 { margin-left: 11.5cqw !important; }
.flower--6 { margin-left: -1.4cqw !important; }
.flower--7 { margin-left: 2.4cqw !important; }
.flower--1 .flower__line { height: 39.2cqw !important; }
.flower--2 .flower__line { height: 27.2cqw !important; }
.flower--3 .flower__line { height: 30.5cqw !important; }
.flower--4 .flower__line { height: 17.7cqw !important; }
.flower--5 .flower__line { height: 20.1cqw !important; }
.flower--6 .flower__line { height: 31.4cqw !important; }
.flower--7 .flower__line { height: 21.0cqw !important; }
}
:root {
--rose-angle: 10deg !important;
--side-angle: 16deg !important;
}
.flower--1 {
z-index: 20 !important;
margin-left: 0cqw !important;
}
.flower--1 .flower__line {
height: 25.8cqw !important;
}
.flower--1 .flower__head-img--sunflower {
width: 20.6cqw !important;
}
.flower--2 {
z-index: 13 !important;
margin-left: -7.2cqw !important;
}
.flower--2 .flower__line {
height: 34.5cqw !important;
}
.flower--2 .flower__head-img--rose {
width: 17.2cqw !important;
}
.flower--3 {
z-index: 13 !important;
margin-left: 7.2cqw !important;
}
.flower--3 .flower__line {
height: 34.5cqw !important;
}
.flower--3 .flower__head-img--rose {
width: 17.2cqw !important;
}
.flower--6 {
z-index: 12 !important;
margin-left: 0cqw !important;
}
.flower--6 .flower__line {
height: 37.6cqw !important;
}
.flower--6 .flower__head-img--rose {
width: 16.8cqw !important;
}
.flower--4 {
z-index: 16 !important;
margin-left: -12.2cqw !important;
}
.flower--4 .flower__line {
height: 24.7cqw !important;
}
.flower--4 .flower__head-img--rose {
width: 16.9cqw !important;
}
.flower--5 {
z-index: 16 !important;
margin-left: 12.2cqw !important;
}
.flower--5 .flower__line {
height: 24.7cqw !important;
}
.flower--5 .flower__head-img--rose {
width: 16.9cqw !important;
}
.flower--7 {
z-index: 18 !important;
margin-left: 0cqw !important;
}
.flower--7 .flower__line {
height: 17.4cqw !important;
}
.flower--7 .flower__head-img--rose {
width: 16.6cqw !important;
}
.flower--2 .flower__line__leaf,
.flower--3 .flower__line__leaf,
.flower--4 .flower__line__leaf,
.flower--5 .flower__line__leaf,
.flower--6 .flower__line__leaf,
.flower--7 .flower__line__leaf,
.flower--1 .flower__line__leaf {
display: block !important;
opacity: .76 !important;
}
.flower--1 .flower__line__leaf--1 { top: 29% !important; left: 92% !important; }
.flower--1 .flower__line__leaf--2 { top: 49% !important; left: 86% !important; }
.flower--1 .flower__line__leaf--3 { top: 39% !important; left: -372% !important; }
.flower--1 .flower__line__leaf--4 { top: 59% !important; left: -348% !important; }
.flower--2 .flower__line__leaf--1 { top: 30% !important; left: 91% !important; }
.flower--2 .flower__line__leaf--2 { top: 53% !important; left: 86% !important; }
.flower--2 .flower__line__leaf--3 { top: 42% !important; left: -368% !important; }
.flower--2 .flower__line__leaf--4 { top: 64% !important; left: -344% !important; }
.flower--3 .flower__line__leaf--1 { top: 30% !important; left: 87% !important; }
.flower--3 .flower__line__leaf--2 { top: 53% !important; left: 82% !important; }
.flower--3 .flower__line__leaf--3 { top: 42% !important; left: -368% !important; }
.flower--3 .flower__line__leaf--4 { top: 64% !important; left: -344% !important; }
.flower--4 .flower__line__leaf--1 { top: 28% !important; left: 91% !important; }
.flower--4 .flower__line__leaf--2 { top: 49% !important; left: 86% !important; }
.flower--4 .flower__line__leaf--3 { top: 38% !important; left: -366% !important; }
.flower--4 .flower__line__leaf--4 { top: 59% !important; left: -342% !important; }
.flower--5 .flower__line__leaf--1 { top: 28% !important; left: 87% !important; }
.flower--5 .flower__line__leaf--2 { top: 49% !important; left: 82% !important; }
.flower--5 .flower__line__leaf--3 { top: 38% !important; left: -366% !important; }
.flower--5 .flower__line__leaf--4 { top: 59% !important; left: -342% !important; }
.flower--6 .flower__line__leaf--1 { top: 31% !important; left: 90% !important; }
.flower--6 .flower__line__leaf--2 { top: 54% !important; left: 85% !important; }
.flower--6 .flower__line__leaf--3 { top: 43% !important; left: -370% !important; }
.flower--6 .flower__line__leaf--4 { top: 65% !important; left: -346% !important; }
.flower--7 .flower__line__leaf--1 { top: 26% !important; left: 89% !important; }
.flower--7 .flower__line__leaf--2 { top: 46% !important; left: 84% !important; }
.flower--7 .flower__line__leaf--3 { top: 37% !important; left: -364% !important; }
.flower--7 .flower__line__leaf--4 { top: 57% !important; left: -340% !important; }
.flower__leafs--1 { animation-delay: 1.35s !important; }
.flower__leafs--2 { animation-delay: 1.75s !important; }
.flower__leafs--3 { animation-delay: 1.85s !important; }
.flower__leafs--4 { animation-delay: 1.95s !important; }
.flower__leafs--5 { animation-delay: 2.05s !important; }
.flower__leafs--6 { animation-delay: 1.55s !important; }
.flower__leafs--7 { animation-delay: 2.15s !important; }
@media (max-width: 430px) {
.flower--2 { margin-left: -6.8cqw !important; }
.flower--3 { margin-left: 6.8cqw !important; }
.flower--4 { margin-left: -11.6cqw !important; }
.flower--5 { margin-left: 11.6cqw !important; }
.flower--1 .flower__line { height: 26.1cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 34.8cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 24.9cqw !important; }
.flower--6 .flower__line { height: 37.9cqw !important; }
.flower--7 .flower__line { height: 17.7cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--2 { margin-left: -7.6cqw !important; }
.flower--3 { margin-left: 7.6cqw !important; }
.flower--4 { margin-left: -12.8cqw !important; }
.flower--5 { margin-left: 12.8cqw !important; }
.flower--1 .flower__line { height: 25.4cqw !important; }
.flower--2 .flower__line,
.flower--3 .flower__line { height: 34.0cqw !important; }
.flower--4 .flower__line,
.flower--5 .flower__line { height: 24.2cqw !important; }
.flower--6 .flower__line { height: 37.0cqw !important; }
.flower--7 .flower__line { height: 17.0cqw !important; }
}
.flower--7 {
z-index: 22 !important;
margin-left: 0cqw !important;
}
.flower--7 .flower__line {
height: 19.6cqw !important;
}
.flower--7 .flower__head-img--rose {
width: 16.9cqw !important;
}
.flower--8 {
z-index: 17 !important;
margin-left: -5.2cqw !important;
}
.flower--8 .flower__line {
height: 22.5cqw !important;
}
.flower--8 .flower__head-img--rose {
width: 16.7cqw !important;
}
.flower--9 {
z-index: 17 !important;
margin-left: 5.2cqw !important;
}
.flower--9 .flower__line {
height: 22.5cqw !important;
}
.flower--9 .flower__head-img--rose {
width: 16.7cqw !important;
}
.flower--7 .flower__line__leaf,
.flower--8 .flower__line__leaf,
.flower--9 .flower__line__leaf {
display: block !important;
opacity: .77 !important;
}
.flower--7 .flower__line__leaf--1 { top: 25% !important; left: 89% !important; }
.flower--7 .flower__line__leaf--2 { top: 45% !important; left: 84% !important; }
.flower--7 .flower__line__leaf--3 { top: 36% !important; left: -362% !important; }
.flower--7 .flower__line__leaf--4 { top: 56% !important; left: -338% !important; }
.flower--8 .flower__line__leaf--1 { top: 27% !important; left: 90% !important; }
.flower--8 .flower__line__leaf--2 { top: 48% !important; left: 85% !important; }
.flower--8 .flower__line__leaf--3 { top: 38% !important; left: -364% !important; }
.flower--8 .flower__line__leaf--4 { top: 58% !important; left: -340% !important; }
.flower--9 .flower__line__leaf--1 { top: 27% !important; left: 88% !important; }
.flower--9 .flower__line__leaf--2 { top: 48% !important; left: 83% !important; }
.flower--9 .flower__line__leaf--3 { top: 38% !important; left: -364% !important; }
.flower--9 .flower__line__leaf--4 { top: 58% !important; left: -340% !important; }
.flower__leafs--8 { animation: blooming-flower 2s backwards !important; animation-delay: 1.90s !important; }
.flower__leafs--9 { animation: blooming-flower 2s backwards !important; animation-delay: 2.00s !important; }
.flower--8 .flower__line { animation: grow-flower-tree 4s backwards !important; animation-delay: 1.20s !important; }
.flower--9 .flower__line { animation: grow-flower-tree 4s backwards !important; animation-delay: 1.30s !important; }
.flower--8 {
animation:
sprout-flower-8 1.28s cubic-bezier(.22,.61,.36,1) 1.2s backwards,
moving-flower-8 4s linear 2.48s infinite !important;
}
.flower--9 {
animation:
sprout-flower-9 1.28s cubic-bezier(.22,.61,.36,1) 1.3s backwards,
moving-flower-9 4s linear 2.58s infinite !important;
}
@keyframes sprout-flower-8 {
0% { transform: translateY(18px) translateX(0) rotate(0deg); opacity: 0; }
40% { transform: translateY(9px) translateX(-2px) rotate(-3deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(-6deg); opacity: 1; }
}
@keyframes moving-flower-8 {
0%,100% { transform: rotate(-6deg); }
50% { transform: rotate(-5deg); }
}
@keyframes sprout-flower-9 {
0% { transform: translateY(18px) translateX(0) rotate(0deg); opacity: 0; }
40% { transform: translateY(9px) translateX(2px) rotate(3deg); opacity: 1; }
100% { transform: translateY(0) translateX(0) rotate(6deg); opacity: 1; }
}
@keyframes moving-flower-9 {
0%,100% { transform: rotate(6deg); }
50% { transform: rotate(5deg); }
}
@media (max-width: 430px) {
.flower--8 { margin-left: -4.9cqw !important; }
.flower--9 { margin-left: 4.9cqw !important; }
.flower--7 .flower__line { height: 19.8cqw !important; }
.flower--8 .flower__line,
.flower--9 .flower__line { height: 22.7cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--8 { margin-left: -5.5cqw !important; }
.flower--9 { margin-left: 5.5cqw !important; }
.flower--7 .flower__line { height: 19.2cqw !important; }
.flower--8 .flower__line,
.flower--9 .flower__line { height: 22.0cqw !important; }
}
.flower--7 {
display: none !important;
}
.flower--1 {
z-index: 23 !important;
margin-left: 0cqw !important;
animation: moving-sunflower-umbrella 4.6s linear infinite !important;
}
.flower--1 .flower__line {
height: 31.4cqw !important;
animation-delay: 0.95s !important;
}
.flower--1 .flower__head-img--sunflower {
width: 21.2cqw !important;
}
.flower--1 .flower__line__leaf,
.flower--8 .flower__line__leaf,
.flower--9 .flower__line__leaf {
opacity: .78 !important;
}
.flower--1 .flower__line__leaf--1 { top: 28% !important; left: 91% !important; }
.flower--1 .flower__line__leaf--2 { top: 47% !important; left: 86% !important; }
.flower--1 .flower__line__leaf--3 { top: 38% !important; left: -370% !important; }
.flower--1 .flower__line__leaf--4 { top: 57% !important; left: -346% !important; }
@keyframes moving-sunflower-umbrella {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(1.2deg); }
}
@media (max-width: 430px) {
.flower--1 .flower__line { height: 31.8cqw !important; }
.flower--1 .flower__head-img--sunflower { width: 21.5cqw !important; }
}
@media (min-width: 650px) and (max-width: 1050px) and (orientation: portrait) {
.flower--1 .flower__line { height: 30.7cqw !important; }
.flower--1 .flower__head-img--sunflower { width: 20.8cqw !important; }
}
.flower--8,
.flower--9 {
z-index: 24 !important;
}
.flower--8 .flower__line,
.flower--9 .flower__line {
height: 18.5cqw !important;
}
.flower--2 {
margin-left: -5cqw !important;
}
.flower--4 {
margin-left: -9.5cqw !important;
}
.flower--3 {
margin-left: 5cqw !important;
}
.flower--5 {
margin-left: 9.5cqw !important;
}
.flower--6 .flower__line {
height: 42cqw !important;
}
html, body {
background: #c5a0ac !important;
}
body {
isolation: isolate;
background:
radial-gradient(circle at 50% 10%, rgba(255,244,236,.18) 0%, transparent 34%),
linear-gradient(180deg, #9c7886 0%, #b58e9c 26%, #c7a1ae 62%, #cfaab6 100%) !important;
}
.night {
position: fixed !important;
inset: 0 !important;
overflow: hidden !important;
background:
radial-gradient(circle at 50% 32%, rgba(255, 243, 231, .52) 0%, rgba(255, 225, 236, .22) 16%, rgba(255, 225, 236, .08) 29%, transparent 50%),
radial-gradient(circle at 17% 17%, rgba(255,255,255,.30) 0 1.2px, transparent 2.2px),
radial-gradient(circle at 32% 10%, rgba(255,248,252,.24) 0 1px, transparent 1.9px),
radial-gradient(circle at 50% 8%, rgba(255,248,252,.26) 0 1.1px, transparent 2px),
radial-gradient(circle at 74% 14%, rgba(255,248,252,.24) 0 1.1px, transparent 2px),
radial-gradient(circle at 90% 10%, rgba(255,255,255,.28) 0 1.2px, transparent 2.1px),
linear-gradient(180deg, #9b7786 0%, #b68f9d 28%, #c8a2ae 65%, #cfabb6 100%) !important;
background-color: #c5a0ac !important;
filter: none !important;
}
.night::before,
.night::after {
content: "";
position: absolute;
inset: -8%;
pointer-events: none;
}
.night::before {
background:
radial-gradient(circle at 18% 20%, rgba(255, 214, 230, .34) 0%, transparent 28%),
radial-gradient(circle at 82% 18%, rgba(255, 237, 216, .26) 0%, transparent 26%),
radial-gradient(circle at 48% 36%, rgba(255, 244, 232, .18) 0%, transparent 24%),
radial-gradient(circle at 20% 72%, rgba(206, 143, 170, .18) 0%, transparent 30%),
radial-gradient(circle at 79% 72%, rgba(173, 114, 149, .14) 0%, transparent 28%),
radial-gradient(circle at 50% 88%, rgba(120, 65, 95, .16) 0%, transparent 30%);
filter: blur(58px);
opacity: 1;
mix-blend-mode: screen;
animation: premium-bg-float 18s ease-in-out infinite alternate;
}
.night::after {
inset: 0;
background:
radial-gradient(circle at 50% 34%, rgba(255,255,255,.10) 0%, transparent 34%),
linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 24%, rgba(101, 53, 76, .10) 100%),
linear-gradient(125deg, rgba(255,255,255,.06) 0%, transparent 22%, transparent 78%, rgba(255,255,255,.04) 100%);
box-shadow:
inset 0 40px 90px rgba(255,255,255,.06),
inset 0 -120px 140px rgba(83, 44, 64, .18),
inset 0 0 140px rgba(91, 49, 69, .14);
}
@keyframes premium-bg-float {
0% {
transform: translate3d(-1.2%, -0.8%, 0) scale(1);
}
50% {
transform: translate3d(1.1%, 0.9%, 0) scale(1.03);
}
100% {
transform: translate3d(0.2%, -1.1%, 0) scale(1.015);
}
}
.shooting-stars {
opacity: .92 !important;
filter: drop-shadow(0 0 10px rgba(255,255,255,.45));
}
.shooting-star {
width: 3px !important;
height: 3px !important;
background: rgba(255,255,255,.96) !important;
box-shadow: 0 0 10px 2px rgba(255,255,255,.58) !important;
}
.shooting-star::before {
height: 2px !important;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.96) 100%) !important;
}
.bouquet-container::before {
width: 78% !important;
height: 14% !important;
bottom: 0.8cqw !important;
background: radial-gradient(ellipse, rgba(88, 46, 65, .20), transparent 72%) !important;
filter: blur(24px) !important;
}
.bouquet-img {
filter: drop-shadow(0 16px 28px rgba(72, 37, 53, .16)) !important;
}
@media (max-width: 430px) {
.night::before {
filter: blur(44px);
}
.night::after {
box-shadow:
inset 0 22px 60px rgba(255,255,255,.05),
inset 0 -80px 110px rgba(83, 44, 64, .16),
inset 0 0 120px rgba(91, 49, 69, .11);
}
}
body {
background-color: var(--dark-color) !important;
overflow: hidden !important;
perspective: 1000px !important;
}
.night {
position: fixed !important;
left: 50% !important;
top: 0 !important;
transform: translateX(-50%) !important;
width: 100% !important;
height: 100% !important;
filter: blur(0.1vmin) !important;
background-image:
radial-gradient(ellipse at top, transparent 0%, var(--dark-color)),
radial-gradient(
ellipse at bottom,
var(--dark-color),
rgba(145, 233, 255, 0.2)
),
repeating-linear-gradient(
220deg,
rgb(0, 0, 0) 0px,
rgb(0, 0, 0) 19px,
transparent 19px,
transparent 22px
),
repeating-linear-gradient(
189deg,
rgb(0, 0, 0) 0px,
rgb(0, 0, 0) 19px,
transparent 19px,
transparent 22px
),
repeating-linear-gradient(
148deg,
rgb(0, 0, 0) 0px,
rgb(0, 0, 0) 19px,
transparent 19px,
transparent 22px
),
linear-gradient(90deg, rgb(0, 255, 250), rgb(240, 240, 240)) !important;
background-color: transparent !important;
}
.night::before,
.night::after {
content: none !important;
}
.shooting-stars {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 1 !important;
opacity: 1 !important;
filter: none !important;
}
.shooting-star {
width: 4px !important;
height: 4px !important;
background: #fff !important;
border-radius: 50% !important;
box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8) !important;
}
.shooting-star::before {
height: 2px !important;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
) !important;
}
.typing-message {
display: block !important;
position: absolute !important;
left: 50% !important;
bottom: -74px !important;
transform: translateX(-50%) !important;
width: min(92%, 420px) !important;
text-align: center !important;
font-size: 0.76rem !important;
line-height: 1.7 !important;
color: rgba(255, 255, 255, 0.96) !important;
font-family: monospace !important;
letter-spacing: 1.2px !important;
text-shadow: 0 2px 14px rgba(0,0,0,.24) !important;
z-index: 30 !important;
pointer-events: none !important;
}
#typing-text::after {
content: "|" !important;
animation: blink 1s infinite !important;
}
.mini-mark {
display: none !important;
}
@media (max-width: 600px) {
.typing-message {
bottom: -68px !important;
font-size: 0.72rem !important;
width: 94% !important;
}
}
.flower__leafs {
position: relative !important;
overflow: visible !important;
}
.flower__head-img {
filter:
drop-shadow(0 0 10px rgba(255, 255, 255, 0.18))
drop-shadow(0 0 18px rgba(255, 230, 245, 0.10)) !important;
}
.flower__leafs::before,
.flower__leafs::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0.6cqw;
height: 0.6cqw;
min-width: 4px;
min-height: 4px;
border-radius: 50%;
background: rgba(255,255,255,.98);
pointer-events: none;
z-index: 35;
opacity: .88;
box-shadow:
-7.2cqw -6.0cqw 0 0 rgba(255,255,255,.95),
6.6cqw -5.1cqw 0 0 rgba(255,245,250,.92),
-8.0cqw 1.5cqw 0 0 rgba(255,250,252,.90),
7.6cqw 2.4cqw 0 0 rgba(255,255,255,.88),
-3.8cqw 6.8cqw 0 0 rgba(255,245,250,.86),
4.4cqw 6.4cqw 0 0 rgba(255,255,255,.85),
0 -8.1cqw 0 0 rgba(255,248,252,.90);
filter: drop-shadow(0 0 4px rgba(255,255,255,.55));
transform: translate(-50%, -50%);
}
.flower__leafs::before {
animation: flower-sparkle-a 2.8s ease-in-out infinite;
}
.flower__leafs::after {
width: 0.42cqw;
height: 0.42cqw;
min-width: 3px;
min-height: 3px;
background: rgba(255, 247, 252, .98);
box-shadow:
-5.7cqw -7.5cqw 0 0 rgba(255,255,255,.90),
5.5cqw -7.0cqw 0 0 rgba(255,255,255,.88),
-9.0cqw -1.4cqw 0 0 rgba(255,248,252,.85),
8.9cqw -0.8cqw 0 0 rgba(255,255,255,.83),
-6.3cqw 5.6cqw 0 0 rgba(255,250,252,.82),
6.2cqw 5.8cqw 0 0 rgba(255,255,255,.82),
0 8.3cqw 0 0 rgba(255,245,250,.84);
animation: flower-sparkle-b 3.4s ease-in-out infinite;
}
.flower--1 .flower__leafs::before,
.flower--1 .flower__leafs::after {
transform: translate(-50%, -50%) scale(1.12);
}
.flower--6 .flower__leafs::before,
.flower--6 .flower__leafs::after {
transform: translate(-50%, -50%) scale(.94);
}
.flower--7 .flower__leafs::before,
.flower--7 .flower__leafs::after,
.flower--8 .flower__leafs::before,
.flower--8 .flower__leafs::after,
.flower--9 .flower__leafs::before,
.flower--9 .flower__leafs::after {
transform: translate(-50%, -50%) scale(.88);
}
@keyframes flower-sparkle-a {
0%, 100% {
opacity: .20;
filter: drop-shadow(0 0 2px rgba(255,255,255,.25));
}
18% {
opacity: .95;
filter: drop-shadow(0 0 8px rgba(255,255,255,.68));
}
38% {
opacity: .28;
filter: drop-shadow(0 0 2px rgba(255,255,255,.22));
}
58% {
opacity: .92;
filter: drop-shadow(0 0 9px rgba(255,244,250,.72));
}
78% {
opacity: .24;
filter: drop-shadow(0 0 3px rgba(255,255,255,.25));
}
}
@keyframes flower-sparkle-b {
0%, 100% {
opacity: .18;
filter: drop-shadow(0 0 2px rgba(255,255,255,.22));
}
12% {
opacity: .78;
filter: drop-shadow(0 0 7px rgba(255,255,255,.55));
}
30% {
opacity: .22;
}
48% {
opacity: .82;
filter: drop-shadow(0 0 8px rgba(255,248,252,.58));
}
68% {
opacity: .18;
}
88% {
opacity: .75;
filter: drop-shadow(0 0 8px rgba(255,255,255,.50));
}
}
@media (max-width: 600px) {
.flower__leafs::before,
.flower__leafs::after {
filter: drop-shadow(0 0 3px rgba(255,255,255,.48));
}
}
body {
overflow: hidden !important;
}
.bouquet-container {
transform: translate(-50%, calc(50% - var(--message-lift, 0px))) !important;
transition: transform .62s cubic-bezier(.22,.61,.36,1) !important;
}
.typing-message {
display: block !important;
position: fixed !important;
left: 50% !important;
top: var(--message-top, 78vh) !important;
bottom: var(--message-bottom, max(14px, env(safe-area-inset-bottom))) !important;
width: min(88vw, 520px) !important;
height: auto !important;
max-height: none !important;
transform: translateX(-50%) !important;
padding: 2px 8px max(8px, env(safe-area-inset-bottom)) !important;
margin: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
pointer-events: auto !important;
touch-action: pan-y !important;
text-align: center !important;
font-size: clamp(.70rem, 1.65vw, .80rem) !important;
line-height: 1.72 !important;
color: rgba(255,255,255,.96) !important;
font-family: monospace !important;
letter-spacing: 1.05px !important;
text-shadow: 0 2px 14px rgba(0,0,0,.24) !important;
z-index: 30 !important;
mask-image: linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 10px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7px, #000 calc(100% - 10px), transparent 100%);
}
.typing-message::-webkit-scrollbar {
display: none !important;
}
#typing-text {
display: inline-block;
max-width: 100%;
padding: 7px 0 14px;
}
#typing-text::after {
content: "|" !important;
animation: blink 1s infinite !important;
}
.typing-message.typing-complete #typing-text::after {
animation-duration: 1.35s !important;
opacity: .72;
}
@media (orientation: landscape) and (max-height: 760px) {
.typing-message {
left: 50% !important;
width: min(70vw, 560px) !important;
transform: translateX(-50%) !important;
text-align: center !important;
}
}
@media (max-width: 430px) {
.typing-message {
width: 91vw !important;
font-size: .72rem !important;
line-height: 1.68 !important;
padding-inline: 6px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bouquet-container {
transition: none !important;
}
.typing-message {
scroll-behavior: auto !important;
}
}
html,
body {
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
.bouquet-container {
--message-lift: 0px !important;
transform: translate(-50%, 50%) !important;
transition: none !important;
}
.typing-message {
display: block !important;
position: fixed !important;
left: 50% !important;
right: auto !important;
top: auto;
bottom: max(14px, env(safe-area-inset-bottom)) !important;
width: min(88vw, 520px) !important;
height: auto !important;
max-height: none !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: 8px 8px max(10px, env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
touch-action: pan-y !important;
pointer-events: auto !important;
text-align: center !important;
font-family: monospace !important;
font-size: clamp(.70rem, 1.65vw, .80rem) !important;
line-height: 1.72 !important;
letter-spacing: 1.05px !important;
color: rgba(255,255,255,.96) !important;
text-shadow: 0 2px 14px rgba(0,0,0,.24) !important;
z-index: 30 !important;
scroll-behavior: auto !important;
mask-image: linear-gradient(to bottom, transparent 0, #000 9px, #000 calc(100% - 10px), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9px, #000 calc(100% - 10px), transparent 100%);
}
.typing-message::-webkit-scrollbar {
display: none !important;
}
#typing-text {
display: inline-block !important;
max-width: 100% !important;
padding: 4px 0 16px !important;
}
#typing-text::after {
content: "|" !important;
animation: blink 1s infinite !important;
}
.typing-message.typing-complete #typing-text::after {
animation-duration: 1.35s !important;
opacity: .72 !important;
}
@media (max-width: 430px) {
.typing-message {
width: 91vw !important;
padding-inline: 6px !important;
font-size: .72rem !important;
line-height: 1.68 !important;
}
}
@media (orientation: landscape) and (max-height: 760px) {
.typing-message {
width: min(72vw, 560px) !important;
font-size: .70rem !important;
line-height: 1.58 !important;
}
}
.bouquet-container {
transform: translate(-50%, 25%) !important;
}
.typing-message {
align-content: start !important;
justify-content: flex-start !important;
vertical-align: top !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scroll-behavior: auto !important;
}
#typing-text {
display: inline-block !important;
vertical-align: top !important;
margin: 0 !important;
padding-top: 0 !important;
}
:root {
--typing-start: 61dvh;
--typing-bottom-space: max(14px, env(safe-area-inset-bottom));
}
.typing-message {
display: block !important;
position: fixed !important;
left: 50% !important;
right: auto !important;
top: var(--typing-start) !important;
bottom: auto !important;
width: min(91vw, 520px) !important;
height: auto !important;
max-height: calc(100dvh - var(--typing-start) - var(--typing-bottom-space)) !important;
min-height: 0 !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: 0 6px 14px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
scroll-behavior: auto !important;
touch-action: pan-y !important;
pointer-events: auto !important;
text-align: center !important;
font-family: monospace !important;
font-size: .72rem !important;
line-height: 1.68 !important;
letter-spacing: 1.05px !important;
color: rgba(255,255,255,.96) !important;
text-shadow: 0 2px 14px rgba(0,0,0,.24) !important;
z-index: 30 !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
.typing-message::-webkit-scrollbar {
display: none !important;
}
#typing-text {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: top !important;
}
#typing-text::after {
content: "|" !important;
animation: blink 1s infinite !important;
}
@supports not (height: 100dvh) {
:root { --typing-start: 61vh; }
.typing-message {
max-height: calc(100vh - var(--typing-start) - 14px) !important;
}
}
/* ==============================================================
   SAGE BOTANICAL SCENE · tasteful, calm background refresh
   The existing bouquet composition and bloom timings are untouched.
   ============================================================== */
:root {
  --dark-color: #334b40;
}
html, body {
  background: #334b40 !important;
}
body {
  background: linear-gradient(180deg, #253c34 0%, #395245 52%, #536c5d 100%) !important;
}
.night {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  filter: none !important;
  background-color: #395245 !important;
  background-image:
    radial-gradient(ellipse 57% 39% at 50% 35%, rgba(239, 214, 158, .26) 0%, rgba(224, 201, 160, .13) 38%, transparent 84%),
    radial-gradient(ellipse 50% 30% at 46% 36%, rgba(251, 242, 220, .08) 0%, transparent 90%),
    radial-gradient(circle at 17% 19%, rgba(255, 251, 225, .34) 0 0.85px, transparent 1.5px),
    radial-gradient(circle at 78% 24%, rgba(238, 239, 206, .30) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 34% 74%, rgba(244, 234, 198, .26) 0 .9px, transparent 1.6px),
    linear-gradient(180deg, #273f36 0%, #395245 48%, #576d5b 100%) !important;
  background-size: auto, auto, 167px 181px, 213px 197px, 251px 227px, auto !important;
}
/* Quiet organic halo replaces the previous dense pink haze. */
.night::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 44% 26% at 50% 35%, rgba(250, 231, 192, .11), transparent 88%),
    radial-gradient(ellipse 70% 32% at 50% 92%, rgba(22, 40, 33, .13), transparent 90%) !important;
  opacity: 1 !important;
  filter: blur(24px) !important;
  pointer-events: none !important;
  animation: none !important;
  mix-blend-mode: normal !important;
}
.night::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(16, 35, 28, .10), transparent 24%, transparent 72%, rgba(19, 41, 32, .22)) !important;
  box-shadow: inset 0 0 115px rgba(14, 34, 27, .15) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}
/* Keep the little wish-on-a-star moment, just less flashy. */
.shooting-stars {
  opacity: .40 !important;
  filter: none !important;
}
.shooting-star {
  width: 2px !important;
  height: 2px !important;
  background: #f5ead4 !important;
  box-shadow: 0 0 6px 1px rgba(253, 239, 209, .46) !important;
}
.shooting-star::before {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 237, 207, .75)) !important;
}
.bouquet-img {
  filter: drop-shadow(0 16px 20px rgba(16, 31, 24, .20)) !important;
}
.bouquet-container::before {
  background: radial-gradient(ellipse, rgba(9, 25, 19, .24), transparent 72%) !important;
}
.typing-message {
  color: #f7f1e4 !important;
  text-shadow: 0 1px 6px rgba(15, 34, 26, .35) !important;
}
@media (max-width: 430px) {
  .night::before { filter: blur(18px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .shooting-stars { display: none !important; }
  .night::before { animation: none !important; }
}