/* MOTION – quiet, purposeful animations for the main site (js/motion.js).
   One indigo note, short precise moves; everything is off with prefers-reduced-motion */

/* 3 · Page transitions: an indigo line runs across, the next page rises in */
.mv-line { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 10000; background: var(--accent, #5046E5); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.mv-leaving .mv-line { transition: transform .38s cubic-bezier(.65, 0, .35, 1); transform: scaleX(1); }
.mv-leaving body > *:not(.mv-line):not(.mv-peek) { transition: opacity .3s ease .08s; opacity: .35; }
@keyframes mvEnter { from { opacity: 0; transform: translateY(12px); } }
@keyframes mvLineOut { from { transform: scaleX(1); transform-origin: right; } to { transform: scaleX(0); transform-origin: right; } }
html.mv-enter body > main, html.mv-enter body > .container, html.mv-enter body > section, html.mv-enter body > .about-header, html.mv-enter body > div:not(.mv-line):not(.mv-peek):not(.curtain) { animation: mvEnter .55s cubic-bezier(.16, 1, .3, 1) both; }
html.mv-enter .mv-line { transform: scaleX(1); animation: mvLineOut .5s cubic-bezier(.65, 0, .35, 1) .05s forwards; }

/* 2 · Case list: a peek at the case's key screen follows the cursor; bars draw again */
.mv-peek { position: fixed; left: 0; top: 0; z-index: 900; width: 148px; pointer-events: none; opacity: 0; transform: translate(-9999px, 0); transition: opacity .25s ease; }
.mv-peek.is-on { opacity: 1; }
.mv-peek-frame { border-radius: 26px; padding: 4px; background: #0B0B0B; box-shadow: 0 24px 48px -16px rgba(11, 11, 11, .35); transform: rotate(var(--tilt, 0deg)) scale(var(--sc, .9)); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.mv-peek.is-on .mv-peek-frame { --sc: 1; }
.mv-peek img { display: block; width: 100%; border-radius: 22px; background: #fff; }
.mv-peek.is-wide { width: 300px; }
.mv-peek.is-wide .mv-peek-frame { border-radius: 4px; padding: 0; background: #fff; border: 1px solid var(--text, #0B0B0B); }
.mv-peek.is-wide img { border-radius: 0; }
@keyframes mvBar { from { transform: scaleX(0); } }
.rb-row.mv-redraw .rb-bar { animation: mvBar .7s cubic-bezier(.2, .7, .2, 1) both; }
.rb-row.mv-redraw .rb-bar.is-after { animation-delay: .12s; }

/* 4 · Case pages: reading progress */
.mv-read { position: fixed; left: 0; top: 0; z-index: 1001; height: 3px; width: 100%; background: var(--accent, #5046E5); transform-origin: left; transform: scaleX(var(--read, 0)); pointer-events: none; }

/* 5 · Screens: rows slide in a little as they arrive, a screen lifts under the cursor */
.screens-scroll { padding-top: 12px; margin-top: calc(var(--space-8, 32px) - 12px); }
.screens-row { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.screens-row.mv-pending { transform: translateX(64px); }
.screen-item img { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
@media (hover: hover) and (pointer: fine) {
  .screen-item:hover img { transform: translateY(-8px); box-shadow: 0 20px 40px -20px rgba(11, 11, 11, .4); }
}

@media (prefers-reduced-motion: reduce) {
  .mv-line, .mv-peek, .mv-read { display: none !important; }
  html.mv-enter body > * { animation: none !important; }
  .screens-row.mv-pending { transform: none; }
  .screen-item img { transition: none; }
}