/* ───────────────────────────────────────────────────────────
   SIZZLE — motion-design clip keyframes
   Base styles render a complete, pleasant still; animation only
   adds life (gated behind prefers-reduced-motion: no-preference).
   ─────────────────────────────────────────────────────────── */

.mc {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(150deg, var(--accent-soft), var(--cream-2));
}
.mc-grain { /* faint diagonal texture */
  position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(48deg,
    oklch(0.7 0.07 55 / 0.08) 0 12px, transparent 12px 24px);
}
.mc-stage { position: absolute; inset: 0; display: grid; place-items: center; }

/* loop badge + caption chrome */
.mc-kicker {
  position: absolute; top: 10px; left: 10px; z-index: 6;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-deep);
  background: oklch(1 0 0 / .8); padding: 3px 8px; border-radius: 6px;
}
.mc-loop {
  position: absolute; top: 9px; right: 9px; z-index: 6;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-soft);
  background: oklch(1 0 0 / .8); padding: 3px 7px; border-radius: 100px;
}
.mc-loop i { width: 5px; height: 5px; border-radius: 50%; background: oklch(0.62 0.2 25);
  animation: mc-blink 1.6s ease-in-out infinite; }
.mc-cap {
  position: absolute; left: 10px; bottom: 10px; z-index: 6;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft);
  background: oklch(1 0 0 / .78); backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / .6); padding: 4px 8px; border-radius: 7px;
}

/* ── 1 · UPLOAD ─────────────────────────────────────────── */
.mc-zone {
  width: 58%; aspect-ratio: 5/4; border-radius: 16px;
  border: 2px dashed oklch(0.635 0.142 40 / .45);
  background: oklch(1 0 0 / .35);
  position: relative; display: grid; place-items: center;
}
.mc-photo {
  position: absolute; width: 70%; aspect-ratio: 4/3; border-radius: 11px;
  overflow: hidden; box-shadow: var(--shadow-md);
  background:
    repeating-linear-gradient(48deg, oklch(0.7 0.09 50 / .25) 0 8px, transparent 8px 16px),
    linear-gradient(150deg, var(--amber-2), var(--accent-soft));
  border: 3px solid var(--paper);
}
.mc-photo::after { /* little image glyph: sun + horizon */
  content: ""; position: absolute; left: 14%; top: 22%; width: 18%; aspect-ratio: 1;
  border-radius: 50%; background: var(--amber);
}
.mc-photo.ghost { opacity: .38; }
.mc-photo.live { opacity: 1; }
.mc-updot {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; box-shadow: 0 6px 14px oklch(.6 .14 40 / .4); z-index: 4;
}

/* ── 2 · TRANSFORM (plate + steam) ──────────────────────── */
.mc-plate {
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--paper) 0 38%, var(--accent-soft) 39% 70%, oklch(0.86 0.05 60) 71%);
  box-shadow: var(--shadow-md), inset 0 -8px 18px oklch(.55 .1 40 / .15);
  position: relative; display: grid; place-items: center;
}
.mc-orbit { position: absolute; inset: 0; }
.mc-orbit i { position: absolute; top: 4%; left: 50%; width: 10%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%; background: var(--accent); }
.mc-yolk { width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--amber-2), var(--accent)); }
.mc-steamwrap { position: absolute; bottom: 66%; left: 0; right: 0; height: 40%;
  display: flex; justify-content: center; gap: 11%; pointer-events: none; }
.mc-steam { width: 7px; height: 60%; align-self: flex-end; border-radius: 100px;
  background: linear-gradient(to top, oklch(1 0 0 / .85), oklch(1 0 0 / 0));
  opacity: .25; transform-origin: bottom; }

/* ── 3 · QR ─────────────────────────────────────────────── */
.mc-qr {
  width: 46%; aspect-ratio: 1; background: var(--paper); border-radius: 12px;
  padding: 9%; box-shadow: var(--shadow-md); position: relative;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr);
  gap: 8%;
}
.mc-qr span { border-radius: 2px; background: transparent; }
.mc-qr span.on { background: var(--ink); }
.mc-qr span.eye { background: var(--accent-deep); border-radius: 3px; }
.mc-scan { position: absolute; left: 7%; right: 7%; height: 8%; border-radius: 100px;
  background: linear-gradient(90deg, transparent, oklch(0.635 0.142 40 / .85), transparent);
  top: 8%; opacity: 0; }
.mc-check {
  position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; border-radius: 50%;
  background: oklch(0.6 0.13 145); display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-sm); transform: scale(1);
}

/* ── animations (only when motion is welcome) ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .mc-photo.live { animation: mc-drop 4.2s cubic-bezier(.4,.7,.3,1) infinite; }
  .mc-zone { animation: mc-floaty 4.2s ease-in-out infinite; }
  .mc-orbit { animation: mc-spin 14s linear infinite; }
  .mc-yolk  { animation: mc-bob 3.4s ease-in-out infinite; }
  .mc-steam { animation: mc-rise 2.8s ease-in-out infinite; }
  .mc-steam:nth-child(2) { animation-delay: .5s; }
  .mc-steam:nth-child(3) { animation-delay: 1s; }
  .mc-scan { animation: mc-scan 3.6s cubic-bezier(.5,0,.5,1) infinite; }
  .mc-qr span.on { animation: mc-cell 3.6s ease-in-out infinite; }
  .mc-check { animation: mc-pop 3.6s ease-in-out infinite; }
}

@keyframes mc-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes mc-drop {
  0%   { transform: translateY(-44px) rotate(-4deg); opacity: 0; }
  16%  { opacity: 1; }
  34%  { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-44px) rotate(-4deg); opacity: 0; }
}
@keyframes mc-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes mc-bob { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mc-rise {
  0%   { transform: translateY(8px) scaleY(.5); opacity: 0; }
  35%  { opacity: .85; }
  100% { transform: translateY(-30px) scaleY(1.25); opacity: 0; }
}
@keyframes mc-scan {
  0%   { top: 8%;  opacity: 0; }
  12%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { top: 86%; opacity: 0; }
}
@keyframes mc-cell { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes mc-pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}