/* Cute Monsters: bubbles bob, stars twinkle, the door's glow breathes and Pip hops. The classic
   opening ("closet") is the fallback if the film can't load: the land floats in, the bubbles rise and
   the pals bounce up. Only transform and opacity animate; reduced motion is still. */
[data-theme="monsters"] { --mo-dots: radial-gradient(circle, #b99aff 0 3px, transparent 3.5px) 0 0 / 16px 8px, radial-gradient(circle, #7fe0b8 0 3px, transparent 3.5px) 8px 0 / 16px 8px; }
[data-theme="monsters"] .hero-art .mo-bub { animation: mo-bob 4.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.9s); }
[data-theme="monsters"] .hero-art .mo-tw { animation: mo-tw 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.5s); }
[data-theme="monsters"] .hero-art .mo-gl { animation: mo-gl 3s ease-in-out infinite alternate; }
[data-theme="monsters"] .hero-art .mo-hop { animation: mo-hop 2.2s ease-in-out infinite; }
[data-theme="monsters"] .card { border-radius: 28px; box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(185, 154, 255, .3); }
[data-theme="monsters"] .btn { border-radius: 999px; }
[data-theme="monsters"] .title { letter-spacing: .005em; text-shadow: 0 2px 0 rgba(255, 255, 255, .8), 0 0 18px rgba(255, 156, 200, .4); }
[data-theme="monsters"] .eyebrow { color: var(--ink); letter-spacing: .08em; }
[data-theme="monsters"] .divider::before, [data-theme="monsters"] .divider::after { background: var(--mo-dots); height: 8px; border-radius: 0; }
[data-theme="monsters"] .btn, [data-theme="monsters"] .card h2, [data-theme="monsters"] .title, [data-theme="monsters"] .eyebrow { overflow-wrap: anywhere; }

/* the kid's photo: the circle becomes a soap bubble with a candy rim */
[data-theme="monsters"] .kp-circle .kp-win { box-shadow: 0 0 0 3px #fffdfb, 0 0 0 calc(var(--kp-w) * .05) #b99aff, 0 0 0 calc(var(--kp-w) * .075) #7fe0b8, 0 0 calc(var(--kp-w) * .2) calc(var(--kp-w) * .03) rgba(255, 156, 200, .45); }

/* the Monster pass: candy paper, a polka-dot stub, a bubbly perforation */
[data-theme="monsters"] .ticket { background: linear-gradient(115deg, #fffdfb 0%, #f1eaff 50%, #e6fff4 100%); color: #2b1d4a; border-radius: 20px;
  box-shadow: 0 12px 26px rgba(80, 50, 140, .16), inset 0 0 0 1.5px rgba(185, 154, 255, .5); }
[data-theme="monsters"] .ticket .t-main { border-right: 3px dotted rgba(255, 156, 200, .8); }
[data-theme="monsters"] .ticket small { color: #6a3fd0; letter-spacing: .2em; font-weight: 800; }
[data-theme="monsters"] .ticket b { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 700; color: #2b1d4a; }
[data-theme="monsters"] .ticket .t-stub { background: radial-gradient(circle, #ffe066 0 22%, transparent 24%) 0 0 / 18px 18px, radial-gradient(circle, #fff 0 16%, transparent 18%) 9px 9px / 18px 18px, linear-gradient(180deg, #ffb3d6, #ff9cc8); }

/* the classic opening (only if the film can't load) */
[data-theme="monsters"] .op-art svg { overflow: visible; }
[data-theme="monsters"] .op-card { background: rgba(255, 253, 251, .94); color: var(--cardInk); box-shadow: 0 18px 50px rgba(80, 50, 140, .22); }
[data-theme="monsters"] .op-closet .op-line { color: #2b1d4a; text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 255, 255, .9); }
[data-theme="monsters"] .op-closet.op-run .mo-bub { animation: mo-rise 1.6s calc(.6s + var(--i) * .15s) cubic-bezier(.22, 1, .36, 1) both, mo-bob 4.2s 2.4s ease-in-out infinite alternate; }
[data-theme="monsters"] .op-art { transform: scale(1.35); transform-origin: 50% 70%; transition: opacity 1.2s ease, transform 5s cubic-bezier(.33, .05, .2, 1); }
[data-theme="monsters"] .op-pal { transform: translateY(40vh) scale(.6); opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
[data-theme="monsters"] .op-run .op-art, [data-theme="monsters"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="monsters"] .op-final .op-art, [data-theme="monsters"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="monsters"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: mo-blink 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s - .6s); }
@media (max-aspect-ratio: 4/5) { [data-theme="monsters"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }

/* Party TV */
[data-theme="monsters"].tv-bd { opacity: .95; }
[data-theme="monsters"].tv-bd .mo-bub { animation: mo-bob 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.2s); }

@keyframes mo-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes mo-tw { from { opacity: .35; } to { opacity: 1; } }
@keyframes mo-gl { from { opacity: .82; } to { opacity: 1; } }
@keyframes mo-hop { 0%, 55%, 100% { transform: translateY(0); } 68% { transform: translateY(-6px); } 80% { transform: translateY(0); } 88% { transform: translateY(-2px); } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(40px) scale(.4); } }
@keyframes mo-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="monsters"] .hero-art *, [data-theme="monsters"] .critter .cr-eye, [data-theme="monsters"] .op-art *, [data-theme="monsters"].tv-bd * { animation: none !important; }
}