/* Mad Science Lab: the beakers glow and breathe, bubbles rise in the flasks, the arc flickers between the
   electrodes, the slime drips sway. The fallback opening ("madlab", only if the film can't load): the
   lights flicker on, the arc zaps and the element tiles pop in. Only transform and opacity animate. */
[data-theme="madlab"] { --ml-slime: #7dff4f; --ml-violet: #b388ff; --ml-cyan: #38e1ff; --ml-hazard: #ffd23f; }
[data-theme="madlab"] .title, [data-theme="madlab"] .card h2, [data-theme="madlab"] .divider, [data-theme="madlab"] .age-badge b { font-family: "Chakra Petch", "Space Grotesk", sans-serif; font-weight: 700; font-synthesis: none; letter-spacing: .01em; }
[data-theme="madlab"] .title { text-shadow: 0 0 20px rgba(125, 255, 79, .4), 0 3px 0 rgba(0, 0, 0, .4); }
[data-theme="madlab"] .eyebrow { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
[data-theme="madlab"] .card { border-radius: 16px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(125, 255, 79, .35); }
[data-theme="madlab"] .btn { border-radius: 12px; font-weight: 700; letter-spacing: .02em; }
[data-theme="madlab"] .divider::before, [data-theme="madlab"] .divider::after { height: 2px; opacity: .9; background: linear-gradient(90deg, transparent, var(--ml-slime)); }
[data-theme="madlab"] .divider::after { background: linear-gradient(90deg, var(--ml-slime), transparent); }

/* hero ambience */
[data-theme="madlab"] .hero-art .ml-hglow { animation: mli-glow 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
[data-theme="madlab"] .hero-art .ml-hbub { animation: mli-bub 2.4s ease-in infinite; animation-delay: calc(var(--i) * -.5s); }
[data-theme="madlab"] .hero-art .ml-harc { animation: mli-zap .9s steps(2) infinite; }
[data-theme="madlab"] .hero-art .ml-harc2 { animation-delay: -.45s; }
[data-theme="madlab"] .hero-art .ml-hdrip { transform-box: fill-box; transform-origin: 50% 0; animation: mli-drip 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }

/* the kid's photo: the glow ring becomes a specimen porthole (Kid Photo hook, frame "circle") */
[data-theme="madlab"] .kp-circle .kp-win { box-shadow: 0 0 0 3px var(--ml-slime), 0 0 0 calc(var(--kp-w) * .06) rgba(125, 255, 79, .14), 0 0 calc(var(--kp-w) * .26) calc(var(--kp-w) * .05) rgba(125, 255, 79, .35); }

/* the pass: a lab badge, dark glass with a hazard stripe and a slime rule */
[data-theme="madlab"] .ticket { background: linear-gradient(180deg, #1a1433 0%, #0b0f1a 80%), #0b0f1a; color: #eafff0; border-radius: 12px;
  box-shadow: 0 12px 26px rgba(5, 8, 16, .45), inset 0 0 0 2px rgba(125, 255, 79, .7), inset 0 -8px 0 #ffd23f; }
[data-theme="madlab"] .ticket .t-main { border-right: 2px dashed rgba(125, 255, 79, .4); }
[data-theme="madlab"] .ticket small { color: var(--ml-slime); letter-spacing: .22em; font-weight: 700; }
[data-theme="madlab"] .ticket b { font-family: "Chakra Petch", sans-serif; font-weight: 700; color: #fff; }

/* Party TV */
[data-theme="madlab"].tv-slide h1, [data-theme="madlab"].tv-slide h2 { font-family: "Chakra Petch", sans-serif; font-weight: 700; text-shadow: 0 0 30px rgba(125, 255, 79, .45); }
[data-theme="madlab"].tv-slide .tv-big { font-family: "Chakra Petch", sans-serif; color: var(--ml-slime); }
[data-theme="madlab"].tv-bd .ml-hglow { animation: mli-glow 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
[data-theme="madlab"].tv-bd .ml-hdrip { transform-box: fill-box; transform-origin: 50% 0; animation: mli-drip 5.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }

/* the fallback opening */
[data-theme="madlab"] .op-art svg { overflow: visible; }
[data-theme="madlab"] .op-card { background: rgba(11, 15, 26, .8); color: #eafff0; box-shadow: 0 0 0 1px rgba(125, 255, 79, .5), 0 20px 60px rgba(0, 0, 0, .45); }
[data-theme="madlab"] .op-madlab .op-line { color: #eafff0; font-family: "Chakra Petch", sans-serif; text-shadow: 0 2px 16px rgba(5, 8, 16, .9); }
[data-theme="madlab"] .op-madlab.op-run .op-art { animation: mli-lights 1.4s .2s linear both; }
[data-theme="madlab"] .op-madlab.op-run .ml-tile { transform-box: fill-box; transform-origin: center; animation: mli-pop .6s calc(1.8s + var(--i) * .1s) cubic-bezier(.3, 1.3, .5, 1) both; }

@keyframes mli-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes mli-bub { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes mli-zap { 0% { opacity: 1; } 100% { opacity: .15; } }
@keyframes mli-drip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.12); } }
@keyframes mli-lights { 0% { opacity: .1; } 14% { opacity: .1; } 15% { opacity: .8; } 28% { opacity: .2; } 40% { opacity: .9; } 52% { opacity: .5; } 64%, 100% { opacity: 1; } }
@keyframes mli-pop { 0% { opacity: 0; transform: scale(0) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.18) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="madlab"] .hero-art *, [data-theme="madlab"].tv-bd *, [data-theme="madlab"] .op-art, [data-theme="madlab"] .op-art * { animation: none !important; }
}