/* luna-avatar.css — the minimum her face needs. Restyle freely: these are the only hooks the
   script uses (.luna-face-wrap, .on, .calm, .blocked, .luna-tap, and .luna-face-on on the slot).

   The slot must be positioned and sized by YOUR page. Her face is square and transparent,
   so it sits on whatever background you give the slot. */
.luna-slot { position: relative; aspect-ratio: 1 / 1; width: min(360px, 100%); }

/* her face over the placeholder, fading in on `ready` */
.luna-face-wrap { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .9s cubic-bezier(.22, .8, .3, 1); }
.luna-face-wrap.on { opacity: 1; }
.luna-face-wrap.calm { transition-duration: .4s; }
.luna-face-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; background: transparent; color-scheme: normal;
  /* a soft round feather, so her square never shows an edge */
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
}

/* the placeholder steps back once she is showing */
.luna-slot.luna-face-on > :not(.luna-face-wrap) { opacity: 0; transition: opacity .9s; }

/* the browser held her voice back: one tap anywhere plays it */
.luna-tap {
  position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); z-index: 3;
  pointer-events: none; display: none; padding: 6px 12px; border-radius: 999px;
  font: 700 12px/1.2 system-ui, sans-serif; color: #1d1a12;
  background: linear-gradient(180deg, #f6dc9a, #d9ac52); box-shadow: 0 6px 16px -6px rgba(184, 133, 46, .8);
}
.luna-face-wrap.blocked .luna-tap { display: block; animation: lunaTapPulse 1.6s ease-in-out infinite; }
@keyframes lunaTapPulse { 50% { transform: translateX(-50%) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .luna-face-wrap { transition-duration: .4s; }
  .luna-face-wrap.blocked .luna-tap { animation: none; }
}