/* TuneTune opening scene — lightweight CSS-only music player intro. */
body.tune-intro-active{overflow:hidden}
html.tune-intro-skip body.tune-intro-active{overflow:auto}
html.tune-intro-skip .tune-site-intro{display:none!important}
body.tune-intro-active .site-header,
body.tune-intro-active .hero-copy,
body.tune-intro-active .hero-visual{animation-play-state:paused!important}

.tune-site-intro{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%,rgba(22,185,255,.18),transparent 31%),
    radial-gradient(circle at 68% 28%,rgba(124,92,255,.09),transparent 25%),
    linear-gradient(145deg,#fbfeff 0%,#eef9ff 54%,#e8f7ff 100%);
  animation:tuneIntroLeave .32s 1.14s cubic-bezier(.65,0,.35,1) forwards;
  contain:layout paint style;
}
.tune-site-intro::before,
.tune-site-intro::after{
  content:"";
  position:absolute;
  left:50%;
  top:44%;
  width:430px;
  height:430px;
  margin:-215px 0 0 -215px;
  border:1px solid rgba(22,185,255,.14);
  border-radius:50%;
  opacity:0;
  animation:tuneIntroWave 1.05s .05s ease-out both;
}
.tune-site-intro::after{animation-delay:.20s}
.tune-intro-card{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  width:min(360px,calc(100vw - 32px));
  padding:18px 22px 16px;
  text-align:center;
  animation:tuneIntroContent .42s cubic-bezier(.2,.8,.2,1) both;
}
.tune-intro-emblem{
  position:relative;
  width:318px;
  max-width:100%;
  height:208px;
  display:grid;
  place-items:center;
}
.tune-intro-logo-wrap{
  position:relative;
  z-index:4;
  display:grid;
  place-items:center;
  width:104px;
  height:104px;
}
.tune-intro-logo{
  width:96px;
  height:96px;
  border-radius:28px;
  object-fit:cover;
  box-shadow:0 18px 44px rgba(16,126,178,.18);
  animation:tuneIntroLogo .55s cubic-bezier(.2,.9,.2,1.12) both;
}
.tune-intro-ring{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:154px;
  height:154px;
  margin:-77px 0 0 -77px;
  border:1px solid rgba(22,185,255,.28);
  border-radius:50%;
  animation:tuneIntroRing .58s .02s cubic-bezier(.2,.8,.2,1) both;
}
.tune-intro-ring-two{
  width:205px;
  height:205px;
  margin:-102.5px 0 0 -102.5px;
  border-style:dashed;
  border-color:rgba(124,92,255,.14);
  animation-delay:.08s;
}
.tune-intro-eq{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:-15px;
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:22px;
  transform:translateX(-50%);
}
.tune-intro-eq span{
  display:block;
  width:4px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(180deg,#7c5cff,#16b9ff);
  transform-origin:center bottom;
  animation:tuneIntroEq .32s ease-in-out alternate 3;
}
.tune-intro-eq span:nth-child(2){animation-delay:.06s}
.tune-intro-eq span:nth-child(3){animation-delay:.12s}
.tune-intro-eq span:nth-child(4){animation-delay:.03s}
.tune-intro-eq span:nth-child(5){animation-delay:.09s}

.tune-intro-feature{
  position:absolute;
  z-index:6;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:35px;
  padding:7px 10px;
  border:1px solid rgba(22,185,255,.17);
  border-radius:13px;
  color:#18364a;
  background:rgba(255,255,255,.94);
  box-shadow:0 9px 22px rgba(18,100,140,.09);
  opacity:0;
  transform:translateY(8px) scale(.95);
  animation:tuneIntroFeature .22s cubic-bezier(.2,.8,.2,1) forwards;
}
.tune-intro-feature b{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  flex:0 0 auto;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(135deg,#0d9fdc,#58d2ff);
  font:900 12px/1 Nunito,sans-serif;
}
.tune-intro-feature em{font:900 10px/1 Nunito,sans-serif;font-style:normal;white-space:nowrap}
.tune-intro-feature-music{left:0;top:24px;animation-delay:.22s}
.tune-intro-feature-radio{right:0;top:24px;animation-delay:.34s}
.tune-intro-feature-podcast{left:2px;bottom:20px;animation-delay:.46s}
.tune-intro-feature-queue{right:0;bottom:20px;animation-delay:.58s}

.tune-intro-title{
  margin-top:0;
  color:#17233a;
  font:900 31px/1 Nunito,sans-serif;
  letter-spacing:-1px;
}
.tune-intro-title span{color:#16aeea}
.tune-intro-caption{
  margin-top:7px;
  color:#6b7b91;
  font:850 10px/1.3 Nunito,sans-serif;
  letter-spacing:.64px;
  text-transform:uppercase;
}
.tune-intro-player{
  display:grid;
  grid-template-columns:30px 1fr 30px;
  align-items:center;
  gap:8px;
  width:230px;
  margin-top:13px;
  color:#8090a4;
  font:800 9px/1 Nunito,sans-serif;
}
.tune-intro-track{
  position:relative;
  height:4px;
  overflow:visible;
  border-radius:999px;
  background:rgba(22,185,255,.14);
}
.tune-intro-track-fill{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#7c5cff,#16b9ff);
  transform:scaleX(0);
  transform-origin:left;
  animation:tuneIntroTrack .94s .12s cubic-bezier(.2,.7,.2,1) forwards;
}
.tune-intro-track-dot{
  position:absolute;
  z-index:2;
  left:0;
  top:50%;
  width:9px;
  height:9px;
  margin:-4.5px 0 0 -4.5px;
  border:2px solid #fff;
  border-radius:50%;
  background:#16b9ff;
  box-shadow:0 2px 8px rgba(22,185,255,.35);
  animation:tuneIntroDot .94s .12s cubic-bezier(.2,.7,.2,1) forwards;
}
.tune-intro-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:11px;
  color:#0d95cd;
  font:900 11px/1 Nunito,sans-serif;
  opacity:0;
  transform:translateY(4px);
  animation:tuneIntroState .20s .87s ease-out forwards;
}
.tune-intro-state::before{
  content:"▶";
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:7px;
  color:#fff;
  background:linear-gradient(135deg,#7c5cff,#16b9ff);
  font-size:8px;
  box-shadow:0 5px 14px rgba(22,185,255,.20);
}

html[data-theme="dark"] .tune-site-intro{
  background:
    radial-gradient(circle at 50% 42%,rgba(56,189,248,.20),transparent 31%),
    radial-gradient(circle at 68% 28%,rgba(124,92,255,.12),transparent 25%),
    linear-gradient(145deg,#0b1422 0%,#0f1d30 56%,#10263a 100%);
}
html[data-theme="dark"] .tune-intro-title{color:#eef7ff}
html[data-theme="dark"] .tune-intro-title span{color:#67d4ff}
html[data-theme="dark"] .tune-intro-caption{color:#a9bad0}
html[data-theme="dark"] .tune-intro-feature{
  color:#e8f4ff;
  border-color:rgba(56,189,248,.20);
  background:rgba(20,34,56,.95);
  box-shadow:0 9px 22px rgba(0,0,0,.18);
}
html[data-theme="dark"] .tune-intro-player{color:#91a8bf}
html[data-theme="dark"] .tune-intro-track{background:rgba(56,189,248,.16)}
html[data-theme="dark"] .tune-intro-track-dot{border-color:#132238}
html[data-theme="dark"] .tune-intro-state{color:#7ddcff}

@keyframes tuneIntroContent{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tuneIntroLogo{0%{opacity:0;transform:scale(.72) rotate(-5deg)}72%{opacity:1;transform:scale(1.045) rotate(1deg)}100%{opacity:1;transform:scale(1)}}
@keyframes tuneIntroRing{from{opacity:0;transform:scale(.72) rotate(-7deg)}to{opacity:1;transform:scale(1)}}
@keyframes tuneIntroFeature{to{opacity:1;transform:none}}
@keyframes tuneIntroEq{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
@keyframes tuneIntroTrack{to{transform:scaleX(1)}}
@keyframes tuneIntroDot{to{left:100%}}
@keyframes tuneIntroState{to{opacity:1;transform:none}}
@keyframes tuneIntroWave{0%{opacity:0;transform:scale(.48)}35%{opacity:.8}100%{opacity:0;transform:scale(1)}}
@keyframes tuneIntroLeave{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden;transform:scale(1.008)}}

@media(max-width:420px){
  .tune-intro-card{padding-inline:12px}
  .tune-intro-emblem{width:292px;height:198px}
  .tune-intro-logo{width:88px;height:88px;border-radius:25px}
  .tune-intro-feature{padding:6px 8px;gap:5px}
  .tune-intro-feature b{width:21px;height:21px;font-size:11px}
  .tune-intro-feature em{font-size:9px}
  .tune-intro-title{font-size:29px}
}

@media(prefers-reduced-motion:reduce){
  .tune-site-intro{display:none!important}
  body.tune-intro-active{overflow:auto}
}