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

:root{
  --bg-dark:#050509;
  --accent:#ff2b4f;
  --accent-soft:#ff667f;
  --border-soft:rgba(255,255,255,0.08);
  --text-main:#f7f7f7;
  --text-muted:rgba(255,255,255,0.7);
}

body{
  font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  min-height:100vh;
  color:var(--text-main);
  background:
    radial-gradient(circle at 0% 0%, #35111f 0, transparent 55%),
    radial-gradient(circle at 100% 0%, #240b36 0, transparent 55%),
    radial-gradient(circle at 50% 100%, #000 0, #000 70%);
  background-color:var(--bg-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px 140px;
  position:relative;
  overflow:hidden;
  animation:bgPulse 18s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
  opacity:0.6;
  z-index:2;
  animation:noiseMove 4s steps(3,end) infinite;
}

@keyframes noiseMove{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-10px,10px,0); }
}

@keyframes bgPulse{
  0%{ background-position:0% 0%,100% 0%,50% 100%; }
  50%{ background-position:10% 10%,90% 0%,50% 95%; }
  100%{ background-position:0% 10%,100% 0%,50% 100%; }
}

body::before{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  border-radius:50%;
  filter:blur(45px);
  opacity:0.4;
  pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,43,79,0.9), transparent 70%);
  top:-140px;
  left:-140px;
  animation:blobMove 24s ease-in-out infinite alternate;
  z-index:0;
}

.nebula{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(45px);
  pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(122,31,255,0.9), transparent 70%);
  bottom:-140px;
  right:-80px;
  opacity:0.35;
  animation:blobMove 26s ease-in-out infinite alternate-reverse;
  z-index:0;
}

@keyframes blobMove{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(40px,-20px,0) scale(1.1); }
  100%{ transform:translate3d(-20px,30px,0) scale(1.05); }
}

.content{
  position:relative;
  z-index:3;
  max-width:880px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
}

.card{
  width:100%;
  max-width:720px;
  padding:40px 28px 32px;
  border-radius:26px;
  border:1px solid var(--border-soft);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.04) 0, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.03) 0, transparent 40%),
    rgba(5,5,9,0.94);
  backdrop-filter:blur(22px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 24px 80px rgba(0,0,0,0.9),
    0 0 60px rgba(255,43,79,0.15);
  text-align:center;
  animation:cardIn 0.9s cubic-bezier(0.16,1,0.3,1);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid transparent;
  background:linear-gradient(120deg, rgba(255,43,79,0.35), transparent, rgba(255,255,255,0.2)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events:none;
  opacity:0.8;
}

@keyframes cardIn{
  from{ opacity:0; transform:translate3d(0,24px,0) scale(0.97); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 14px;
  border-radius:999px;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--text-muted);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  margin-bottom:18px;
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.05s backwards;
}

.badge-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 16px rgba(255,43,79,0.8);
  animation:dotPulse 1.7s ease-in-out infinite;
}

.badge span:last-child{ font-weight:600; letter-spacing:0.22em; }

@keyframes dotPulse{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.5); opacity:0.4; }
  100%{ transform:scale(1); opacity:1; }
}

.glow-line{
  width:120px;
  height:2px;
  margin:0 auto 22px;
  border-radius:999px;
  background:linear-gradient(90deg, #ff2b4f, #ff9f7b, #ff2b4f);
  box-shadow:0 0 18px rgba(255,81,111,0.85);
  position:relative;
  overflow:hidden;
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.12s backwards;
}

.glow-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, #ffffff, transparent);
  transform:translateX(-100%);
  animation:lineSweep 2.4s cubic-bezier(0.4,0,0.2,1) infinite;
}

@keyframes lineSweep{
  0%{ transform:translateX(-100%); opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateX(100%); opacity:0; }
}

.tagline{
  font-size:clamp(1.9rem,4vw,2.6rem);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-shadow:0 0 24px rgba(0,0,0,0.9);
  line-height:1.36;
  position:relative;
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.18s backwards;
}

.tagline span{
  background:linear-gradient(135deg, #ffffff, #ffb3c4);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.tagline::after{
  content:"в своей тишине и шуме мира";
  display:block;
  margin-top:10px;
  font-size:0.82rem;
  font-weight:400;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  opacity:0.9;
}

.sub{
  margin-top:18px;
  font-size:0.9rem;
  color:var(--text-muted);
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.26s backwards;
}

.sub-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 16px;
  border-radius:999px;
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.16);
  background:radial-gradient(circle at 0 0, rgba(255,255,255,0.04), transparent 55%);
  color:rgba(255,255,255,0.86);
  position:relative;
  overflow:hidden;
}

.sub-pill::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.7), transparent);
  transform:translateX(-120%);
  opacity:0.0;
  animation:pillSweep 3.2s ease-in-out infinite;
}

@keyframes pillSweep{
  0%{ transform:translateX(-120%); opacity:0; }
  40%{ opacity:0; }
  55%{ opacity:0.7; }
  100%{ transform:translateX(120%); opacity:0; }
}

.floating{ animation:float 7s ease-in-out infinite; }

@keyframes float{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-6px,0); }
  100%{ transform:translate3d(0,0,0); }
}

@keyframes fadeUp{
  from{ opacity:0; transform:translate3d(0,16px,0); }
  to{ opacity:1; transform:translate3d(0,0,0); }
}

.site-quote{
  position:relative;
  z-index:1;
  max-width:720px;
  width:100%;
  text-align:center;
  font-size:0.82rem;
  color:rgba(255,255,255,0.68);
  letter-spacing:0.16em;
  text-transform:uppercase;
  opacity:0.9;
  animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.36s backwards;
}

.site-quote::before{
  content:"";
  display:block;
  width:70px;
  height:1px;
  margin:0 auto 10px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  opacity:0.7;
}

.site-quote span{ font-style:italic; opacity:0.9; }

.player{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:10px 18px 14px;
  backdrop-filter:blur(20px);
  background:
    radial-gradient(circle at 0 0, rgba(255,43,79,0.12), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(86,0,200,0.12), transparent 60%),
    linear-gradient(90deg, #050509, #100816);
  border-top:1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  gap:14px;
  z-index:10;
  transform:translateY(100%);
  animation:playerIn 0.75s cubic-bezier(0.16,1,0.3,1) 0.4s forwards;

  /* чтобы дропдаун не обрезался */
  overflow:visible;

  flex-direction:column;
}

.player::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% -40%, rgba(255,255,255,0.18), transparent 60%);
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity 0.35s ease;
  pointer-events:none;
}

.player.is-playing::before{ opacity:1; }

.socialbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:6px 8px 2px;
  z-index:2;
  user-select:none;
}

.social-btn{
  --btn-a: rgba(255,43,79,0.55);
  --btn-b: rgba(130,43,255,0.35);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.06), transparent 60%),
    rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.86);
  text-decoration:none;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.75),
    0 0 24px rgba(255,43,79,0.10);
  transition:transform 0.16s ease-out, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, filter 0.22s ease;
  overflow:hidden;
  isolation:isolate;
}

.social-btn .label{ font-weight:600; }

.social-btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid transparent;
  background:linear-gradient(120deg, var(--btn-a), transparent, var(--btn-b)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events:none;
  opacity:0.55;
}

.social-btn .fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 30% 0%, rgba(255,255,255,0.22), transparent 62%);
  transform:scale(0.85);
  transition:opacity 0.22s ease, transform 0.22s ease;
}

.social-btn:hover{
  transform:translateY(-1px) scale(1.02);
  border-color:rgba(255,255,255,0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08), transparent 60%),
    rgba(255,255,255,0.055);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.85),
    0 0 34px rgba(255,43,79,0.18);
  filter:saturate(1.08);
}

.social-btn:hover .fx{ opacity:1; transform:scale(1); }
.social-btn:active{ transform:translateY(1px) scale(0.98); }

.social-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(255,43,79,0.35),
    0 0 0 6px rgba(130,43,255,0.18),
    0 18px 36px rgba(0,0,0,0.85);
}

.social-btn.tg{ --btn-a: rgba(255,43,79,0.62); --btn-b: rgba(255,159,123,0.30); }
.social-btn.steam{ --btn-a: rgba(130,43,255,0.55); --btn-b: rgba(255,43,79,0.25); }
.social-btn.yt{ --btn-a: rgba(255,43,79,0.55); --btn-b: rgba(130,43,255,0.45); }
.social-btn.discord{ --btn-a: rgba(88,101,242,0.60); --btn-b: rgba(130,43,255,0.35); }
.social-btn.projects-btn{ --btn-a: rgba(255,159,123,0.35); --btn-b: rgba(130,43,255,0.50); }

.ico-svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:rgba(255,255,255,0.92);
  filter:drop-shadow(0 0 12px rgba(255,43,79,0.18));
  transition:transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
  opacity:0.95;
}

.social-btn:hover .ico-svg{
  transform:translateY(-0.5px) scale(1.06);
  filter:drop-shadow(0 0 16px rgba(255,43,79,0.28));
}

.discord-ico{
  width:16px;
  height:12px;
  flex-shrink:0;
  position:relative;
  border-radius:7px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
  opacity:0.95;
  transform:translateY(-0.3px);
  filter:drop-shadow(0 0 12px rgba(88,101,242,0.18));
  transition:transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.discord-ico::before{
  content:"";
  position:absolute;
  left:4px;
  top:4.4px;
  width:2.2px;
  height:2.2px;
  border-radius:50%;
  background:#050509;
  box-shadow:6.2px 0 0 #050509;
  opacity:0.95;
}

.discord-ico::after{
  content:"";
  position:absolute;
  left:3px;
  top:6px;
  width:10px;
  height:6px;
  border:2px solid #050509;
  border-top:0;
  border-left:0;
  border-right:0;
  border-radius:0 0 999px 999px;
  opacity:0.72;
}

.social-btn:hover .discord-ico{
  transform:translateY(-0.8px) scale(1.06);
  filter:drop-shadow(0 0 16px rgba(88,101,242,0.34));
}

.projects{ position:relative; display:inline-flex; }

.chev{
  width:10px; height:10px;
  position:relative;
  opacity:0.85;
  transform:translateY(0.5px);
  margin-left:2px;
}
.chev::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,0.85);
  border-bottom:2px solid rgba(255,255,255,0.85);
  transform:rotate(45deg);
  border-radius:1px;
}

.projects.open .chev{ transform:translateY(0.5px) rotate(180deg); }

.projects-menu{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(10px);
  width:min(320px, 86vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.06) 0, transparent 55%),
    rgba(8,8,18,0.96);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.92),
    0 0 34px rgba(255,43,79,0.14);
  padding:10px;
  opacity:0;
  pointer-events:none;
  z-index:9999;
  transition:opacity 0.18s ease, transform 0.18s ease;
  overflow:hidden;
}

.projects-menu::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid transparent;
  background:linear-gradient(120deg, rgba(255,43,79,0.32), transparent, rgba(130,43,255,0.30)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events:none;
  opacity:0.75;
}

.projects.open .projects-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.project-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  text-decoration:none;
  color:rgba(255,255,255,0.88);
  transition:transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  overflow:hidden;
}

.project-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,43,79,0.45);
  box-shadow:0 0 0 1px rgba(255,43,79,0.18), 0 14px 28px rgba(0,0,0,0.55);
}

.project-logo{
  width:28px;
  height:28px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.25);
  box-shadow:0 12px 26px rgba(0,0,0,0.65);
}
.project-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.02);
}

.project-text{
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.06em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.project-chip{
  margin-left:auto;
  font-size:0.64rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.65);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
}

.player-inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
}

.player-shell{
  position:relative;
  border-radius:16px;
  padding:8px 12px;
  background:rgba(8,8,18,0.98);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.95),
    0 0 28px rgba(255,43,79,0.2);
  border:1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  transition:transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.player.is-playing .player-shell{ animation:playerGlow 4.5s ease-in-out infinite; }

@keyframes playerGlow{
  0%{ transform:translateY(0) scale(1); box-shadow:0 18px 40px rgba(0,0,0,0.95), 0 0 28px rgba(255,43,79,0.25); }
  50%{ transform:translateY(-1px) scale(1.01); box-shadow:0 22px 48px rgba(0,0,0,1), 0 0 36px rgba(255,43,79,0.4); }
  100%{ transform:translateY(0) scale(1); box-shadow:0 18px 40px rgba(0,0,0,0.95), 0 0 28px rgba(255,43,79,0.25); }
}

.player-cover{
  width:48px;
  height:48px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 12px 28px rgba(0,0,0,0.7);
  transform-origin:center;
  transition:transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}

.player-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.player.is-playing .player-cover{
  transform:translateY(-1px) scale(1.05) rotate(-0.8deg);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.95),
    0 0 30px rgba(255,43,79,0.4);
  filter:saturate(1.15);
}

.player-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:1;
}

.track-title{
  font-size:0.98rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.track-artist{
  font-size:0.82rem;
  margin-top:2px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.track-artist span{ color:var(--accent-soft); font-weight:500; }

.player-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.icon-btn, .play-btn{
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.16s ease-out, filter 0.16s ease-out, box-shadow 0.16s ease-out;
}

.icon-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.9);
  box-shadow:0 10px 22px rgba(0,0,0,0.75);
}

.icon-btn:hover{ transform:translateY(-1px) scale(1.04); filter:saturate(1.1); }
.icon-btn:active{ transform:translateY(1px) scale(0.96); }
.icon-btn svg{ width:18px; height:18px; }

.play-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%, #ffe6ee 0, #ff2b4f 40%, #b00940 100%);
  box-shadow:
    0 0 22px rgba(255,43,79,0.9),
    0 12px 30px rgba(0,0,0,0.85);
  color:#050509;
  overflow:hidden;
  isolation:isolate;
  position:relative;
}

.play-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 0%, rgba(255,255,255,0.7), transparent 60%);
  opacity:0;
  transform:scale(0.4);
  transition:opacity 0.22s ease, transform 0.22s ease;
}

.play-btn:hover::before{ opacity:1; transform:scale(1); }

.play-icon{ width:16px; height:16px; z-index:1; }

.play-icon .icon-play,
.play-icon .icon-pause{
  transition:opacity 0.18s ease, transform 0.18s ease;
  transform-origin:center;
}

.icon-play{ opacity:1; transform:scale(1); }
.icon-pause{ opacity:0; transform:scale(0.6); }

.player.is-playing .icon-play{ opacity:0; transform:scale(0.6); }
.player.is-playing .icon-pause{ opacity:1; transform:scale(1); }

.progress-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  margin-left:8px;
}

.progress{
  width:170px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  box-shadow:inset 0 0 6px rgba(0,0,0,0.8);
}

.progress::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,0.2), transparent, rgba(255,255,255,0.3), transparent);
  opacity:0;
  transform:translateX(-100%);
  transition:opacity 0.3s ease;
}

.player.is-playing .progress::before{
  opacity:0.8;
  animation:shimmer 3s linear infinite;
}

@keyframes shimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

.progress-fill{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform:scaleX(0);
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(90deg, #ff2b4f, #ff9f7b, #ff2b4f);
  box-shadow:0 0 14px rgba(255,43,79,0.95);
  transition:transform 0.08s linear;
}

.progress-fill::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:12px;
  height:12px;
  border-radius:999px;
  transform:translate(50%,-50%);
  background:radial-gradient(circle, #ffffff, #ff2b4f);
  box-shadow:
    0 0 16px rgba(255,255,255,0.9),
    0 0 26px rgba(255,43,79,0.9);
}

.eq{
  display:inline-flex;
  gap:2px;
  align-items:flex-end;
  height:10px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}

.player.is-playing .eq{ opacity:1; transform:translateY(0); }

.eq-bar{
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg, #ff9f7b, #ff2b4f);
  animation:eqBounce 0.7s ease-in-out infinite alternate;
  transform-origin:bottom;
}

.eq-bar:nth-child(1){ height:4px; animation-delay:0s; }
.eq-bar:nth-child(2){ height:7px; animation-delay:0.12s; }
.eq-bar:nth-child(3){ height:10px; animation-delay:0.24s; }
.eq-bar:nth-child(4){ height:7px; animation-delay:0.36s; }

@keyframes eqBounce{
  0%{ transform:scaleY(0.4); }
  100%{ transform:scaleY(1); }
}

@keyframes playerIn{
  from{ transform:translateY(100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.playlist-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(10px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:30;
}

.playlist-overlay.open{ display:flex; }

/*
  Mobile/Safari fix:
  Иногда CSS-анимация у .playlist-panel не стартует повторно после закрытия/открытия,
  и остаётся только блюр без самого меню (opacity:0).
  Принудительно показываем панель, когда оверлей открыт.
*/
.playlist-overlay.open .playlist-panel{
  transform:translateY(0);
  opacity:1;
  /* анимация применяется только когда оверлей открыт — так она корректно срабатывает каждый раз */
  animation:panelIn 0.22s ease-out both;
}

.playlist-panel{
  width:min(760px, calc(100% - 18px));
  margin:0 0 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.05) 0, transparent 45%),
    rgba(8,8,18,0.96);
  box-shadow:0 24px 70px rgba(0,0,0,0.92), 0 0 40px rgba(255,43,79,0.14);
  overflow:hidden;
  transform:translateY(18px);
  opacity:0;
}

@keyframes panelIn{
  from{ transform:translateY(18px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}

.playlist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.playlist-title{
  font-size:0.82rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  user-select:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.playlist-title b{
  color:rgba(255,255,255,0.92);
  font-weight:700;
}

.close-btn{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.16s ease;
}

.close-btn:hover{ transform:translateY(-1px) scale(1.04); }
.close-btn:active{ transform:translateY(1px) scale(0.96); }
.close-btn svg{ width:18px; height:18px; color:rgba(255,255,255,0.9); }

.playlist-list{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:min(52vh, 420px);
  overflow:auto;
}

.track-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.track-item:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.18);
}

.track-item.active{
  border-color:rgba(255,43,79,0.55);
  box-shadow:0 0 0 1px rgba(255,43,79,0.25), 0 10px 26px rgba(0,0,0,0.6);
}

.track-item-cover{
  width:44px;
  height:44px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.2);
}

.track-item-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.track-item-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
}

.track-item-title{
  font-size:0.92rem;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.track-item-artist{
  font-size:0.78rem;
  color:rgba(255,255,255,0.65);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.track-item-artist span{ color:var(--accent-soft); }

.track-item-hint{
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-left:auto;
  white-space:nowrap;
  user-select:none;
}

@media (max-width:480px){
  .player-shell{
    padding:8px 10px;
    gap:8px;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .player-cover{ width:40px; height:40px; }

  .track-title{ font-size:0.86rem; }
  .track-artist{ font-size:0.78rem; }

  .player-info{
    flex:1 1 calc(100% - 56px);
    min-width:0;
  }

  .player-controls{
    margin-left:0;
    margin-top:6px;
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  .progress-block{ flex:1; align-items:flex-start; width:100%; }
  .progress{ width:100%; }

  .socialbar{ gap:8px; }
  .social-btn{ width:calc(50% - 6px); justify-content:center; padding:10px 12px; }
  .projects{ width:calc(50% - 6px); }
  .projects .social-btn{ width:100%; }
  .projects-menu{ width:min(340px, 92vw); }
}

@media (max-width:768px){
  body::before,
  .nebula{
    display:none;
  }
}