/*==================================================
 NIHAR ❤️ DHVANI WEDDING WEBSITE
 petals.css
 Part 1
==================================================*/


/*=========================================
 PARTICLE CONTAINER
=========================================*/

.particle-container{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;

z-index:-1;

}


/*=========================================
 SAKURA PETAL
=========================================*/

.sakura{

position:absolute;

top:-120px;

font-size:26px;

pointer-events:none;

user-select:none;

opacity:.9;

filter:

drop-shadow(0 0 8px rgba(255,182,193,.5));

animation:

sakuraFall linear forwards;

}


@keyframes sakuraFall{

0%{

transform:

translateY(-120px)

translateX(0)

rotate(0deg)

scale(.6);

opacity:0;

}

15%{

opacity:1;

}

50%{

transform:

translateY(45vh)

translateX(60px)

rotate(180deg);

}

100%{

transform:

translateY(120vh)

translateX(180px)

rotate(720deg)

scale(1);

opacity:0;

}

}


/*=========================================
 ROSE PETAL
=========================================*/

.rose-petal{

position:absolute;

top:-100px;

font-size:22px;

pointer-events:none;

filter:

drop-shadow(0 0 10px rgba(255,70,120,.4));

animation:

roseFall linear forwards;

}


@keyframes roseFall{

0%{

transform:

translateY(-80px)

rotate(0deg);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translateY(120vh)

translateX(-150px)

rotate(-540deg);

opacity:0;

}

}


/*=========================================
 GOLD PARTICLES
=========================================*/

.gold-particle{

position:absolute;

width:5px;

height:5px;

border-radius:50%;

background:#FFD700;

box-shadow:

0 0 10px rgba(255,215,0,.9),

0 0 25px rgba(255,215,0,.6);

animation:

goldFloat linear infinite;

}


@keyframes goldFloat{

0%{

transform:

translateY(100vh)

scale(.2);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:

translateY(-20vh)

scale(1.6);

opacity:0;

}

}


/*=========================================
 TWINKLING STAR
=========================================*/

.star{

position:absolute;

width:4px;

height:4px;

background:#fff;

border-radius:50%;

box-shadow:

0 0 8px #fff,

0 0 20px gold;

animation:

starBlink 2s infinite;

}


@keyframes starBlink{

0%,100%{

opacity:.2;

transform:scale(.4);

}

50%{

opacity:1;

transform:scale(1.7);

}

}


/*=========================================
 FLOATING HEART
=========================================*/

.floating-heart{

position:absolute;

font-size:20px;

pointer-events:none;

filter:

drop-shadow(0 0 8px rgba(255,0,90,.5));

animation:

heartFloat linear forwards;

}


@keyframes heartFloat{

0%{

transform:

translateY(100vh)

scale(.4);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translateY(-20vh)

scale(1.4);

opacity:0;

}

}


/*=========================================
 FLOATING LEAF
=========================================*/

.leaf{

position:absolute;

top:-100px;

font-size:18px;

animation:

leafFall linear forwards;

}


@keyframes leafFall{

0%{

transform:

translateY(-100px)

rotate(0deg);

}

100%{

transform:

translateY(120vh)

translateX(120px)

rotate(360deg);

}

}


/*=========================================
 FLOWER GLOW
=========================================*/

.flower-glow{

position:absolute;

width:14px;

height:14px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.8),

rgba(255,182,193,.4),

transparent);

filter:blur(5px);

animation:

glowPulse 2s infinite;

}


@keyframes glowPulse{

0%{

transform:scale(.6);

opacity:.3;

}

50%{

transform:scale(1.4);

opacity:1;

}

100%{

transform:scale(.6);

opacity:.3;

}

}

/*==================================================
 NIHAR ❤️ DHVANI WEDDING WEBSITE
 petals.css
 Part 2
==================================================*/


/*=========================================
 FAIRY DUST
=========================================*/

.fairy-dust{

position:absolute;

width:3px;

height:3px;

border-radius:50%;

background:#ffffff;

box-shadow:

0 0 8px rgba(255,255,255,.9),

0 0 18px rgba(255,215,0,.5);

pointer-events:none;

animation:

fairyFloat linear infinite;

}

@keyframes fairyFloat{

0%{

transform:

translateY(100vh)

translateX(0)

scale(.3);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:

translateY(-20vh)

translateX(60px)

scale(1.6);

opacity:0;

}

}


/*=========================================
 SPARKLE
=========================================*/

.sparkle{

position:absolute;

width:8px;

height:8px;

pointer-events:none;

}

.sparkle::before,

.sparkle::after{

content:"";

position:absolute;

left:50%;

top:50%;

background:#fff;

transform:translate(-50%,-50%);

}

.sparkle::before{

width:2px;

height:12px;

}

.sparkle::after{

width:12px;

height:2px;

}

.sparkle{

filter:

drop-shadow(0 0 8px gold);

animation:

sparkleTwinkle .8s ease-out forwards;

}

@keyframes sparkleTwinkle{

0%{

transform:scale(.2);

opacity:1;

}

100%{

transform:scale(2);

opacity:0;

}

}


/*=========================================
 FLOWER BURST
=========================================*/

.flower-burst{

position:absolute;

font-size:22px;

pointer-events:none;

animation:

flowerBurst 1.8s ease-out forwards;

}

@keyframes flowerBurst{

0%{

transform:

translate(0,0)

scale(.3)

rotate(0deg);

opacity:1;

}

100%{

transform:

translate(var(--x),var(--y))

scale(1.4)

rotate(360deg);

opacity:0;

}

}


/*=========================================
 WIND EFFECT
=========================================*/

.wind{

animation:

windMove 5s ease-in-out infinite alternate;

}

@keyframes windMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(30px);

}

}


/*=========================================
 PETAL SWAY
=========================================*/

.sakura,

.rose-petal,

.leaf{

transform-origin:center;

animation-name:

sakuraFall,

petalSway;

animation-duration:

12s,

3s;

animation-iteration-count:

1,

infinite;

animation-timing-function:

linear,

ease-in-out;

}

@keyframes petalSway{

0%{

margin-left:-10px;

}

50%{

margin-left:15px;

}

100%{

margin-left:-10px;

}

}


/*=========================================
 GLASS REFLECTION
=========================================*/

.glass-reflection{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

}

.glass-reflection::before{

content:"";

position:absolute;

top:-100%;

left:-50%;

width:40%;

height:250%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:rotate(25deg);

animation:

glassMove 8s linear infinite;

}

@keyframes glassMove{

100%{

left:140%;

}

}


/*=========================================
 ROMANTIC GLOW
=========================================*/

.romantic-glow{

position:absolute;

width:120px;

height:120px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,182,193,.25),

transparent);

filter:blur(35px);

animation:

romanticGlow 6s ease-in-out infinite alternate;

}

@keyframes romanticGlow{

0%{

transform:

scale(.8)

translateY(0);

}

100%{

transform:

scale(1.5)

translateY(-40px);

}

}


/*=========================================
 PARTICLE FADE
=========================================*/

.fade-particle{

animation:

fadeParticle 2s ease forwards;

}

@keyframes fadeParticle{

0%{

opacity:1;

}

100%{

opacity:0;

}

}


/*=========================================
 PERFORMANCE
=========================================*/

.sakura,
.rose-petal,
.gold-particle,
.fairy-dust,
.sparkle,
.star,
.floating-heart,
.leaf{

will-change:

transform,

opacity;

backface-visibility:hidden;

}


/*=========================================
 POINTER EVENTS
=========================================*/

.sakura,
.rose-petal,
.gold-particle,
.fairy-dust,
.sparkle,
.star,
.floating-heart,
.leaf,
.flower-burst{

pointer-events:none;

}

/*==================================================
 NIHAR ❤️ DHVANI WEDDING WEBSITE
 petals.css
 Part 3 (Final)
==================================================*/


/*=========================================
 LOTUS PETALS
=========================================*/

.lotus{

position:absolute;

top:-100px;

font-size:26px;

pointer-events:none;

animation:

lotusFall linear forwards;

filter:

drop-shadow(0 0 10px rgba(255,182,193,.5));

}

@keyframes lotusFall{

0%{

transform:

translateY(-100px)

rotate(0deg)

scale(.5);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:

translateY(120vh)

translateX(120px)

rotate(540deg)

scale(1.2);

opacity:0;

}

}


/*=========================================
 MARIGOLD FLOWERS
=========================================*/

.marigold{

position:absolute;

top:-120px;

font-size:24px;

pointer-events:none;

animation:

marigoldFall linear forwards;

filter:

drop-shadow(0 0 12px rgba(255,170,0,.5));

}

@keyframes marigoldFall{

0%{

transform:

translateY(-100px)

rotate(0deg);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translateY(120vh)

translateX(-100px)

rotate(-720deg);

opacity:0;

}

}


/*=========================================
 GOLD RINGS
=========================================*/

.gold-ring{

position:absolute;

width:40px;

height:40px;

border-radius:50%;

border:2px solid rgba(255,215,0,.5);

box-shadow:

0 0 15px rgba(255,215,0,.5);

animation:

goldRing 2.5s ease-out forwards;

}

@keyframes goldRing{

0%{

transform:scale(.3);

opacity:1;

}

100%{

transform:scale(3);

opacity:0;

}

}


/*=========================================
 SHOOTING STAR
=========================================*/

.shooting-star{

position:absolute;

width:120px;

height:2px;

background:

linear-gradient(

90deg,

#fff,

transparent

);

transform:rotate(-30deg);

box-shadow:

0 0 15px white;

animation:

shootStar 2s linear forwards;

}

@keyframes shootStar{

0%{

transform:

translate(-200px,-100px)

rotate(-30deg);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translate(120vw,120vh)

rotate(-30deg);

opacity:0;

}

}


/*=========================================
 CELEBRATION BURST
=========================================*/

.celebration{

position:absolute;

font-size:22px;

pointer-events:none;

animation:

celebrate 2s ease-out forwards;

}

@keyframes celebrate{

0%{

transform:

scale(.2)

translate(0,0);

opacity:1;

}

100%{

transform:

scale(1.8)

translate(var(--x),var(--y));

opacity:0;

}

}


/*=========================================
 PARTICLE BLUR
=========================================*/

.blur-particle{

filter:blur(2px);

}


/*=========================================
 SOFT SHADOW
=========================================*/

.soft-shadow{

filter:

drop-shadow(0 0 8px rgba(255,255,255,.3));

}


/*=========================================
 MOBILE OPTIMIZATION
=========================================*/

@media(max-width:768px){

.sakura,
.rose-petal,
.marigold,
.lotus{

font-size:18px;

}

.gold-particle{

width:3px;

height:3px;

}

.sparkle{

transform:scale(.8);

}

}


/*=========================================
 TABLET
=========================================*/

@media(min-width:769px) and (max-width:1024px){

.sakura{

font-size:22px;

}

}


/*=========================================
 HIGH DPI
=========================================*/

@media(min-resolution:2dppx){

.gold-particle{

box-shadow:

0 0 18px gold;

}

}


/*=========================================
 REDUCE MOTION
=========================================*/

@media(prefers-reduced-motion:reduce){

.sakura,
.rose-petal,
.gold-particle,
.star,
.fairy-dust,
.floating-heart,
.leaf,
.lotus,
.marigold{

animation:none !important;

}

}


/*=========================================
 GPU ACCELERATION
=========================================*/

.sakura,
.rose-petal,
.gold-particle,
.star,
.sparkle,
.fairy-dust,
.floating-heart,
.leaf,
.lotus,
.marigold{

transform:translateZ(0);

}


/*=========================================
 END OF PETALS.CSS
=========================================*/