/* Life: motion and feedback that make the build screens feel like a game.
   Springy where it's a choice, calm everywhere else (docs/UX_PLAN.md 4). */

.fx-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

/* The show's neon-bar wipe, for the jump into a match. */
.wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.wipe i, .wipe b { position: absolute; top: -20%; bottom: -20%; width: 70%; transform: translateX(-120%) skewX(-18deg); }
.wipe i:nth-child(1) { background: #22d3ee; animation: wipe-in .45s cubic-bezier(.7, 0, .3, 1) forwards; }
.wipe i:nth-child(2) { background: #ec4899; animation: wipe-in .45s .05s cubic-bezier(.7, 0, .3, 1) forwards; }
.wipe i:nth-child(3) { background: #facc15; animation: wipe-in .45s .1s cubic-bezier(.7, 0, .3, 1) forwards; }
.wipe b { width: 160%; background: var(--bg); animation: wipe-cover .45s .12s cubic-bezier(.7, 0, .3, 1) forwards; }
.wipe.away b { transform: translateX(-20%) skewX(-18deg); animation: wipe-away .5s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes wipe-in { to { transform: translateX(160%) skewX(-18deg); } }
@keyframes wipe-cover { to { transform: translateX(-20%) skewX(-18deg); } }
@keyframes wipe-away { to { transform: translateX(120%) skewX(-18deg); } }

/* Headings slide in each time a screen opens. */
main:not([hidden]) .step-title { animation: head-in .45s var(--out) both; }
main:not([hidden]) .step-sub { animation: head-in .45s .06s var(--out) both; }
@keyframes head-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The main button: a light sweep every few seconds, a squash on press. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; inset: -20% auto -20% -40%; width: 30%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: shine 4.2s 1.2s ease-in-out infinite;
}
@keyframes shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.btn-primary:active { transform: scale(.95, .93); }
@media (hover: hover) { .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 30px -10px rgba(34, 211, 238, .85); } }

/* ------------------------------------------------------------ fighter */

.tile { transition: transform .18s var(--spring), border-color .2s, box-shadow .2s; }
@media (hover: hover) { .tile:hover { transform: translateY(-3px); } .tile:hover img { transform: scale(1.12); } }
.tile img { transition: transform .25s var(--spring); }
.tile[aria-checked="true"] img { transform: scale(1.14); }
.tile[aria-checked="true"] { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px rgba(34, 211, 238, .3), 0 8px 26px -6px rgba(34, 211, 238, .9); } }

/* The "you" ring pulses when a new fighter lands on it. */
.you-ring.slam { animation: ring-slam .5s var(--out); }
@keyframes ring-slam { 0% { transform: scale(.7); box-shadow: 0 0 40px rgba(34, 211, 238, 1), inset 0 0 20px rgba(34, 211, 238, .8); } 100% { transform: none; } }
.you-ring::after { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 2px solid rgba(34, 211, 238, .35); animation: ripple 2.6s ease-out infinite; }
@keyframes ripple { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* ------------------------------------------------------------ style cards */

.styles { perspective: 900px; }
.style-card {
  overflow: visible;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .2s var(--out), border-color .2s, box-shadow .2s;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%), var(--panel);
}
.style-card:active { transform: scale(.97); }
/* The character breaks out of the card frame when it's hovered or chosen. */
.style-art img { transition: transform .35s var(--spring), filter .3s; transform-origin: 50% 100%; }
@media (hover: hover) { .style-card:hover .style-art img { transform: translateY(-10px) scale(1.1); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); } }
.style-card[aria-checked="true"] .style-art img { transform: translateY(-10px) scale(1.1); filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.style-card[aria-checked="true"] { animation: glow 2.4s ease-in-out infinite; }
.style-card[aria-checked="true"] .style-title { color: var(--accent); }
.style-card.picked { animation: picked .4s var(--spring), glow 2.4s .4s ease-in-out infinite; }
@keyframes picked { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }

/* ------------------------------------------------------------ name */

.name-plate { transition: transform .2s var(--spring); }
.name-field input:focus + .reroll, .reroll:hover { color: var(--accent); }
.reroll:active svg { transform: rotate(160deg); }
.reroll svg { transition: transform .35s var(--spring); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .tile[aria-checked="true"], .style-card[aria-checked="true"], .you-ring::after,
  .style-card[aria-checked="true"] .style-art img { animation: none; }
}

/* The show's moving perspective floor, behind the build screens (the
   landing has its own match backdrop; the match has the arena). */
.bg-floor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s var(--out); }
body:is([data-screen="fighter"], [data-screen="name"], [data-screen="style"], [data-screen="result"]) .bg-floor { opacity: 1; }
.bg-grid {
  position: absolute; inset: -50%;
  background-image: linear-gradient(rgba(160, 120, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 120, 255, .12) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(640px) rotateX(58deg) translateY(22%);
  animation: grid-move 6s linear infinite;
  mask-image: radial-gradient(ellipse at 50% 62%, #000 16%, transparent 62%); -webkit-mask-image: radial-gradient(ellipse at 50% 62%, #000 16%, transparent 62%);
}
@keyframes grid-move { to { background-position: 0 64px; } }
@media (prefers-reduced-motion: reduce) { .bg-grid { animation: none; } }