/* URPEVERSE website — demos animados de las feature rows.
   Ligeros, en CSS puro (el JS solo arranca los <video> al entrar al viewport).
   Respetan prefers-reduced-motion. */

/* ── Demo 1: proximidad ── */
.demo-prox { position: relative; padding: 26px; background: linear-gradient(180deg, #fff, var(--ice-050)); }
.dp-stage {
  position: relative; height: 300px; border-radius: 16px; background: var(--surface-2);
  background-image: var(--grid-lines); background-size: 36px 36px; overflow: hidden;
}
.dp-av {
  position: absolute; top: 50%; width: 108px; text-align: center; transform: translateY(-50%);
}
.dp-av video {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 10px 26px -8px rgba(11, 34, 64, .35);
  margin: 0 auto;
}
.dp-av span {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(11, 34, 64, .82); border-radius: 999px; padding: 3px 12px;
}
.dp-av::after {
  content: ""; position: absolute; top: 6px; right: 12px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--mint); border: 2.5px solid #fff;
}
.dp-av-a { left: 6%; animation: dp-walk-a 7s ease-in-out infinite; }
.dp-av-b { right: 6%; animation: dp-walk-b 7s ease-in-out infinite; }
.dp-ring {
  position: absolute; left: 50%; top: 50%; width: 250px; height: 250px;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 2.5px dashed rgba(46, 150, 245, .55);
  animation: dp-ring 7s ease-in-out infinite;
}
@keyframes dp-walk-a { 0%, 18% { left: 6%; } 45%, 82% { left: 26%; } 100% { left: 6%; } }
@keyframes dp-walk-b { 0%, 18% { right: 6%; } 45%, 82% { right: 26%; } 100% { right: 6%; } }
@keyframes dp-ring {
  0%, 20% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  50%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
}
.dp-caption {
  margin-top: 16px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-400);
}

/* ── Demo 2: mapmaker ── */
.demo-map { position: relative; padding: 26px; background: linear-gradient(180deg, #fff, var(--ice-050)); }
.dm-grid {
  position: relative; height: 300px; border-radius: 16px; background: var(--surface-2);
  background-image: var(--grid-lines); background-size: 36px 36px; overflow: hidden;
}
.dm-grid::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(43, 210, 122, .18), rgba(53, 217, 240, .14));
  animation: dm-paint 8s ease-in-out infinite;
}
@keyframes dm-paint { 0%, 12% { width: 0; } 55%, 88% { width: 100%; } 100% { width: 0; } }
.dm-prop {
  position: absolute; image-rendering: pixelated; opacity: 0; width: 74px;
  filter: drop-shadow(0 6px 5px rgba(11, 34, 64, .25));
}
.dm-p1 { left: 14%; top: 26%; animation: dm-pop 8s ease infinite .9s; }
.dm-p2 { left: 46%; top: 16%; width: 60px; animation: dm-pop 8s ease infinite 1.7s; }
.dm-p3 { left: 70%; top: 46%; width: 64px; animation: dm-pop 8s ease infinite 2.5s; }
@keyframes dm-pop {
  0%, 14% { opacity: 0; transform: translateY(10px) scale(.7); }
  24%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(10px) scale(.7); }
}
.dm-cursor {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(46, 150, 245, .5);
  left: 10%; top: 30%; animation: dm-cursor 8s ease-in-out infinite;
}
@keyframes dm-cursor {
  0% { left: 10%; top: 30%; } 22% { left: 18%; top: 32%; } 42% { left: 50%; top: 22%; }
  62% { left: 74%; top: 52%; } 82% { left: 40%; top: 60%; } 100% { left: 10%; top: 30%; }
}

/* ── Demo 3: resumen IA de reunión ── */
.demo-sum { position: relative; padding: 26px; background: linear-gradient(180deg, #fff, var(--ice-050)); }
.ds-card {
  height: 300px; border-radius: 16px; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-card); padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.ds-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.ds-dot { width: 10px; height: 10px; border-radius: 50%; background: #E0464A; animation: ds-rec 1.6s ease infinite; }
@keyframes ds-rec { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.ds-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--ice-200), var(--ice-100));
  transform-origin: left; animation: ds-type 6s ease infinite;
}
.ds-line.w80 { width: 80%; } .ds-line.w95 { width: 95%; animation-delay: .5s; } .ds-line.w60 { width: 60%; animation-delay: 1s; }
@keyframes ds-type {
  0%, 8% { transform: scaleX(0); opacity: 0; }
  22%, 88% { transform: none; opacity: 1; }
  96%, 100% { transform: scaleX(0); opacity: 0; }
}
.ds-chips { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.ds-chip {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 14px;
  opacity: 0; animation: ds-chip 6s ease infinite;
}
.ds-chip.c1 { background: rgba(43, 210, 122, .16); color: #1FA85E; animation-delay: 1.6s; }
.ds-chip.c2 { background: rgba(46, 150, 245, .14); color: #1E86E5; animation-delay: 2.1s; }
.ds-chip.c3 { background: rgba(229, 162, 58, .16); color: #B97E22; animation-delay: 2.6s; }
@keyframes ds-chip {
  0%, 20% { opacity: 0; transform: translateY(8px); }
  34%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-av-a, .dp-av-b, .dp-ring, .dm-grid::before, .dm-prop, .dm-cursor,
  .ds-line, .ds-chip, .ds-dot { animation: none !important; opacity: 1 !important; transform: none !important; }
  .dm-grid::before { width: 60%; }
  .dp-ring { opacity: 1; }
}
@media (max-width: 840px) {
  .dp-stage, .dm-grid, .ds-card { height: 240px; }
  .dp-av { width: 86px; } .dp-av video { width: 86px; height: 86px; }
}