/* V7: expressive portrait acting with full-detail, temporally stable alpha. */
.stage { --pointer-x: 0px; --pointer-y: 0px; }
.stage-aura, .stage-streak { position: absolute; pointer-events: none; }
.stage-aura {
  inset: 7% 8% -15%; z-index: 0; opacity: .17;
  background: radial-gradient(ellipse at 54% 64%, var(--character-accent), transparent 63%);
  transform-origin: 54% 70%;
}
.stage-streak {
  inset: -30% -20%; z-index: 0; opacity: 0;
  background: linear-gradient(112deg, transparent 42%, var(--character-accent) 49%, transparent 56%);
}
.portrait-window {
  translate: var(--pointer-x) var(--pointer-y);
  transition: translate .24s ease-out;
}
.portrait-layer { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.portrait-layer.is-visible { opacity: 1; }
.hero-portrait { opacity: 1; transform: none; transition: none; transform-origin: 50% 78%; }
.portrait-layer.is-visible .hero-portrait {
  animation: none;
}
.portrait-video {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none;
}
.portrait-canvas { opacity: 0; }
.portrait-layer.has-motion-frame .portrait-canvas { opacity: 1; }
.portrait-layer.has-motion-frame > img { visibility: hidden; }
.character-name {
  translate: calc(var(--pointer-x) * -.6) calc(var(--pointer-y) * -.4);
  transition: color .28s ease, translate .32s ease-out;
}
.selection-arena.is-changing .character-name { animation: none; }
.character-card {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s, box-shadow .25s;
}
.card-portrait img { transition: transform .4s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 25%; }
.character-card.is-selected .card-portrait img { transform: scale(1.045); }
.selected-tag { font-size: 12px; }
.confirm-button { position: relative; isolation: isolate; overflow: hidden; }
.confirm-button::after {
  content: ""; position: absolute; inset: -80% -20%; z-index: -1; opacity: 0;
  background: linear-gradient(110deg, transparent 35%, #ffffff77 50%, transparent 65%);
  pointer-events: none;
}
.selection-arena.is-changing .confirm-button::after { animation: confirm-sheen .65s ease-out; }
.confirm-symbol { display: inline-block; }
.selection-arena.is-changing .confirm-symbol { animation: confirm-tick .38s cubic-bezier(.16,1,.3,1); }
.confirmation[open] { animation: none; border-color: var(--accent); }
.confirmation .ready-label > span { display: inline-block; }
.confirmation-portrait { overflow: hidden; }
.confirmation-portrait img { transform-origin: 50% 25%; }
.is-confirming .hero-portrait, .motion-suspended .hero-portrait { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .character-card:hover .card-portrait img { transform: scale(1.075); }
  .direction:hover svg { transform: scale(1.15); }
  .direction svg { transition: transform .2s ease; }
}
@keyframes confirm-sheen {
  0% { opacity: 0; transform: translateX(-65%); }
  22% { opacity: .6; }
  100% { opacity: 0; transform: translateX(65%); }
}
@keyframes confirm-tick {
  0% { transform: scale(.65) rotate(-16deg); }
  60% { transform: scale(1.18) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-layer.has-motion-frame > img { visibility: visible; }
  .portrait-layer .portrait-canvas, .portrait-layer .portrait-video { display: none; }
  .portrait-window, .character-name { translate: none; }
  .hero-portrait, .card-portrait img, .direction svg { transform: none !important; }
  .stage-streak { display: none; }
}