/* Motion layer — vanilla ports of motion-primitives effects (TextEffect,
   InView/AnimatedGroup, Spotlight, BorderTrail, Magnetic, Tilt, TextScramble,
   TextShimmer, MorphingDialog). Purely visual: app.js never depends on it.
   Everything is gated on html.mp-ready, which motion.js only sets when the
   user hasn't asked for reduced motion. */

@property --mp-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root { --mp-ease: cubic-bezier(.16, 1, .3, 1); --mp-spring: cubic-bezier(.2, .9, .3, 1.15); }

/* ---------- Background drifts slowly ---------- */
.mp-ready body::before { animation: mpDrift 28s ease-in-out infinite alternate; }
@keyframes mpDrift { to { transform: translate(-3%, 2%) scale(1.06); } }

/* ---------- Nav + hero entrance (TextEffect: per-word fade-in-blur) ---------- */
.mp-ready .topnav { animation: mpDrop .8s var(--mp-ease) both; }
@keyframes mpDrop { from { opacity: 0; transform: translateY(-14px); filter: blur(6px); } }

.mp-word { display: inline-block; white-space: pre; }
.mp-ready .mp-word { animation: mpWord .9s var(--mp-ease) both; animation-delay: var(--d, 0s); }
@keyframes mpWord { from { opacity: 0; transform: translateY(18px); filter: blur(12px); } }

.mp-ready .hero p { animation: mpFadeBlur 1s var(--mp-ease) .55s both; }
@keyframes mpFadeBlur { from { opacity: 0; transform: translateY(8px); filter: blur(8px); } }

/* ---------- Cards reveal in view (InView + AnimatedGroup stagger) ---------- */
.mp-ready .mp-in {
  opacity: 0; transform: translateY(22px) scale(.985); filter: blur(10px);
  transition: opacity .8s var(--mp-ease), transform .9s var(--mp-ease), filter .8s var(--mp-ease);
  transition-delay: var(--d, 0s);
}
.mp-ready .mp-in.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Spotlight: cursor-following glow on every card ---------- */
.card { position: relative; }
.card::before, .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.card::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(251, 146, 60, .075), transparent 60%);
}
/* lit border segment near the cursor */
.card::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(251, 191, 36, .55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::before, .card:hover::after { opacity: 1; }
}

/* ---------- BorderTrail: a light running around the edge ---------- */
.mp-trail {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: conic-gradient(from var(--mp-angle), transparent 0 72%, rgba(245, 158, 11, .0) 72%,
              #f59e0b 88%, #fde047 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: mpSpin 3.2s linear infinite;
}
@keyframes mpSpin { to { --mp-angle: 360deg; } }
.link-box.in-card > .mp-trail { opacity: 1; }
.progress-wrap { position: relative; }
.progress-wrap.visible:not(.done) > .mp-trail { opacity: .9; animation-duration: 1.8s; }
.drop-zone > .mp-trail { inset: 0; border-radius: 14px; }
.drop-zone:hover > .mp-trail, .drop-zone.dragover > .mp-trail { opacity: 1; }
.drop-zone.busy > .mp-trail { opacity: 0; }

/* transfer finished: one soft green pulse */
.mp-ready .progress-wrap.done { animation: mpDone 1s var(--mp-ease); }
@keyframes mpDone {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  100% { box-shadow: 0 0 0 14px rgba(52, 211, 153, 0); }
}
.tp-pct, .progress-stats { font-variant-numeric: tabular-nums; }

/* ---------- Magnetic buttons + Tilt QR (motion.js sets `translate` / transform) ---------- */
.mp-mag { transition: translate .35s var(--mp-spring), filter .15s, transform .1s, box-shadow .2s; }
.mp-mag.mp-mag-on { transition: translate .12s linear, filter .15s, transform .1s, box-shadow .2s; }
.qr-wrap { perspective: 700px; }
.qr-wrap .qr { transition: transform .5s var(--mp-spring); transform-style: preserve-3d; }
.mp-ready .qr-wrap .qr { animation: mpQr .7s var(--mp-spring) .1s both; }
@keyframes mpQr { from { opacity: 0; transform: scale(.85) rotateX(18deg); filter: blur(6px); } }

/* ---------- Logo ---------- */
.logo .bolt { transition: transform .5s var(--mp-spring); }
.logo:hover .bolt { transform: rotate(-12deg) scale(1.08); }
.mp-ready .logo .bolt { animation: mpBoltGlow 3.5s ease-in-out infinite; }
@keyframes mpBoltGlow {
  0%, 100% { box-shadow: 0 6px 24px rgba(251, 146, 60, .3); }
  50% { box-shadow: 0 6px 34px rgba(251, 146, 60, .6), 0 0 0 4px rgba(251, 146, 60, .08); }
}

/* ---------- TextScramble on share codes (text stays real; overlay animates) ---------- */
.code-big { position: relative; }
.code-big.mp-scrambling { color: transparent; text-shadow: none; }
.code-big.mp-scrambling::after {
  content: attr(data-scramble);
  position: absolute; inset: 0;
  color: var(--text); text-shadow: 0 0 28px rgba(251, 146, 60, .55);
}

/* ---------- TextShimmer on "waiting / connecting" text ---------- */
.mp-shimmer {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 38%, #fff7ed 50%, var(--muted) 62%, var(--muted) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mpShimmer 2.2s linear infinite;
}
.rx-intro h2.mp-shimmer { background-image: linear-gradient(90deg, var(--text) 0%, var(--text) 38%, var(--amber2) 50%, var(--text) 62%, var(--text) 100%); }
@keyframes mpShimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- List items: blur-rise + light stagger ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.file-list > :nth-child(2), #nearby-list > :nth-child(2), #clip-history-list > :nth-child(2) { animation-delay: .04s; }
.file-list > :nth-child(3), #nearby-list > :nth-child(3), #clip-history-list > :nth-child(3) { animation-delay: .08s; }
.file-list > :nth-child(4), #nearby-list > :nth-child(4), #clip-history-list > :nth-child(4) { animation-delay: .12s; }
.file-list > :nth-child(n+5), #nearby-list > :nth-child(n+5), #clip-history-list > :nth-child(n+5) { animation-delay: .16s; }
.file-item, .nearby-item, .hist-item { transition: border-color .2s, background .2s, translate .25s var(--mp-ease); }
@media (hover: hover) and (pointer: fine) {
  .file-item:hover, .nearby-item:hover, .hist-item:hover { border-color: var(--border); translate: 0 -1px; }
}

/* ---------- Player: MorphingDialog-style pop ---------- */
.mp-ready .player-modal.open { animation: mpFade .3s ease both; }
.mp-ready .player-modal.open .player-box { animation: mpDialog .5s var(--mp-spring) both; }
@keyframes mpFade { from { opacity: 0; } }
@keyframes mpDialog { from { opacity: 0; transform: translateY(24px) scale(.92); filter: blur(8px); } }

/* ---------- Receiver intro ---------- */
.mp-ready .rx-intro > h2, .mp-ready .rx-intro > p { animation: mpFadeBlur .8s var(--mp-ease) both; }
.mp-ready .rx-intro > p { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  .mp-trail, .mp-shimmer { animation: none !important; }
  .mp-shimmer { color: var(--muted); background: none; }
  .card::before, .card::after { display: none; }
}

/* ---------- Touch / small screens: keep the GPU idle ----------
   Phones pay for every frame the blurred background moves under the glass
   cards (backdrop-filter re-blurs it) and for filter:blur entrances on big
   layers. Keep the look, drop the per-frame cost. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .mp-ready body::before { animation: none; }
  .card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(18, 16, 13, .86); }
  .card::before, .card::after { display: none; }
  .mp-ready .mp-in { filter: none; transform: translateY(16px); transition-property: opacity, transform; }
  .mp-ready .mp-word { animation-name: mpWordLite; }
  @keyframes mpWordLite { from { opacity: 0; transform: translateY(14px); } }
  .mp-ready .hero p, .mp-ready .topnav { animation-name: mpRiseLite; }
  @keyframes mpRiseLite { from { opacity: 0; transform: translateY(8px); } }
  .mp-ready .logo .bolt { animation: none; }
  .player-modal { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(0, 0, 0, .88); }
}