/* premium-motion : micro-interaction kit  (premium-motion 2.0, Phase 4)
   Pair with micro.js. Small, high-polish state transitions for forms & buttons.
     .md-ripple   — material-style ripple from the press point
     .md-check    — SVG tick that draws itself (add .in, or via md-copy)
     .md-copy     — copy-to-clipboard button that morphs to a check
     .md-field    — input focus glow + floating label
     .md-skeleton — shimmer placeholder that crossfades to .md-content
   ============================================================ */
.md-ripple{ position:relative; overflow:hidden; }
.md-ripple .mr{ position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:currentColor; opacity:.28; animation: md-ripple .6s cubic-bezier(.22,.61,.2,1); }
@keyframes md-ripple{ to{ transform:scale(2.4); opacity:0; } }

.md-check path{ stroke-dasharray:24; stroke-dashoffset:24; }
.md-check.in path{ transition: stroke-dashoffset .5s cubic-bezier(.22,.61,.2,1); stroke-dashoffset:0; }
[data-motion="off"] .md-check path{ stroke-dashoffset:0; }

.md-copy{ display:inline-flex; align-items:center; gap:8px; }
.md-copy .ic{ display:inline-grid; place-items:center; width:16px; height:16px; }
.md-copy.done{ color:#1a8f60; }

.md-field{ position:relative; }
.md-field input{ width:100%; box-sizing:border-box; padding:16px 14px 8px; border:1px solid var(--line,#e4e7ec);
  border-radius:10px; font:inherit; outline:none; background:#fff; transition:border-color .2s, box-shadow .2s; }
.md-field input:focus{ border-color:var(--red,#C8102E); box-shadow:0 0 0 4px rgba(200,16,46,.12); }
.md-field label{ position:absolute; left:14px; top:14px; color:var(--muted,#8a93a0); font-size:14px;
  pointer-events:none; transition:.2s cubic-bezier(.22,.61,.2,1); }
.md-field input:focus + label,
.md-field input:not(:placeholder-shown) + label{ top:6px; font-size:10.5px; color:var(--red,#C8102E); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }

.md-skeleton > .md-content{ opacity:0; }
.md-skeleton.loaded > .md-sk{ display:none; }
.md-skeleton.loaded > .md-content{ opacity:1; transition:opacity .5s ease; }
.md-sk i{ display:block; height:12px; border-radius:6px; margin:9px 0;
  background:linear-gradient(90deg,#eef1f4,#f6f8fa,#eef1f4); background-size:200% 100%; }
@media (prefers-reduced-motion: no-preference){ .md-sk i{ animation: md-sk 1.4s infinite; }
  @keyframes md-sk{ to{ background-position:-200% 0; } } }