/*==================================================
 NIHAR ❤️ DHVANI WEDDING WEBSITE
 music.css
==================================================*/


/*=========================================
 MUSIC BUTTON
=========================================*/

#musicToggle{

position:fixed;

top:25px;

right:25px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.15);

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

color:#fff;

font-size:26px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

transition:.35s ease;

box-shadow:

0 8px 25px rgba(0,0,0,.25),

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

z-index:99999;

outline:none;

}


/*=========================================
 HOVER
=========================================*/

#musicToggle:hover{

transform:

translateY(-3px)

scale(1.08);

background:rgba(255,255,255,.22);

box-shadow:

0 12px 30px rgba(0,0,0,.3),

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

}


/*=========================================
 CLICK
=========================================*/

#musicToggle:active{

transform:scale(.92);

}


/*=========================================
 PULSE
=========================================*/

#musicToggle.playing{

animation:

musicPulse 2s infinite;

}

@keyframes musicPulse{

0%{

box-shadow:

0 0 0 0 rgba(255,215,0,.45);

}

70%{

box-shadow:

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

}

100%{

box-shadow:

0 0 0 0 rgba(255,215,0,0);

}

}


/*=========================================
 ICON ROTATION
=========================================*/

#musicToggle.playing i,

#musicToggle.playing span{

animation:

rotateIcon 6s linear infinite;

}

@keyframes rotateIcon{

100%{

transform:rotate(360deg);

}

}


/*=========================================
 MUTE STATE
=========================================*/

#musicToggle.muted{

background:

rgba(255,90,90,.18);

box-shadow:

0 0 18px rgba(255,90,90,.4);

}


/*=========================================
 TOOLTIP
=========================================*/

#musicToggle::after{

content:"Music";

position:absolute;

top:70px;

right:0;

padding:8px 12px;

border-radius:8px;

background:rgba(0,0,0,.75);

color:#fff;

font-size:13px;

white-space:nowrap;

opacity:0;

transform:translateY(10px);

pointer-events:none;

transition:.3s;

}

#musicToggle:hover::after{

opacity:1;

transform:translateY(0);

}


/*=========================================
 EQUALIZER
=========================================*/

.music-bars{

position:absolute;

bottom:-12px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:3px;

height:18px;

}

.music-bars span{

width:3px;

background:#FFD700;

border-radius:5px;

animation:

equalizer 1s infinite ease-in-out;

}

.music-bars span:nth-child(2){

animation-delay:.2s;

}

.music-bars span:nth-child(3){

animation-delay:.4s;

}

.music-bars span:nth-child(4){

animation-delay:.6s;

}

@keyframes equalizer{

0%,100%{

height:5px;

}

50%{

height:18px;

}

}


/*=========================================
 HIDDEN BARS WHEN MUTED
=========================================*/

#musicToggle.muted .music-bars{

display:none;

}


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

#musicToggle::before{

content:"";

position:absolute;

width:100%;

height:100%;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,215,0,.25),

transparent);

opacity:0;

transition:.4s;

}

#musicToggle:hover::before{

opacity:1;

transform:scale(1.3);

}


/*=========================================
 AUDIO
=========================================*/

audio{

display:none;

}


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

@media(max-width:768px){

#musicToggle{

width:50px;

height:50px;

font-size:22px;

top:15px;

right:15px;

}

#musicToggle::after{

display:none;

}

}


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

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

#musicToggle{

width:55px;

height:55px;

}

}


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

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

#musicToggle,

.music-bars span{

animation:none !important;

transition:none !important;

}

}


/*=========================================
 END OF MUSIC.CSS
=========================================*/