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

:root {
    --color-bg: linear-gradient(to top,#010329,#000005);
    --color-glass: linear-gradient(to left,#142544,#1a9092);
    --color-water: linear-gradient(to left,#142544,#1b6d6e);
    
    --flower-leaf1: 
}

body {
    background-color: #FFF5E4;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

body::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(26, 144, 146, 0.6) 0%, transparent 70%);
    z-index: -1;
}


.flower {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 75vmin;
}

.flower::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, #fff 1.5px, transparent 1.5px);
    background-size: 100px 100px, 200px 200px;
    background-position: 0 0, 50px 50px;
    opacity: 0.2;
    animation: particles 20s linear infinite;
    pointer-events: none;
}

.flower__glass {
    width: 20vmin;
    height: 30vmin;
    background-image: var(--color-glass);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    opacity: .8;
    position: relative;

    z-index: 10;
    backdrop-filter: blur(2px);
}

.flower__glass::after {
    content: '';
    position: absolute;
    top: -10%;
    width: 15%;
    height: 100%;
    left: 0;
    bottom: 0;
    background-color: #182843;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 50px;
    filter: blur(1px);
}

.flower__glass::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    background-image: var(--color-water);
    width: 100%; height: 15vmin;

    opacity: 0.4;
    animation: water-move 3s ease-in-out infinite;
}

.f-wrapper {
    position: absolute;
    left: 45%;
    bottom: 2vmin;
}

.f-wrapper--2 {
    left: 50%;
    bottom: 5%;
    transform: rotate(20deg);
    transform-origin: 10% left;
}

.f-wrapper--3 {
    left: 30%;
    bottom: 5%;
    transform: rotate(-10deg);
    transform-origin: 10% left;
}

.flower__line {
    width: 2vmin;
    height: 56vmin;
    background-image: linear-gradient(to left top,#82fdff 20%,#142544,#104d4e);
    border-radius: 4vmin;
}

.f-wrapper--2 .flower__line, .f-wrapper--3 .flower__line { height: 45vmin; }

.f {
    position: absolute;
    top: 1vmin;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    width: 2vmin;
    height: 2vmin;

    cursor: pointer;
}

.flower__leaf {
    position: absolute;
    left: 50%;
    bottom: 2vmin;
    transform: translateX(-50%) rotate(0deg);
    width: 5vmin;
    height: 14vmin;
    background-image: linear-gradient(to bottom, #ffa085 ,#fa7373, #1a233a 99%);
    clip-path: ellipse(50% 50% at 50% 50%);
    transform-origin: center bottom;
    transition: transform 1s ease, opacity 0.5s ease;
    transition: transform 1.2s cubic-bezier(0.5, 1.5, 0.5, 1);

    transition: transform 1s, filter 1s;
}

.is-open .flower__leaf {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}


.flower__leaf--1 {
    width: 10vmin;
    height: 12vmin;
    bottom: 3vmin;
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    background-color: #e24f5f;
    background-image: none;
    opacity: 0;
    transform: translateX(-50%) scale(0);
}

.is-open .flower__leaf--1 {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Closed State*/
.flower__leaf--2 { transform: translateX(-50%) rotate(-10deg); }
.flower__leaf--3 { transform: translateX(-50%) rotate(-15deg); }
.flower__leaf--4 { transform: translateX(-50%) rotate(-20deg); }
.flower__leaf--5 { transform: translateX(-50%) rotate(10deg); }
.flower__leaf--6 { transform: translateX(-50%) rotate(15deg); }
.flower__leaf--7 { transform: translateX(-50%) rotate(20deg); }

/* Open State */
.is-open .flower__leaf--2 { transform: translateX(-50%) rotate(-30deg); }
.is-open .flower__leaf--3 { transform: translateX(-50%) rotate(-50deg); }
.is-open .flower__leaf--4 { transform: translateX(-50%) rotate(-70deg); }
.is-open .flower__leaf--5 { transform: translateX(-50%) rotate(30deg); }
.is-open .flower__leaf--6 { transform: translateX(-50%) rotate(50deg); }
.is-open .flower__leaf--7 { transform: translateX(-50%) rotate(70deg); }

/* Flower Colors*/
.f-wrapper--2 .flower__leaf:not(.flower__leaf--1) {
    background-image: linear-gradient(to bottom, #ff43b6 ,#c22887, #1a233a 99%);
}
.f-wrapper--3 .flower__leaf:not(.flower__leaf--1) {
    background-image: linear-gradient(to bottom, #ad2be0 ,#712291, #1a233a 99%);
}

/* Animations */
.f-wrapper { transition-delay: 0.1s;}
.f-wrapper--2 { transition-delay: 0.1s;}
.f-wrapper--3 { transition-delay: 0.1s;}

.flower__leaf {
    transition: transform 1.5s cubic-bezier(0.47, 1.64, 0.41, 0.8), opacity 0.5s ease;
}

@keyframes particles {
    from { transform: translateY(0); }
    to { transform: translateY(-100px); }
}

@keyframes water-move {
    0%, 100% { clip-path: polygon(0% 15%, 15% 10%, 33% 15%, 52% 10%, 72% 15%, 88% 10%, 100% 15%, 100% 100%, 0% 100%); }
    50% { clip-path: polygon(0% 10%, 18% 15%, 38% 10%, 58% 15%, 78% 10%, 92% 15%, 100% 10%, 100% 100%, 0% 100%); }
}

/* Mobile Settings */
.f-wrapper {
    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;
    user-select: none;
}

@media (max-width: 600px) {
    .flower {
        height: 60vh;
        transform: scale(0.8);
    }
}