/* Small decorative board demos. Product advice stays in the guide card copy. */
.surface-demo {
  width: 100%;
  max-width: 350px;
  margin: -1px auto 1px;
  aspect-ratio: 320 / 184;
  pointer-events: none;
  user-select: none;
  contain: layout style;
}
.surface-demo__scene { display: block; width: 100%; height: 100%; overflow: visible; }
.surface-demo__stroke {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.surface-demo__stroke--blue { stroke: #174d91; }
.surface-demo__stroke--orange { stroke: #e77e0d; }
.surface-demo__eraser { opacity: 0; transform: translate(21px, 66px); }
.surface-demo.is-playing .surface-demo__stroke {
  animation: surface-ink-draw .78s cubic-bezier(.22, .68, .36, 1) var(--stroke-delay, 0ms) both;
}
.surface-demo.is-playing .surface-demo__wipe-clip { animation: surface-ink-wipe 3.4s both; }
.surface-demo.is-playing .surface-demo__ink { animation: surface-ink-return 3.4s both; }
.surface-demo.is-playing .surface-demo__eraser { animation: surface-eraser-pass 3.4s both; }

@keyframes surface-ink-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes surface-ink-wipe {
  0%, 45% { transform: translateX(0); }
  76%, 80% { transform: translateX(270px); }
  81%, 100% { transform: translateX(0); }
}
@keyframes surface-ink-return {
  0%, 76% { opacity: 1; }
  77%, 85% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes surface-eraser-pass {
  0%, 40% { opacity: 0; transform: translate(21px, 66px) rotate(-9deg); }
  45% { opacity: 1; transform: translate(21px, 66px) rotate(-9deg); }
  76% { opacity: 1; transform: translate(277px, 66px) rotate(5deg); }
  82%, 100% { opacity: 0; transform: translate(286px, 66px) rotate(5deg); }
}

@media (max-width: 760px) {
  .surface-demo { max-width: 300px; margin-block: -5px -2px; }
}
@media (max-width: 380px) {
  .surface-demo { max-width: 250px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .surface-demo { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .surface-demo *, .surface-demo.is-playing * { animation: none !important; }
  .surface-demo__stroke { stroke-dashoffset: 0; }
  .surface-demo__eraser { opacity: 0; }
}