/* NFC demonstration only. Change --nfc-loop to scale the entire sequence.
   Percentages synchronize every layer over the same 6.7-second timeline:
   0–12 idle; 12–24 approach; 24–32 pulse; 28–37 notification;
   36–49 website opens; 49–70 hold; 70–82 retreat; 82–93 reset.
   Card travel is in SVG viewBox units, independent of responsive size. */
.nfc-demo {
  --nfc-loop: 6.7s;
  --nfc-card-x: 8px; /* Wider card needs less horizontal travel to reach the phone. */
  --nfc-card-y: -112px;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-family: inherit;
}
.nfc-demo-card { animation: nfc-card-travel var(--nfc-loop) infinite; }
.nfc-demo-wave { animation: nfc-wave-pulse var(--nfc-loop) infinite; }
.nfc-demo-wave-2 { animation-name: nfc-wave-pulse-2; }
.nfc-demo-wave-3 { animation-name: nfc-wave-pulse-3; }
.nfc-demo-notification {
  opacity: 0;
  transform-origin: 516px 115px;
  animation: nfc-notification var(--nfc-loop) infinite;
}
.nfc-demo-notification-bg { animation: nfc-notification-press var(--nfc-loop) infinite; }
.nfc-demo-website { animation: nfc-website-open var(--nfc-loop) infinite; }
.nfc-demo-home { opacity: .65; }
.nfc-demo-card, .nfc-demo-notification, .nfc-demo-website {
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
@keyframes nfc-card-travel {
  0%, 12%, 82%, 100% { transform: translate(0, 0); }
  24%, 70% { transform: translate(var(--nfc-card-x), var(--nfc-card-y)); }
}
/* Two subtle outward pulses, staggered across the three signal paths. */
@keyframes nfc-wave-pulse {
  0%, 23%, 33%, 100% { opacity: .8; transform: translateX(0); }
  25%, 29% { opacity: 1; transform: translateX(2px); }
  27%, 31% { opacity: .25; transform: translateX(4px); }
}
@keyframes nfc-wave-pulse-2 {
  0%, 24%, 34%, 100% { opacity: .8; transform: translateX(0); }
  26%, 30% { opacity: 1; transform: translateX(2px); }
  28%, 32% { opacity: .25; transform: translateX(4px); }
}
@keyframes nfc-wave-pulse-3 {
  0%, 25%, 35%, 100% { opacity: .8; transform: translateX(0); }
  27%, 31% { opacity: 1; transform: translateX(2px); }
  29%, 33% { opacity: .25; transform: translateX(4px); }
}
@keyframes nfc-notification {
  0%, 28%, 43%, 100% { opacity: 0; transform: translateY(-18px); }
  32%, 34%, 37% { opacity: 1; transform: translateY(0) scale(1); }
  35.5% { opacity: 1; transform: translateY(0) scale(.97); }
}
@keyframes nfc-notification-press {
  0%, 34%, 38%, 100% { fill: #e8eedc; }
  35.5%, 37% { fill: #b9ca98; }
}
@keyframes nfc-website-open {
  0%, 36%, 100% { transform: translateY(480px); opacity: 1; }
  49%, 82% { transform: translateY(0); opacity: 1; }
  93% { transform: translateY(0); opacity: 0; }
  94% { transform: translateY(480px); opacity: 0; }
}
/* A completed illustration remains visible without continuous motion. */
@media (prefers-reduced-motion: reduce) {
  .nfc-demo * { animation: none; }
  .nfc-demo-card, .nfc-demo-wave, .nfc-demo-website { transform: none; }
  .nfc-demo-website { opacity: 1; }
  .nfc-demo-notification { opacity: 0; }
}