/* AvaBlockedYa page — the hero illustration loop and the live demo frame. */
.aby-hero { position: relative; max-width: 470px; margin-left: auto; }
.aby-frame, .aby-demo {
  position: relative; border-radius: 18px; overflow: hidden; background: #111;
  padding: 18px; border: 1px solid var(--pp-line-2);
  box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--pp-accent) 28%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.aby-frame img, .aby-frame canvas, .aby-demo img, .aby-demo canvas { display: block; width: 100%; height: auto; border-radius: 6px; aspect-ratio: 4 / 5; object-fit: cover; }
.aby-hero__cursor { position: absolute; width: 30px; height: 30px; left: 70%; top: 78%; z-index: 7; pointer-events: none; animation: aby-cursor 9s var(--pp-ease) infinite; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.aby-hero__cursor svg { width: 100%; height: 100%; }
.aby-hero__menu {
  position: absolute; left: 48%; top: 44%; z-index: 6; display: grid; min-width: 210px; padding: 6px;
  background: rgba(30, 32, 38, .96); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  font: 13px/1 var(--pp-sans); color: #e8eaed; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  opacity: 0; transform: scale(.92); transform-origin: top left; pointer-events: none; animation: aby-menu 9s var(--pp-ease) infinite;
}
.aby-hero__menu span { padding: 10px 12px; border-radius: 6px; }
.aby-hero__menu span:first-child { background: color-mix(in srgb, var(--pp-accent) 16%, transparent); }
.aby-hero__veil {
  position: absolute; inset: 18px; z-index: 5; border-radius: 6px; display: grid; place-content: center; gap: 10px; text-align: center; padding: 20px;
  background: rgba(10, 11, 13, .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #f3efe4;
  opacity: 0; pointer-events: none; animation: aby-veil 9s var(--pp-ease) infinite;
}
.aby-hero__veil b { font: 600 12px/1 var(--pp-mono); letter-spacing: .16em; text-transform: uppercase; color: #ff6fae; }
.aby-hero__veil span { font: 400 clamp(22px, 2.6vw, 34px)/1.1 var(--pp-serif); }
.aby-hero__veil code { font: 12px/1.4 var(--pp-mono); opacity: .82; }
.aby-hero__cap { margin: 12px 0 0; max-width: 470px; margin-left: auto; }

@keyframes aby-cursor {
  0%, 8% { left: 78%; top: 86%; opacity: 0; }
  14% { opacity: 1; }
  30%, 36% { left: 46%; top: 42%; }
  37% { transform: scale(.86); } 40% { transform: none; }
  74% { left: 46%; top: 42%; opacity: 1; }
  86%, 100% { left: 80%; top: 90%; opacity: 0; }
}
@keyframes aby-menu { 0%, 38% { opacity: 0; transform: scale(.92); } 41%, 50% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: scale(.96); } }
@keyframes aby-veil { 0%, 50% { opacity: 0; } 54%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }

.pp kbd { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--pp-line-2); border-bottom-width: 2px; font: 600 .82em/1.4 var(--pp-mono); color: var(--pp-text); background: var(--pp-elev); }
.pp-log time { color: var(--pp-dim); }
.pp-log code { color: var(--pp-accent); }

@media (prefers-reduced-motion: reduce) {
  .aby-hero__cursor, .aby-hero__menu { display: none; }
  .aby-hero__veil { animation: none; opacity: 0; }
}