/* Pop Star Concert: glow sticks sway, the spotlights sweep, the LED wall shimmers.
   The opening ("concert"): the house lights go down, the glow sticks come up, the curtain rises on
   an empty mic, the spotlights snap on, the kid's name flashes onto the LED wall and the cannons fire.
   Only transform and opacity animate; reduced motion shows the finished stage, still. */
[data-theme="popstar"] .hero-art .ps-show, [data-theme="popstar"] .hero-art .ps-under { display: none; }
[data-theme="popstar"] .hero-sky .hero-art { overflow: visible; }
[data-theme="popstar"] .hero-art .ps-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: ps-sway 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.55s); }
[data-theme="popstar"] .hero-art .ps-beam { transform-box: fill-box; transform-origin: 50% 0; animation: ps-sweep 7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
[data-theme="popstar"] .hero-art .twinkle { animation: ps-tw 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
[data-theme="popstar"] .hero-art .ps-foot, [data-theme="popstar"] .hero-art .ps-led { animation: ps-tw 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
[data-theme="popstar"] .card { border-radius: 22px; }
[data-theme="popstar"] .btn { border-radius: 999px; letter-spacing: .01em; }
[data-theme="popstar"] .title { letter-spacing: -.01em; text-shadow: 0 0 22px rgba(255, 79, 174, .55), 0 3px 0 rgba(0, 0, 0, .3); }
[data-theme="popstar"] .eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: .86rem; }

/* the opening: the stage fills the screen, the crowd fills the floor */
[data-theme="popstar"] .op-art svg { overflow: visible; }
[data-theme="popstar"] .op-art .ps-show, [data-theme="popstar"] .op-art .ps-under { display: inline; }
[data-theme="popstar"] .op-art .ps-drop, [data-theme="popstar"] .op-art .ps-house, [data-theme="popstar"] .op-art .ps-conf { opacity: 0; }
[data-theme="popstar"] .op-concert .op-line { color: var(--ink); text-shadow: 0 2px 16px rgba(20, 18, 56, .9); }
[data-theme="popstar"] .op-card { background: rgba(20, 18, 56, .72); box-shadow: 0 0 0 1px rgba(185, 162, 255, .35), 0 20px 60px rgba(255, 79, 174, .25); }
[data-theme="popstar"] .op-concert.op-run .ps-house { animation: ps-house 1.3s .2s ease-in both; }
[data-theme="popstar"] .op-concert.op-run .ps-drop { transform-box: fill-box; animation: ps-lift 1.3s 2.3s cubic-bezier(.6, 0, .2, 1) both; }
[data-theme="popstar"] .op-concert.op-run .ps-stick { animation: ps-up .7s calc(1.2s + var(--i) * .09s) cubic-bezier(.2, .9, .3, 1.2) both; }
[data-theme="popstar"] .op-concert.op-run .ps-beams { animation: ps-snap .7s 3.5s linear both; }
[data-theme="popstar"] .op-concert.op-run .ps-pool { animation: ps-snap .7s 3.55s linear both; }
[data-theme="popstar"] .op-concert.op-run .ps-name { transform-box: fill-box; transform-origin: center; animation: ps-flash 1s 4s ease-out both; }
[data-theme="popstar"] .op-concert.op-run .ps-conf { transform-box: fill-box; transform-origin: center; animation: ps-pop 1.8s 4.35s cubic-bezier(.15, .7, .3, 1) both; }

/* film: the camera opens close on the curtain and pulls back to the whole arena; the band rides up
   on the stage lift; the squad blinks now and then. */
[data-theme="popstar"] .op-art { transform: scale(1.5); transform-origin: 50% 58%; transition: opacity 1.2s ease, transform 5.4s cubic-bezier(.33, .05, .2, 1); }
[data-theme="popstar"] .op-pal { transform: translateY(42vh); opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.25, 1.3, .5, 1); }
[data-theme="popstar"] .op-run .op-art, [data-theme="popstar"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="popstar"] .op-final .op-art, [data-theme="popstar"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="popstar"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: ps-bounce .5s calc(4.5s + var(--i) * .12s) ease-out both; }
[data-theme="popstar"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: ps-blink 5.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s - .9s); }
@media (max-aspect-ratio: 4/5) { [data-theme="popstar"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }

/* Party TV backdrop */
[data-theme="popstar"].tv-bd .ps-beam { transform-box: fill-box; transform-origin: 50% 0; animation: ps-sweep 9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2s); }
[data-theme="popstar"].tv-bd .ps-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: ps-sway 2.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.5s); }

@keyframes ps-sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes ps-sweep { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes ps-tw { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ps-house { from { opacity: .5; } to { opacity: 0; } }
@keyframes ps-lift { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateY(-106%); } }
@keyframes ps-up { from { opacity: 0; transform: translateY(26px); } }
@keyframes ps-snap { 0% { opacity: 0; } 18% { opacity: 1; } 30% { opacity: .15; } 46%, 100% { opacity: 1; } }
@keyframes ps-flash { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; transform: scale(1.08); } 50% { opacity: .35; } 65% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ps-pop { 0% { opacity: 0; transform: none; } 5% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes ps-bounce { 0%, 100% { transform: none; } 45% { transform: translateY(-12px) scale(.96, 1.05); } 75% { transform: scale(1.05, .95); } }
@keyframes ps-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="popstar"] .hero-art *, [data-theme="popstar"] .critter .cr-eye, [data-theme="popstar"] .op-pal svg, [data-theme="popstar"].tv-bd * { animation: none !important; }
}