/* MockMuse motion layer. Each effect is switched on by a class on <html>, added by a tiny script in <head>:
   m-echo (headings rise with echo copies; cards and steps reveal in a stagger), m-tilt (film cards tilt toward the mouse),
   m-glow (the light behind the hero film drifts). None of the classes are added when the visitor asks for reduced motion. */

/* ---------- Echo headings + reveals: move, don't fade ---------- */
.m-echo .rv{translate:0 34px;opacity:0}
.m-echo .rv.in{translate:none;opacity:1;transition:translate .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease-out;transition-delay:calc(var(--d,0) * 80ms)}
.m-echo h2.rv{position:relative}
.m-echo h2.rv::before,.m-echo h2.rv::after{content:attr(data-echo);position:absolute;inset:0;pointer-events:none;color:currentColor;opacity:0}
.m-echo h2.rv.in::before{animation:mm-ghost1 .95s cubic-bezier(.2,.8,.2,1)}
.m-echo h2.rv.in::after{animation:mm-ghost2 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes mm-ghost1{0%{opacity:.3;transform:translateY(.5em)}70%{opacity:.12}100%{opacity:0;transform:none}}
@keyframes mm-ghost2{0%{opacity:.16;transform:translateY(1em)}75%{opacity:.06}100%{opacity:0;transform:none}}

/* ---------- Film tilt (desktop) ---------- */
.m-tilt .grid .frame{transition:transform .18s ease-out,box-shadow .3s}
@media (hover:hover) and (pointer:fine){.m-tilt .grid figure:hover .frame{box-shadow:0 28px 60px -24px rgba(255,90,50,.55)}}
.m-tilt .grid .frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,145,77,.32),transparent 46%);mix-blend-mode:screen}
@media (hover:hover) and (pointer:fine){.m-tilt .grid figure:hover .frame::after{opacity:1}}
.grid .snd{z-index:2}

/* ---------- Living glow behind the hero film ---------- */
@property --gx1{syntax:"<percentage>";inherits:false;initial-value:20%}
@property --gy1{syntax:"<percentage>";inherits:false;initial-value:10%}
@property --gx2{syntax:"<percentage>";inherits:false;initial-value:90%}
@property --gy2{syntax:"<percentage>";inherits:false;initial-value:90%}
.m-glow .glow{background:radial-gradient(120% 90% at var(--gx1) var(--gy1),var(--hot-1),transparent 60%),
  radial-gradient(110% 100% at var(--gx2) var(--gy2),var(--hot-2),transparent 60%),var(--peach);
  animation:mm-drift 16s ease-in-out infinite alternate}
@keyframes mm-drift{
  0%{--gx1:20%;--gy1:10%;--gx2:90%;--gy2:90%}
  50%{--gx1:72%;--gy1:22%;--gx2:28%;--gy2:82%}
  100%{--gx1:30%;--gy1:72%;--gx2:86%;--gy2:24%}}

/* ---------- preview panel (only on _preview-motion.html, not part of the site) ---------- */
.mpanel{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--ink);color:var(--cream);
  border-radius:20px;padding:12px 14px;font:500 14px/1.3 var(--f-body);box-shadow:0 20px 40px -16px rgba(0,0,0,.5);max-width:calc(100vw - 24px)}
.mpanel summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.mpanel summary::-webkit-details-marker{display:none}
.mpanel summary::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--hot)}
.mpanel .opts{display:grid;gap:6px;margin-top:10px}
.mpanel label{display:flex;align-items:center;gap:8px;cursor:pointer}
.mpanel input{accent-color:#FF5A3C;width:16px;height:16px}
.mpanel small{display:block;color:#C9B4A8;margin-top:8px;max-width:30ch}
.mpanel .new{display:block;margin-top:6px;color:var(--peach);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.mpanel [data-replay]{margin-left:auto;border:0;border-radius:999px;padding:3px 9px;background:var(--hot);color:var(--ink);font:600 12px/1.2 var(--f-body);cursor:pointer}
.mpanel .hl{display:flex;align-items:center;gap:8px}
.mpanel .radios{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding-left:4px;font-size:13px}