/* Masquerade Ball: candle flames flicker, the chandelier sways a little, gold glints twinkle on the velvet.
   The classic opening ("masque", only if the film can't load): the ballroom drifts in, the chandelier
   settles, the candles catch and the name rises in gold. Only transform and opacity animate; reduced
   motion shows the finished ballroom, still. */
[data-theme="masquerade"] .hero-sky .hero-art { overflow: visible; }
[data-theme="masquerade"] .hero-art .mq-fl, [data-theme="masquerade"].tv-bd .mq-fl { transform-box: fill-box; transform-origin: 50% 70%; animation: mq-flick 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.37s); }
[data-theme="masquerade"] .hero-art .mq-ch, [data-theme="masquerade"].tv-bd .mq-ch { transform-box: fill-box; transform-origin: 50% 0; animation: mq-sway 7s ease-in-out infinite alternate; }
[data-theme="masquerade"] .hero-art .twinkle { animation: mq-tw 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
[data-theme="masquerade"] .card { border-radius: 6px; box-shadow: var(--shadow), inset 0 0 0 1px #d4ae5a, inset 0 0 0 4px #fdf8ee, inset 0 0 0 5px rgba(212, 174, 90, .5); }
[data-theme="masquerade"] .btn { border-radius: 4px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
[data-theme="masquerade"] .title { font-style: italic; font-weight: 700; letter-spacing: .01em; text-shadow: 0 0 24px rgba(212, 174, 90, .35), 0 2px 0 rgba(0, 0, 0, .45); }
[data-theme="masquerade"] .eyebrow { letter-spacing: .24em; text-transform: uppercase; font-size: .78rem; color: #d4ae5a; }
[data-theme="masquerade"] .card h2 { font-style: italic; font-weight: 700; }
[data-theme="masquerade"] .btn, [data-theme="masquerade"] .card h2, [data-theme="masquerade"] .title, [data-theme="masquerade"] .eyebrow { overflow-wrap: anywhere; }

/* the classic opening */
[data-theme="masquerade"] .op-art svg { overflow: visible; }
[data-theme="masquerade"] .op-card:not(.fm-cta) { background: rgba(20, 7, 13, .82); box-shadow: 0 0 0 1px rgba(212, 174, 90, .55), 0 22px 60px rgba(0, 0, 0, .5); }
[data-theme="masquerade"] .op-masque .op-line { color: var(--ink); font-style: italic; text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
[data-theme="masquerade"] .op-masque.op-run .mq-ch { animation: mq-lower 1.8s .3s cubic-bezier(.22, 1, .36, 1) both, mq-sway 7s 2.1s ease-in-out infinite alternate; }
[data-theme="masquerade"] .op-masque.op-run .mq-fl { animation: mq-catch .6s calc(1.2s + var(--i) * .12s) ease-out both, mq-flick 1.6s 2.4s ease-in-out infinite alternate; }
[data-theme="masquerade"] .op-masque.op-run .mq-name { transform-box: fill-box; transform-origin: center; animation: mq-rise 1s 2.2s cubic-bezier(.22, 1, .36, 1) both; }
[data-theme="masquerade"] .op-art { transform: scale(1.3); transform-origin: 50% 45%; transition: opacity 1.2s ease, transform 4.5s cubic-bezier(.33, .05, .2, 1); }
[data-theme="masquerade"] .op-run .op-art, [data-theme="masquerade"] .op-final .op-art { opacity: 1; transform: none; }
[data-theme="masquerade"] .op-final .op-art { transition: none; }
@media (max-aspect-ratio: 4/5) { [data-theme="masquerade"] .op-art svg { transform: scale(1.3); transform-origin: 50% 100%; } }

@keyframes mq-flick { 0% { opacity: 1; transform: scale(1); } 40% { opacity: .82; transform: scale(.94, 1.06); } 100% { opacity: .95; transform: scale(1.04, .96); } }
@keyframes mq-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes mq-tw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes mq-lower { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes mq-catch { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes mq-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="masquerade"] .hero-art *, [data-theme="masquerade"] .op-art *, [data-theme="masquerade"].tv-bd * { animation: none !important; }
}