.party-intro {
  color-scheme: dark;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: auto;
  isolation: isolate;
  animation: intro-arrive .45s ease both;
}
.party-intro::backdrop { background: #10091c; backdrop-filter: none; }
.intro-atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.intro-atmosphere::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center,transparent,#10091c99); }
.intro-orb { position: absolute; width: 55vw; height: 55vw; border-radius: 50%; filter: blur(90px); opacity: .35; animation: intro-drift 6s ease-in-out alternate infinite; }
.orb-pink { background: #cf258b; top: -28vw; left: -12vw; }
.orb-blue { background: #6543d3; bottom: -35vw; right: -10vw; animation-delay: -3s; }
.intro-grid { position: absolute; inset: 65% -50% -65%; background-image: linear-gradient(#b182d333 1px,transparent 1px),linear-gradient(90deg,#b182d333 1px,transparent 1px); background-size: 65px 65px; transform: perspective(450px) rotateX(60deg); mask-image: linear-gradient(transparent,#000); }
.intro-star { position: absolute; color: #ffd4ef; text-shadow: 0 0 30px #ff72ca; animation: intro-sparkle 3s ease-in-out infinite alternate; }
.star-a { left: 18%; top: 22%; font-size: 55px; }
.star-b { right: 19%; top: 31%; font-size: 80px; animation-delay: -.8s; }
.star-c { right: 28%; bottom: 18%; font-size: 30px; animation-delay: -1.3s; }
.star-d { left: 23%; bottom: 26%; font-size: 40px; animation-delay: -2s; }
.intro-skip { position: absolute; top: 25px; right: 28px; z-index: 2; border: 1px solid #d3bbec66; border-radius: 999px; padding: 12px 20px; font-size: 15px; font-weight: 700; color: #f0e7fa; background: #ffffff0b; }
.intro-skip:hover { background: #ffffff20; }
.intro-content { min-height: 100%; padding: 75px 24px 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.intro-connection { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; letter-spacing: 2px; font-weight: 700; color: #e1d1ed; animation: intro-rise .6s ease both; }
.intro-connection > span { background: #b5ff00; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 18px #b5ff0070; }
.intro-cd { position: relative; width: 100px; height: 100px; flex-shrink: 0; margin: 24px 0 18px; border-radius: 50%; background: conic-gradient(#e4deef,#97d6df,#b67dc4,#ffb6d8,#ffeec8,#9cd4c5,#b39bdc,#e4deef); box-shadow: inset 0 0 0 2px #ffffffa0,0 0 65px #db8cf344; animation: intro-disc 5.6s ease-in-out both; }
.intro-cd::after { content: ''; position: absolute; inset: 40px; background: #1c102b; border: 3px solid #e7d9f4; border-radius: 50%; }
.intro-cd-label { position: absolute; top: 16px; left: 0; right: 0; font-size: 7px; letter-spacing: 2px; line-height: 1.1; color: #483257; font-weight: 800; }
.intro-cd-label b { font-size: 13px; }
.intro-eyebrow { color: #e5cce7; letter-spacing: 3px; font-size: 12px; font-weight: 700; margin: 0 0 12px; animation: intro-rise .65s .25s ease both; }
.party-intro #intro-title { font-family: 'Trebuchet MS','Segoe UI',sans-serif; font-size: clamp(54px,8vw,104px); font-weight: 900; line-height: 1.02; letter-spacing: -.055em; margin: 0 0 20px; color: #fff; animation: intro-rise .8s .4s ease both; }
.party-intro #intro-title span { color: #ff8dd1; text-shadow: 0 0 55px #ff50b04d; }
.intro-description { color: #eadff3; font-size: 18px; font-weight: 600; line-height: 1.7; margin: 0 0 24px; animation: intro-rise .8s .65s ease both; }
.intro-loading { width: 230px; height: 6px; border-radius: 99px; background: #ffffff20; overflow: hidden; }
.intro-loading > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ce8eff,#ff8dce,#b5ff00); transform-origin: left; animation: intro-load 5.3s linear both; }
.intro-online { margin: 13px 0 21px; color: #eadff3; font-size: 14px; font-weight: 600; animation: intro-rise .8s .9s ease both; }
.intro-online span { color: #b5ff00; margin-right: 6px; }
.intro-enter { display: flex; align-items: center; gap: 28px; padding: 15px 27px; border-radius: 999px; color: #21112c; background: #ffa0d7; font-size: 15px; font-weight: 800; box-shadow: 0 10px 45px #ff55b533; animation: intro-rise .65s 1.1s ease both; }
.intro-enter:hover { background: #ffc1e6; }
.intro-sound-note { color: #cfc0de; font-size: 12px; margin: 12px 0 0; }
.intro-footer { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: #c7b8d6; font-size: 10px; letter-spacing: 2px; pointer-events: none; }
.party-intro.intro-leaving { animation: intro-exit .4s ease both; pointer-events: none; }
@keyframes intro-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-disc { from { opacity: 0; transform: scale(.65) rotate(-65deg); } 18% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(35deg); } }
@keyframes intro-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-drift { to { transform: translate(10%,15%) scale(1.15); } }
@keyframes intro-sparkle { from { opacity: .35; transform: translateY(0) scale(.9); } to { opacity: .9; transform: translateY(-14px) scale(1.05); } }
@keyframes intro-exit { to { opacity: 0; transform: scale(1.035); } }
@media (max-width: 560px) {
  .intro-content { padding: 85px 22px 65px; }
  .intro-skip { top: 16px; right: 16px; padding: 10px 16px; font-size: 14px; }
  .intro-connection { font-size: 10px; letter-spacing: 1px; }
  .intro-eyebrow { font-size: 11px; letter-spacing: 2px; }
  .intro-description { font-size: 16px; }
  .intro-cd { width: 80px; height: 80px; margin-block: 20px 16px; }
  .intro-cd::after { inset: 31px; }
  .intro-cd-label { top: 12px; font-size: 6px; }
  .star-a { left: 6%; top: 26%; font-size: 33px; }
  .star-b { right: 4%; top: 45%; font-size: 40px; }
  .star-c,.star-d { display: none; }
  .intro-orb { width: 100vw; height: 100vw; filter: blur(65px); }
  .intro-footer { font-size: 8px; letter-spacing: 1px; }
}
@media (max-height: 740px) {
  .intro-content { padding-block: 65px 55px; }
  .intro-cd { width: 64px; height: 64px; margin-block: 14px; }
  .intro-cd::after { inset: 25px; border-width: 2px; }
  .intro-cd-label { top: 8px; font-size: 5px; }
  .intro-cd-label b { font-size: 9px; }
  .party-intro #intro-title { font-size: clamp(46px,7vw,76px); margin-bottom: 14px; }
  .intro-description { margin-bottom: 16px; }
  .intro-online { margin-block: 10px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .party-intro, .party-intro * { animation: none !important; transition: none !important; }
  .intro-grid, .intro-star, .intro-orb { display: none; }
}