/* ===========================
MASHA ANTHEM SECTION
=========================== */

.anthem-section{

padding:80px 20px;

text-align:center;

background:linear-gradient(180deg,#fff,#fff8f2);

}

.anthem-section h2{

font-size:36px;

font-weight:700;

color:#9e0938;

margin-bottom:12px;

}

.anthem-section p{

font-size:17px;

color:#666;

margin-bottom:35px;

}

/* ===========================
PLAY BUTTON
=========================== */

#playAnthem{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:16px 36px;

background:linear-gradient(135deg,#d4145a,#9e0938);

color:#fff;

font-size:18px;

font-weight:600;

border:none;

border-radius:50px;

cursor:pointer;

transition:.35s ease;

box-shadow:0 12px 30px rgba(212,20,90,.35);

}

#playAnthem::before{

content:"🎵";

font-size:22px;

}

#playAnthem:hover{

transform:translateY(-4px) scale(1.03);

box-shadow:0 18px 40px rgba(212,20,90,.45);

background:linear-gradient(135deg,#e21864,#b30d44);

}

#playAnthem:active{

transform:scale(.97);

}

.anthem-popup{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:99999;

backdrop-filter:blur(8px);

}

.anthem-popup.show{

display:flex;

}

.anthem-box{

width:340px;

background:#fff;

border-radius:24px;

overflow: hidden;

padding:35px;

text-align:center;

position:relative;

animation:popup .45s ease;

}

@keyframes popup{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.anthem-logo{

width:120px;

animation:spin 8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

#closeAnthem{

position:absolute;

top:12px;

right:12px;

width:42px;

height:42px;

border:none;

border-radius:50%;

background:#f5f5f5;

color:#222;

font-size:26px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.15);

transition:.3s;

z-index:1000;

}

#closeAnthem:hover{

background:#d4145a;

color:#fff;

transform:rotate(90deg) scale(1.08);

}

/* Mobile */

@media(max-width:768px){

#playAnthem{

width:100%;

max-width:320px;

padding:15px;

font-size:17px;

}

}

.anthem-popup{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:99999;

backdrop-filter:blur(8px);

}

.anthem-popup.show{

display:flex;

}

.anthem-box{

width:340px;

background:#fff;

border-radius:24px;

padding:35px;

text-align:center;

position:relative;

animation:popup .45s ease;

}

@keyframes popup{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.anthem-logo{

width:120px;

animation:spin 8s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

#closeAnthem{

position:absolute;

top:15px;

right:15px;

width:38px;

height:38px;

border:none;

border-radius:50%;

cursor:pointer;

}