/* Mystery Escape Room: a flashlight sweeping the room, the lamp's pool of light, a vault door ajar
   with golden light behind it. The opening ("case"): the room is dark, the flashlight finds the
   clues one by one, the red thread links them, the dial spins, the vault swings open and the
   INVITED stamp lands. Only transform and opacity animate; reduced motion shows the solved case. */
[data-theme="mystery"] .hero-art .ms-torchwrap { animation: ms-search 7s ease-in-out infinite alternate; }
[data-theme="mystery"] .hero-art .ms-door { transform-box: fill-box; transform-origin: left center; transform: scaleX(.38); }
[data-theme="mystery"] .hero-art .ms-glow { animation: ms-flick 3s ease-in-out infinite; }
[data-theme="mystery"] .hero-art .ms-lamp { animation: ms-flick 4s ease-in-out infinite; }
[data-theme="mystery"] .hero-art .ms-dial { transform-box: fill-box; transform-origin: center; }
[data-theme="mystery"] .hero-art .ms-under { display: none; }
[data-theme="mystery"] .title { letter-spacing: .02em; }
[data-theme="mystery"] .card { border-radius: 4px; box-shadow: 0 2px 0 var(--line), 0 16px 40px rgba(0, 0, 0, .25); }
[data-theme="mystery"] .btn { border-radius: 6px; letter-spacing: .03em; }

/* the opening */
[data-theme="mystery"] .op-art svg { overflow: visible; }
[data-theme="mystery"] .op-art .ms-under { display: inline; }
[data-theme="mystery"] .op-case.op-run .ms-torchwrap { animation: ms-hunt 2.6s .4s ease-in-out both, ms-search 7s 3s ease-in-out infinite alternate; }
[data-theme="mystery"] .op-case.op-run .ms-clue { animation: ms-find .5s calc(.8s + var(--i) * .4s) ease-out both; }
[data-theme="mystery"] .op-case.op-run .ms-thread { animation: ms-find .6s 2.7s ease-out both; }
[data-theme="mystery"] .op-case.op-run .ms-dial { animation: ms-dial 1.1s 2.6s cubic-bezier(.4, 0, .2, 1) both; }
[data-theme="mystery"] .op-case.op-run .ms-door { animation: ms-open 1s 3.6s cubic-bezier(.3, 1.2, .5, 1) both; }
[data-theme="mystery"] .op-case.op-run .ms-stamp { transform-box: fill-box; transform-origin: center; animation: ms-stamp .5s 4.4s cubic-bezier(.5, 0, .5, 1.6) both; }
[data-theme="mystery"] .op-case.op-run .ms-print { animation: ms-find .4s calc(1s + var(--i) * .3s) ease-out both; }

@keyframes ms-search { from { transform: translateX(-150px); } to { transform: translateX(130px); } }
@keyframes ms-flick { 0%, 100% { opacity: 1; } 47% { opacity: .75; } 50% { opacity: .95; } }
@keyframes ms-hunt { 0% { opacity: 0; transform: translate(-170px, 0); } 15% { opacity: 1; } 50% { transform: translate(-60px, -10px); } 100% { transform: translate(-150px, 0); } }
@keyframes ms-find { from { opacity: .08; } }
@keyframes ms-dial { from { transform: rotate(-540deg); } }
@keyframes ms-open { from { transform: scaleX(1); } to { transform: scaleX(.38); } }
@keyframes ms-stamp { from { opacity: 0; transform: scale(2.2); } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="mystery"] .btn, [data-theme="mystery"] .card h2, [data-theme="mystery"] .title, [data-theme="mystery"] .eyebrow { overflow-wrap: anywhere; }
/* film: the camera opens close on the hero beat and pulls back as the story plays; the squad
   makes its own entrance, then lands its reveal; the squad blinks now and then. */
[data-theme="mystery"] .op-art { transform: scale(1.5); transform-origin: 56% 52%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="mystery"] .op-pal { transform: scale(0); opacity: 0; transition-property: transform, opacity; transition-duration: .5s; transition-timing-function: cubic-bezier(.3, 1.7, .5, 1); }
[data-theme="mystery"] .op-run .op-art, [data-theme="mystery"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="mystery"] .op-final .op-art, [data-theme="mystery"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="mystery"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: ms-reveal .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes ms-reveal { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg) scale(1.06); } }
/* phones in portrait: the scene steps forward so it fills the screen */
@media (max-aspect-ratio: 4/5) { [data-theme="mystery"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="mystery"] .critter .cr-eye, [data-theme="mystery"] .op-pal svg, [data-theme="mystery"] .hero-art * { animation: none !important; }
}