/* Feature demos: small looping scenes that show each feature doing its thing.
   Pure CSS keyframes; each scene is one timeline so its parts stay in step. They run only while
   on screen (.play, set by site.js) and hold a sensible still frame under reduced-motion. */

.demo {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #6a5ad6 0%, #5142b8 45%, #3b2f96 100%);
  box-shadow: 0 10px 30px rgba(35, 25, 90, 0.22);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.demo:not(.play) * { animation-play-state: paused !important; }
.demo.reset * { animation: none !important; }

/* Shared parts */
.demo .mbar {
  position: absolute; top: 0; left: 0; right: 0; height: 24px;
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: translateY(-100%);
}
.demo .mbar .app { font-weight: 700; }
.demo .mbar .right { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.demo .mbar svg { width: 12px; height: 12px; fill: currentColor; display: block; }
.demo .mbar .glyph { width: 22px; height: 16px; display: block; }
.demo .win {
  position: absolute; background: #f6f7f9; border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); overflow: hidden; color: #333;
}
.demo .win .title {
  height: 22px; background: #e9ebef; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  font-size: 9.5px; font-weight: 600; color: #444;
}
.demo .win .dots { display: flex; gap: 4px; }
.demo .win .dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.demo .win .dots i:nth-child(2) { background: #febc2e; }
.demo .win .dots i:nth-child(3) { background: #28c840; }
.demo .cursor { position: absolute; width: 15px; height: 21px; z-index: 5; }
.demo .cursor svg { width: 15px; height: 21px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.demo .cursor .ripple {
  position: absolute; left: -10px; top: -10px; width: 26px; height: 26px;
  border-radius: 50%; border: 2px solid #fff; opacity: 0; transform: scale(.4);
}
.demo .note {
  position: absolute; font-family: "Caveat", "Bradley Hand", cursive; font-size: 19px; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); opacity: 0; white-space: nowrap;
}

/* 1. Right-click the bar (8s) */
.demo-click .mbar { animation: d1-bar 8s ease-in-out infinite; }
.demo-click .cursor { animation: d1-cursor 8s ease-in-out infinite; }
.demo-click .cursor .ripple { animation: d1-ripple 8s ease-out infinite; }
.demo-click .note-click { left: 52%; top: 34px; transform: rotate(-3deg); animation: d1-note-click 8s infinite; }
.demo-click .note-stay { left: 8%; top: 32px; transform: rotate(-2deg); animation: d1-note-stay 8s infinite; }
@keyframes d1-cursor {
  0%, 8%   { left: 55%; top: 62%; }
  20%, 46% { left: 46%; top: 5px; }
  56%, 62% { left: 40%; top: 58%; }
  72%, 84% { left: 48%; top: 5px; }
  100%     { left: 55%; top: 62%; }
}
@keyframes d1-bar {
  0%, 20%  { transform: translateY(-100%); }
  27%, 77% { transform: translateY(0); }
  84%, 100% { transform: translateY(-100%); }
}
@keyframes d1-ripple {
  0%, 29%  { opacity: 0; transform: scale(.4); }
  30%      { opacity: 1; transform: scale(.4); }
  37%      { opacity: 0; transform: scale(1.5); }
  76%      { opacity: 0; transform: scale(.4); }
  77%      { opacity: 1; transform: scale(.4); }
  84%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes d1-note-click {
  0%, 29% { opacity: 0; } 31%, 44% { opacity: 1; } 48%, 75% { opacity: 0; } 77%, 88% { opacity: 1; } 92%, 100% { opacity: 0; }
}
@keyframes d1-note-stay { 0%, 54% { opacity: 0; } 58%, 70% { opacity: 1; } 74%, 100% { opacity: 0; } }

/* 2. The shortcut (9s) */
.demo-keys .win { left: 8%; right: 8%; top: 16%; height: 46%; }
.demo-keys .row { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; font-size: 11px; color: #222; }
.demo-keys .field {
  position: relative; width: 120px; height: 24px; border-radius: 6px; background: #fff;
  border: 1px solid #d0d4da; text-align: center; font-size: 13px; line-height: 24px; font-weight: 500;
}
.demo-keys .field .v { position: absolute; inset: 0; opacity: 0; }
.demo-keys .field .v1 { animation: d2-v1 9s infinite; }
.demo-keys .field .v2 { animation: d2-v2 9s infinite; }
.demo-keys .field .ph { color: #9a9ea6; font-weight: 400; animation: d2-ph 9s infinite; }
.demo-keys .clear { padding: 5px 9px; border-radius: 6px; background: #e6e8ec; font-size: 11px; }
.demo-keys .status { position: relative; height: 30px; margin: 8px 14px 0; font-size: 10.5px; line-height: 1.3; }
.demo-keys .status span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.demo-keys .status .ok { color: #3d8b3d; animation: d2-ok 9s infinite; }
.demo-keys .status .bad { color: #d0342c; animation: d2-bad 9s infinite; }
.demo-keys .keys { position: absolute; bottom: 12%; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; opacity: 0; }
.demo-keys .keys.set1 { animation: d2-set1 9s infinite; }
.demo-keys .keys.set2 { animation: d2-set2 9s infinite; }
.demo-keys kbd {
  font-family: var(--font); font-size: 15px; font-weight: 500; color: #222;
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; background: #fff;
  box-shadow: 0 3px 0 #b9bec6, 0 4px 8px rgba(0, 0, 0, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
}
.demo-keys kbd.wide { min-width: 92px; font-size: 12px; }
.demo-keys .set1 kbd:nth-child(1) { animation: d2-press 9s infinite; animation-delay: 0.30s; }
.demo-keys .set1 kbd:nth-child(2) { animation: d2-press 9s infinite; animation-delay: 0.65s; }
.demo-keys .set1 kbd:nth-child(3) { animation: d2-press 9s infinite; animation-delay: 1.00s; }
.demo-keys .set1 kbd:nth-child(4) { animation: d2-press 9s infinite; animation-delay: 1.35s; }
.demo-keys .set2 kbd:nth-child(1) { animation: d2-press 9s infinite; animation-delay: 4.85s; }
.demo-keys .set2 kbd:nth-child(2) { animation: d2-press 9s infinite; animation-delay: 5.20s; }
@keyframes d2-press { 0%, 1% { transform: none; box-shadow: 0 3px 0 #b9bec6, 0 4px 8px rgba(0,0,0,.25); background: #fff; }
  2.5%, 5% { transform: translateY(3px); box-shadow: 0 0 0 #b9bec6, 0 1px 3px rgba(0,0,0,.25); background: #dfe3ea; }
  6.5%, 100% { transform: none; box-shadow: 0 3px 0 #b9bec6, 0 4px 8px rgba(0,0,0,.25); background: #fff; } }
@keyframes d2-set1 { 0%, 1% { opacity: 0; } 3%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes d2-set2 { 0%, 50% { opacity: 0; } 53%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes d2-ph  { 0%, 18% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes d2-v1  { 0%, 19% { opacity: 0; } 21%, 62% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes d2-v2  { 0%, 63% { opacity: 0; } 65%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes d2-ok  { 0%, 23% { opacity: 0; } 25%, 62% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes d2-bad { 0%, 66% { opacity: 0; } 68%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* 3. Per-app rules (10s) */
.demo-rules .mbar { transform: none; animation: d3-bar 10s ease-in-out infinite; }
.demo-rules .win.mail { left: 6%; top: 18%; width: 58%; height: 66%; animation: d3-mail 10s ease-in-out infinite; }
.demo-rules .win.citrix { left: 30%; top: 26%; width: 62%; height: 66%; animation: d3-citrix 10s ease-in-out infinite; }
.demo-rules .win .body { padding: 8px; display: grid; gap: 6px; }
.demo-rules .win .line { height: 7px; border-radius: 4px; background: #dfe3ea; }
.demo-rules .win .line.short { width: 55%; }
.demo-rules .win.citrix .body { background: #1d1a33; height: 100%; }
.demo-rules .win.citrix .line { background: #3a3560; }
.demo-rules .cursor { animation: d3-cursor 10s ease-in-out infinite; }
.demo-rules .cursor .ripple { animation: d3-ripple 10s ease-out infinite; }
.demo-rules .chip {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.35); font-size: 10px; white-space: nowrap;
}
.demo-rules .chip b { font-weight: 700; }
.demo-rules .chip .state { animation: d3-chip 10s infinite; }
@keyframes d3-bar { 0%, 30% { transform: none; } 36%, 68% { transform: translateY(-100%); } 74%, 100% { transform: none; } }
@keyframes d3-mail   { 0%, 22% { z-index: 2; filter: none; } 28%, 60% { z-index: 1; filter: brightness(.86); } 66%, 100% { z-index: 2; filter: none; } }
@keyframes d3-citrix { 0%, 22% { z-index: 1; filter: brightness(.86); } 28%, 60% { z-index: 2; filter: none; } 66%, 100% { z-index: 1; filter: brightness(.86); } }
@keyframes d3-cursor { 0%, 12% { left: 30%; top: 50%; } 20%, 56% { left: 74%; top: 40%; } 62%, 100% { left: 24%; top: 56%; } }
@keyframes d3-ripple { 0%, 21% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; } 29% { opacity: 0; transform: scale(1.5); } 61% { opacity: 0; transform: scale(.4); } 62% { opacity: 1; } 69%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes d3-chip { 0%, 24% { opacity: .55; } 30%, 66% { opacity: 1; } 72%, 100% { opacity: .55; } }

/* 4. Icon styles (8.4s: seven styles, 1.2s each; within each, the glyph flips hidden → shown) */
.demo-icons .mbar { transform: none; }
.demo-icons .slot { position: relative; width: 22px; height: 16px; padding: 4px 5px; margin: -4px -1px; border-radius: 5px; background: rgba(255, 255, 255, 0.28); box-sizing: content-box; }
.demo-icons .style { position: absolute; inset: 0; opacity: 0; animation: d4-show 8.4s infinite; }
.demo-icons .slot .style { inset: 4px 5px; }
.demo-icons .style img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.demo-icons .style img:first-child { animation: d4-flip-a 1.2s steps(1) infinite; }
.demo-icons .style img:last-child { animation: d4-flip-b 1.2s steps(1) infinite; }
.demo-icons .big { position: absolute; left: 50%; top: 34%; width: 88px; height: 64px; margin-left: -44px; }
.demo-icons .names { position: absolute; left: 0; right: 0; top: 34%; margin-top: 78px; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.demo-icons .names span { position: absolute; left: 0; right: 0; opacity: 0; animation: d4-show 8.4s infinite; }
.demo-icons .states { position: absolute; left: 0; right: 0; top: 34%; margin-top: 108px; text-align: center; font-size: 11px; opacity: .85; }
.demo-icons .states span { position: absolute; left: 0; right: 0; opacity: 0; }
.demo-icons .states .s1 { animation: d4-flip-a 1.2s steps(1) infinite; }
.demo-icons .states .s2 { animation: d4-flip-b 1.2s steps(1) infinite; }
.demo-icons .style:nth-child(1), .demo-icons .names span:nth-child(1) { animation-delay: 0s; }
.demo-icons .style:nth-child(2), .demo-icons .names span:nth-child(2) { animation-delay: 1.2s; }
.demo-icons .style:nth-child(3), .demo-icons .names span:nth-child(3) { animation-delay: 2.4s; }
.demo-icons .style:nth-child(4), .demo-icons .names span:nth-child(4) { animation-delay: 3.6s; }
.demo-icons .style:nth-child(5), .demo-icons .names span:nth-child(5) { animation-delay: 4.8s; }
.demo-icons .style:nth-child(6), .demo-icons .names span:nth-child(6) { animation-delay: 6s; }
.demo-icons .style:nth-child(7), .demo-icons .names span:nth-child(7) { animation-delay: 7.2s; }
@keyframes d4-show   { 0%, 13.5% { opacity: 1; } 14.3%, 100% { opacity: 0; } }
@keyframes d4-flip-a { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes d4-flip-b { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .demo * { animation: none !important; }
  .demo .mbar { transform: none; }
  .demo .cursor { display: none; }
  .demo .note-stay, .demo-keys .set1, .demo-keys .field .v1, .demo-keys .status .ok,
  .demo-icons .style:first-child, .demo-icons .style:first-child img:first-child,
  .demo-icons .names span:first-child, .demo-icons .states .s1 { opacity: 1; }
  .demo-icons .style:not(:first-child) { display: none; }
}