/* Mova — bibliothèque de vitrines animées (inspirées des templates animos.app)
   Usage : <div class="mv-sc" data-sc="ring|vring|wall|coverflow|fan|grid|iso|orbit" data-imgs="/a.jpg,/b.jpg" style="--w:220px;--ratio:4/5"></div>
           <figure class="mv-browser" data-url="agentova.ai"><img src="full.jpg" alt=""></figure>
           <figure class="mv-phone"><img src="mobile.jpg" alt=""></figure>
   Script : /assets/showcase/showcase.js (aucune dépendance). */

.mv-sc { --w: 220px; --ratio: 4 / 5; --radius: 14px; --gap: 18px; --bg: transparent;
  position: relative; width: 100%; height: var(--h, 560px); overflow: hidden; perspective: var(--persp, 1400px); background: var(--bg);
  -webkit-mask-image: var(--mask, none); mask-image: var(--mask, none); contain: layout paint; }
.mv-sc__stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.mv-sc__card { position: absolute; left: 0; top: 0; width: var(--w); aspect-ratio: var(--ratio); margin: 0; border-radius: var(--radius); overflow: hidden;
  background: #e9e9ee; box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 18px 40px -18px rgba(11,11,15,.35); will-change: transform; backface-visibility: visible;
  transform: translate(-50%, -50%); }
.mv-sc__card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mv-sc__card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade, 0); pointer-events: none; transition: none; }
.mv-sc[data-fit="contain"] .mv-sc__card { background: transparent; box-shadow: none; }
.mv-sc[data-fit="contain"] .mv-sc__card img { object-fit: contain; }
.mv-sc--edges { --mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mv-sc--fade { --mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); }
.mv-sc[data-drag] { cursor: grab; touch-action: pan-y; }
.mv-sc[data-drag].is-dragging { cursor: grabbing; }
.mv-sc__glow { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(75,60,240,.35)), transparent 65%); filter: blur(20px); pointer-events: none; }

/* Navigateur : la page défile dans l'écran */
.mv-browser { --bar: 38px; position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(11,11,15,.08), 0 40px 80px -30px rgba(11,11,15,.35); aspect-ratio: var(--ratio, 16 / 10); }
.mv-browser::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--bar); background: #f4f4f5; border-bottom: 1px solid rgba(11,11,15,.07); z-index: 2; }
.mv-browser::after { content: ""; position: absolute; left: 14px; top: calc(var(--bar) / 2 - 5px); width: 10px; height: 10px; border-radius: 50%; background: #ff5f57;
  box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840; z-index: 3; }
.mv-browser__url { position: absolute; z-index: 3; left: 50%; top: calc(var(--bar) / 2); transform: translate(-50%, -50%); max-width: 55%; padding: 4px 14px; border-radius: 8px;
  background: #fff; color: #6a6a72; font: 500 12px/1.2 ui-monospace, "Geist Mono", monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-browser__view { position: absolute; inset: var(--bar) 0 0; overflow: hidden; }
.mv-browser img, .mv-phone img, .mv-iphone__view img { width: 100%; height: auto; display: block; will-change: transform; }
.mv-browser:not(.is-ready) img { position: absolute; inset: var(--bar) 0 auto; }

/* Téléphone */
.mv-phone { position: relative; margin: 0; width: var(--pw, 260px); aspect-ratio: 9 / 19.2; border-radius: calc(var(--pw, 260px) * .16); padding: calc(var(--pw, 260px) * .035);
  background: #0b0b0f; box-shadow: 0 40px 80px -30px rgba(11,11,15,.5), inset 0 0 0 1.5px #2a2a30; }
.mv-phone__view { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw, 260px) * .13); background: #fff; }
.mv-phone__view::before { content: ""; position: absolute; z-index: 2; top: 2.4%; left: 50%; width: 32%; height: 3.6%; transform: translateX(-50%); border-radius: 99px; background: #0b0b0f; }

@media (prefers-reduced-motion: reduce) { .mv-sc__card { transition: none !important; } }

/* iPhone Figma de Margot : l'email (ou la page mobile) défile dans l'écran, cadre par-dessus.
   <figure class="mv-iphone" data-speed="1"><img src="/assets/emails/email-1-emmenage-ensemble.jpg" alt=""></figure> */
.mv-iphone { position: relative; margin: 0; width: var(--pw, 280px); aspect-ratio: 900 / 1840; }
.mv-iphone__view { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; overflow: hidden; border-radius: 14.8% / 6.9%; background: #fff; box-shadow: 0 40px 70px -20px rgba(11,11,15,.35); }
.mv-iphone__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.mv-iphone:not(.is-ready) > img { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; object-fit: cover; object-position: top; border-radius: 14.8% / 6.9%; }