/* Fusion: the ladder of rarities and a stage where four cards become one (js/fusion.js plays it). */

.fusion-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; }

.fusion-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin-top: 40px; }
.fusion-ladder li { display: flex; align-items: center; color: var(--rarity); font: 24px/1 var(--display); }
.fusion-ladder li + li::before { margin-inline: 10px; content: "×4 ›"; color: var(--dim); font: 16px/1 var(--text-font); }
.fusion-ladder li.is-current { text-shadow: 0 0 14px var(--rarity); }

.fusion-rules { display: grid; gap: 10px; margin-top: 30px; max-width: 460px; }
.fusion-rules li { position: relative; padding-left: 22px; color: var(--muted); font-size: 16px; }
.fusion-rules li::before { position: absolute; left: 0; top: .62em; width: 8px; height: 8px; content: ""; background: var(--accent); }

/* --rise is the distance from the middle of the four cards to the middle of the new one. */
.fusion-stage {
  --rise: 216px;
  position: relative;
  display: grid;
  justify-items: center;
  padding: 44px 32px 34px;
  background: var(--plate);
  box-shadow: inset 0 3px 0 var(--accent), inset 0 0 0 2px var(--line);
  clip-path: var(--corners);
}
.fusion-inputs { position: relative; z-index: 2; display: flex; gap: 14px; }
.fusion-inputs .card { --scale: 2; transition: transform .9s cubic-bezier(.5, 0, .7, 1), opacity .9s ease-in, filter .9s; }
.fusion-inputs .card .hero-sprite { --scale: 3; }
.fusion-inputs .card:nth-child(1) { --gather-x: 141px; }
.fusion-inputs .card:nth-child(2) { --gather-x: 47px; }
.fusion-inputs .card:nth-child(3) { --gather-x: -47px; }
.fusion-inputs .card:nth-child(4) { --gather-x: -141px; }

/* The link between the four cards and the new one: dim pixels at rest, a flowing beam while they fuse. */
.fusion-beam { width: 6px; height: 76px; background: repeating-linear-gradient(#3b4357 0 6px, transparent 6px 14px); transition: width .25s; }
.fusion-result { position: relative; display: grid; place-items: center; width: 120px; height: 168px; }
/* The empty slot: a card's outline in the plate's lines. */
.fusion-result::before { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(90deg, #3b4357 0 6px, transparent 6px 12px) top / 100% 2px no-repeat, repeating-linear-gradient(90deg, #3b4357 0 6px, transparent 6px 12px) bottom / 100% 2px no-repeat, repeating-linear-gradient(#3b4357 0 6px, transparent 6px 12px) left / 2px 100% no-repeat, repeating-linear-gradient(#3b4357 0 6px, transparent 6px 12px) right / 2px 100% no-repeat; transition: opacity .2s; }
.fusion-result .card { --scale: 3; opacity: 0; scale: .6; transition: opacity .25s, scale .3s cubic-bezier(.3, 1.6, .6, 1), transform .14s ease-in, filter .2s; }
.fusion-controls { display: grid; justify-items: center; gap: 12px; margin-top: 36px; text-align: center; }
.fusion-controls .button { min-width: 300px; }
.fusion-controls p { color: var(--dim); font-size: 13px; }

/* Fusing: the four cards rise into the beam, toward the slot, and fade in a flash. */
.fusion-stage[data-state="fusing"] .fusion-inputs .card { opacity: 0; filter: brightness(2.2) saturate(.3); transform: translate(var(--gather-x), var(--rise)) scale(.4); }
.fusion-stage[data-state="fusing"] .fusion-beam { width: 10px; background: repeating-linear-gradient(#ff5fd2 0 6px, #ffd1f3 6px 8px, transparent 8px 14px); filter: drop-shadow(0 0 6px #ff5fd2); animation: beam-flow .3s steps(7) infinite; }
@keyframes beam-flow { to { background-position-y: 14px; } }
.fusion-stage:is([data-state="formed"], [data-state="splitting"]) .fusion-inputs .card { opacity: 0; transition: none; }
.fusion-stage:not([data-state="ready"]) .fusion-result::before { opacity: 0; }
.fusion-stage[data-state="formed"] .fusion-result .card { opacity: 1; scale: 1; }

/* Splitting: the new card rises to the row above and comes apart into the four cards of the next fusion. */
.fusion-stage[data-state="splitting"] .fusion-result .card { opacity: 0; scale: .5; translate: 0 calc(var(--rise) * -1); transition: translate .45s ease-in, scale .45s ease-in, opacity .45s ease-in; }
.fusion-inputs .card.is-gathered { opacity: 0; transform: translate(var(--gather-x), 0) scale(.5); transition: none; }
.fusion-stage[data-state="splitting"] .fusion-inputs .card:not(.is-gathered) { opacity: 1; transition: transform .55s cubic-bezier(.2, .8, .3, 1), opacity .35s; }

@media (max-width: 1199px) { .fusion-grid { gap: 44px; } }
@media (max-width: 959px) { .fusion-grid { grid-template-columns: 1fr; } .fusion-stage { width: min(560px, 100%); justify-self: center; } }
@media (max-width: 719px) {
  .fusion-stage { --rise: 202px; padding: 32px 14px 26px; }
  .fusion-inputs { gap: 8px; }
  .fusion-inputs .card { --scale: 1.5; }
  .fusion-inputs .card .hero-sprite { --scale: 2; }
  .fusion-inputs .card:nth-child(1) { --gather-x: 102px; }
  .fusion-inputs .card:nth-child(2) { --gather-x: 34px; }
  .fusion-inputs .card:nth-child(3) { --gather-x: -34px; }
  .fusion-inputs .card:nth-child(4) { --gather-x: -102px; }
  .fusion-controls .button { min-width: 0; width: 100%; }
  .fusion-ladder li { font-size: 21px; }
}