/* The header's "Artist Login" pop-up: the page blurs back and eases away, the login card rises in. */
html.mvl-open { overflow: hidden; }
#siteWrapper { transition: filter .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1); }
html.mvl-open #siteWrapper { filter: blur(12px) brightness(.5) saturate(1.2); transform: scale(.98); }
html.mvl-leaving #siteWrapper { filter: blur(24px) brightness(.25); transform: scale(.95); }
.mvl { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; }
.mvl[hidden] { display: none; }
.mvl__veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(254, 208, 49, .12), rgba(0, 0, 0, .55) 60%); opacity: 0; transition: opacity .4s ease; }
.mvl.is-open .mvl__veil { opacity: 1; }
.mvl__card { position: relative; width: min(440px, 100%); max-height: calc(100svh - 40px); overflow: auto; padding: 34px 32px 28px; border-radius: 26px; color: #fff; text-align: center;
  background: linear-gradient(160deg, rgba(30, 22, 8, .96), rgba(10, 10, 10, .97) 55%, rgba(26, 10, 20, .96)); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 0 1px rgba(254, 208, 49, .18), 0 0 90px -20px rgba(254, 208, 49, .4);
  opacity: 0; transform: translateY(26px) scale(.94); transition: opacity .4s ease, transform .55s cubic-bezier(.2, 1.3, .4, 1); }
.mvl.is-open .mvl__card { opacity: 1; transform: none; }
.mvl.is-leaving .mvl__card { opacity: 0; transform: translateY(-30px) scale(1.04); transition: opacity .45s ease, transform .55s cubic-bezier(.6, 0, .8, .4); }
.mvl__card.is-shake { animation: mvlShake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes mvlShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.mvl__x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s, transform .3s; }
.mvl__x:hover { background: #fed031; color: #0d0d0d; transform: rotate(90deg); }
.mvl__logo { display: block; width: 96px; height: 60px; margin: 0 auto 8px; object-fit: cover; object-position: 50% 52%; filter: drop-shadow(0 0 16px rgba(254, 208, 49, .35)); }
.mvl__eyebrow { margin: 0 0 6px; font: 600 11px/1 "ibm-plex-mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: #fed031; }
.mvl__title { margin: 0 0 6px; font: 400 34px/1.05 "Shrikhand", serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff; }
.mvl__sub { margin: 0 0 20px; font: 400 16px/1.45 "new-spirit-condensed", Georgia, serif; color: rgba(255, 255, 255, .7); }
.mvl__field { display: block; text-align: left; margin: 0 0 12px; }
.mvl__field span { display: block; margin: 0 0 6px; font: 600 11px/1 "ibm-plex-mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.mvl__field input { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: #fff; font: 400 16px/1.3 "new-spirit-condensed", Georgia, serif; transition: border-color .2s, box-shadow .2s; }
.mvl__field input:focus { outline: 0; border-color: #fed031; box-shadow: 0 0 0 3px rgba(254, 208, 49, .2); }
.mvl__check { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; text-align: left; font: 400 15px/1.3 "new-spirit-condensed", Georgia, serif; color: rgba(255, 255, 255, .8); cursor: pointer; }
.mvl__check input { width: 18px; height: 18px; accent-color: #fed031; }
.mvl__err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 138, 128, .1); border: 1px solid rgba(255, 138, 128, .35); color: #ffb3ab; font: 400 15px/1.35 "new-spirit-condensed", Georgia, serif; text-align: left; }
.mvl__go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #fed031, #f9a83a); color: #0d0d0d; font: 600 13px/1 "ibm-plex-mono", monospace; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(254, 208, 49, .3); transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), box-shadow .2s; }
.mvl__go:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(254, 208, 49, .45); }
.mvl__go svg { width: 16px; height: 16px; }
.mvl__go.is-busy { opacity: .7; cursor: progress; }
.mvl__go.is-busy svg { animation: mvlNudge .6s ease-in-out infinite alternate; }
@keyframes mvlNudge { to { transform: translateX(4px); } }
.mvl__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; margin-top: 16px; font: 400 14px/1.3 "new-spirit-condensed", Georgia, serif; }
.mvl__links a { color: rgba(255, 255, 255, .65) !important; text-decoration: none !important; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.mvl__links a:hover { color: #fed031 !important; border-color: #fed031; }
@media (prefers-reduced-motion: reduce) { #siteWrapper, .mvl__veil, .mvl__card { transition: none; } .mvl__card.is-shake { animation: none; } }

/* a little life in the pop-up: the MV logo drifts lazily, "Welcome back" breathes */
.mvl.is-open .mvl__logo { animation: mvlFloat 6s ease-in-out infinite; }
@keyframes mvlFloat {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  25% { transform: translateY(-4px) scale(1.03) rotate(-2deg); }
  50% { transform: translateY(-6px) scale(1.05) rotate(1deg); }
  75% { transform: translateY(-2px) scale(1.02) rotate(2deg); }
}
.mvl.is-open .mvl__title { display: inline-block; animation: mvlBreathe 4.5s ease-in-out infinite; }
@keyframes mvlBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.mvl.is-leaving .mvl__logo, .mvl.is-leaving .mvl__title { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mvl__logo, .mvl__title { animation: none !important; } }

/* ---------- phones: the card sits in the middle of the screen and fits the width ---------- */
.mvl { grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (max-width: 600px) {
  .mvl { align-items: safe center; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .mvl__card { width: 100%; max-width: 440px; box-sizing: border-box; max-height: none; overflow: visible; margin: auto 0; padding: 28px 20px 22px; border-radius: 22px; }
  .mvl__title { font-size: 30px; }
  .mvl__sub { font-size: 15px; margin-bottom: 16px; }
  .mvl__x { top: 10px; right: 10px; width: 42px; height: 42px; }   /* a comfortable thumb target */
  .mvl__go { padding: 16px 20px; }
  .mvl__links { flex-direction: column; align-items: center; gap: 12px; }
}