*{margin:0;padding:0;box-sizing:border-box}body{font-family:Shabnam,Vazirmatn,'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;background:#1a1a1a}.container{position:relative;min-height:100vh;overflow:hidden;background:url(../assets/img/ramsar.jpg) center center/cover no-repeat}.container::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background:inherit;filter:blur(8px) brightness(.75);pointer-events:none}.fogged-glass,.main-content,.overlay{position:relative;z-index:1}.video-background{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}.fogged-glass{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.1) 1px,transparent 1px),radial-gradient(circle at 80% 70%,rgba(255,255,255,.08) 1px,transparent 1px),radial-gradient(circle at 40% 80%,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(45deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.05) 100%);backdrop-filter:blur(1px);filter:blur(.5px)}.water-droplet{position:absolute;background:rgba(255,255,255,.45);border-radius:45% 45% 60% 80%/60% 60% 100% 100%;animation:dropletMove linear infinite;z-index:3;box-shadow:0 2px 12px 2px rgba(255,255,255,.18);pointer-events:none}@keyframes dropletMove{0%{transform:translateY(-20px) rotate(-8deg) scaleX(.9);opacity:.8}100%{transform:translateY(100vh) rotate(10deg) scaleX(1.05);opacity:0}}.fog-particle{position:absolute;background:radial-gradient(circle,rgba(255,255,255,.1) 0,transparent 70%);border-radius:50%;animation:fogFloat ease-in-out infinite;z-index:2}@keyframes fogFloat{0%,100%{transform:translateY(0) translateX(0);opacity:.3}50%{transform:translateY(-20px) translateX(10px);opacity:.6}}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:4}.main-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}.player-container{backdrop-filter:blur(1px);background:rgba(255,255,255,.01);border-radius:24px;padding:24px 5px 28px 5px;border:1px solid rgba(255,255,255,0);box-shadow:0 25px 50px rgba(0,0,0,.3);max-width:320px;width:100%;text-align:center}.play-button{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;margin:20px auto 22px}.play-button:hover{background:rgba(255,255,255,.3);transform:scale(1.05)}.pause-icon,.play-icon{width:32px;height:32px;fill:#fff}.pause-icon{display:none}.title{font-size:28px;font-weight:300;color:#fff;margin-bottom:8px;letter-spacing:2px;font-family:lalehzar,sans-serif}.subtitle{color:rgba(255,255,255,.7);font-size:18px;font-weight:300;margin-bottom:22px;font-family:Shabnam,'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}.volume-control{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}.volume-icon{width:20px;height:20px;fill:rgba(255,255,255,.7);cursor:pointer;transition:fill .3s ease}.volume-icon:hover{fill:#fff}.volume-slider{width:128px;height:8px;background:rgba(255,255,255,.2);border-radius:4px;outline:0;cursor:pointer;-webkit-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:#fff;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}.links{color:rgba(255,255,255,.6);font-size:14px}.weather-icons{display:flex;justify-content:center;gap:24px;margin-bottom:32px;height:30px;padding-bottom:10px}.weather-icons .weather-icon:nth-child(2),.weather-icons .weather-icon:nth-child(3){padding-bottom:10px}.weather-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border-radius:16px;background:rgba(255,255,255,.12);box-shadow:0 4px 24px rgba(0,0,0,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-bottom:3px solid transparent;transition:background .2s,box-shadow .2s,transform .2s,border-bottom-color .2s;color:#fff;user-select:none;overflow:hidden}.weather-icon svg{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1))}.weather-icon svg{width:28px;height:28px;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1))}.weather-icon:hover{background:rgba(255,255,255,.22);box-shadow:0 8px 32px rgba(0,0,0,.18);transform:scale(1.08)}.weather-icon.active{border:none;border-bottom:3px solid #00fff7;box-shadow:none;background:0 0}.links a{color:rgba(255,255,255,.6);text-decoration:underline;transition:color .3s ease;margin:0 29px}.links a:hover{color:#fff}.notifications{position:fixed;bottom:24px;left:24px;z-index:20;display:flex;flex-direction:column;gap:12px}.notification{backdrop-filter:blur(20px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:10px;color:#fff;font-size:16px;font-weight:300;box-shadow:0 25px 50px rgba(0,0,0,.3);transform:translateX(-100%);opacity:0;transition:all .5s ease-out;max-width:300px}.notification.show{transform:translateX(0);opacity:1}.notification.hide{transform:translateX(-100%);opacity:0}@media (max-width:768px){.player-container{padding:32px 24px;margin:20px}.title{font-size:26px}.subtitle{font-size:16px}.notifications{left:16px;bottom:16px}.notification{max-width:calc(100vw - 32px);font-size:16px}}.pouyadadeh{padding-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;opacity:.8;color:#aaa!important;text-decoration:none}.pouyadadeh a{color:#aaa!important;text-decoration:none}.water-droplet{position:absolute;background:linear-gradient(180deg,rgba(255,255,255,.7) 0,rgba(255,255,255,.25) 80%,rgba(255,255,255,.05) 100%);border-radius:45% 45% 90% 90%/90% 90% 100% 100%;animation:dropletMove linear infinite;z-index:3;box-shadow:0 2px 16px 2px rgba(255,255,255,.22),0 0 2px 0 rgba(255,255,255,.18);pointer-events:none;border:1.5px solid rgba(255,255,255,.18);filter:blur(.2px) drop-shadow(0 2px 6px rgba(255,255,255,.1));mix-blend-mode:screen}@keyframes dropletMove{0%{transform:translateY(-30px) rotate(-4deg) scaleX(.95);opacity:.8}100%{transform:translateY(100vh) rotate(4deg) scaleX(1.08);opacity:0}}