/* Poker route animation used when moving between the portfolio and the playable poker platform. */
.poker-route-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  color: #fff8dd;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 210, 93, .16), transparent 20rem),
    radial-gradient(circle at 18% 18%, rgba(174, 45, 57, .22), transparent 17rem),
    linear-gradient(180deg, rgba(5, 9, 10, .88), rgba(8, 18, 17, .98)),
    #07100f;
  transition: opacity .16s ease, visibility .16s ease;
}

.poker-route-transition.is-active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.route-transition-lock {
  overflow: hidden !important;
}

.poker-route-stage {
  position: relative;
  width: min(88vw, 38rem);
  height: min(58vw, 24rem);
  transform: translateZ(0);
}

.poker-route-glow {
  position: absolute;
  inset: 12% 3% 4%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 216, 104, .22), transparent 62%);
  filter: blur(1.6rem);
  opacity: 0;
}

.poker-route-table {
  position: absolute;
  inset: 4.2rem 1rem 4rem;
  border: .72rem solid #6a4a22;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 .08rem, transparent .08rem 1.25rem),
    linear-gradient(135deg, #1d714b, #0d3e2c 58%, #092b21);
  box-shadow:
    0 1.35rem 3.2rem rgba(0, 0, 0, .45),
    inset 0 0 0 .12rem rgba(255, 236, 170, .36),
    inset 0 -.8rem 1.4rem rgba(0, 0, 0, .18);
  transform: scale(.72);
  opacity: 0;
}

.poker-route-cards,
.poker-route-chips {
  position: absolute;
  inset: 0;
}

.poker-route-card {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --i: 0;
  position: absolute;
  left: 50%;
  top: 49%;
  width: clamp(3.8rem, 10vw, 5.1rem);
  height: clamp(5.4rem, 14vw, 7.2rem);
  display: grid;
  place-items: center;
  border: .18rem solid #fff8ee;
  border-radius: .58rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .82), transparent 42%),
    #fff8ee;
  color: #20202a;
  font: 950 clamp(1rem, 3.4vw, 1.48rem)/1 system-ui, sans-serif;
  box-shadow: .45rem .58rem 0 rgba(0, 0, 0, .25), 0 1.3rem 2.2rem rgba(0, 0, 0, .22);
  backface-visibility: hidden;
  opacity: 0;
}

.poker-route-card::before,
.poker-route-card::after {
  content: attr(data-rank);
  position: absolute;
  font-size: .46em;
  line-height: 1;
}

.poker-route-card::before { left: .38rem; top: .38rem; }
.poker-route-card::after { right: .38rem; bottom: .38rem; transform: rotate(180deg); }
.poker-route-card.red { color: #b9313c; }

.poker-route-card:nth-child(1) { --x: -8.6rem; --y: .9rem; --r: -18deg; --i: 0; }
.poker-route-card:nth-child(2) { --x: -2.85rem; --y: -.62rem; --r: -6deg; --i: 1; }
.poker-route-card:nth-child(3) { --x: 2.85rem; --y: -.62rem; --r: 6deg; --i: 2; }
.poker-route-card:nth-child(4) { --x: 8.6rem; --y: .9rem; --r: 18deg; --i: 3; }

.poker-route-chip {
  --i: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(1.45rem, 4.5vw, 2.1rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: .26rem dashed #fff8ee;
  background: #c94343;
  box-shadow: inset 0 0 0 .28rem rgba(0, 0, 0, .12), 0 .42rem .9rem rgba(0, 0, 0, .3);
  opacity: 0;
}

.poker-route-chip::after {
  content: '';
  position: absolute;
  inset: 27%;
  border-radius: inherit;
  border: .12rem solid rgba(255, 248, 238, .78);
}

.poker-route-chip:nth-child(1) { --i: 0; background: #c94343; }
.poker-route-chip:nth-child(2) { --i: 1; background: #284f9d; }
.poker-route-chip:nth-child(3) { --i: 2; background: #d5ac4e; }
.poker-route-chip:nth-child(4) { --i: 3; background: #26222b; }

.poker-route-label {
  position: absolute;
  left: 50%;
  bottom: .7rem;
  min-width: min(82vw, 24rem);
  transform: translateX(-50%) translateY(.65rem);
  text-align: center;
  font: 950 clamp(1rem, 3.8vw, 1.35rem)/1.1 system-ui, sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 .25rem 1rem rgba(0, 0, 0, .45);
  opacity: 0;
}

.poker-route-label strong { color: #ffd665; }

.poker-route-transition[data-direction="to-poker"] .label-portfolio,
.poker-route-transition[data-direction="to-portfolio"] .label-poker {
  display: none;
}

.poker-route-transition.is-active .poker-route-glow {
  animation: pokerGlowPulse .88s ease forwards;
}

.poker-route-transition[data-direction="to-poker"].is-active .poker-route-table {
  animation: pokerTableIn .58s cubic-bezier(.2, .8, .2, 1) forwards;
}

.poker-route-transition[data-direction="to-poker"].is-active .poker-route-card {
  animation: pokerCardsDeal .76s cubic-bezier(.18, .86, .28, 1.18) forwards;
  animation-delay: calc(var(--i) * .055s);
}

.poker-route-transition[data-direction="to-poker"].is-active .poker-route-chip {
  animation: pokerChipRoll .66s cubic-bezier(.24, .78, .22, 1) forwards;
  animation-delay: calc(.18s + var(--i) * .065s);
}

.poker-route-transition[data-direction="to-poker"].is-active .poker-route-label {
  animation: pokerLabelIn .54s cubic-bezier(.2, .8, .2, 1) .2s forwards;
}

.poker-route-transition[data-direction="to-portfolio"].is-active .poker-route-table {
  animation: pokerTableOut .6s cubic-bezier(.2, .8, .2, 1) forwards;
}

.poker-route-transition[data-direction="to-portfolio"].is-active .poker-route-card {
  animation: pokerCardsCollect .7s cubic-bezier(.18, .86, .28, 1) forwards;
  animation-delay: calc(var(--i) * .045s);
}

.poker-route-transition[data-direction="to-portfolio"].is-active .poker-route-chip {
  animation: pokerChipCollect .62s cubic-bezier(.24, .78, .22, 1) forwards;
  animation-delay: calc(var(--i) * .045s);
}

.poker-route-transition[data-direction="to-portfolio"].is-active .poker-route-label {
  animation: pokerLabelIn .5s cubic-bezier(.2, .8, .2, 1) .16s forwards;
}

@keyframes pokerGlowPulse {
  0% { opacity: 0; transform: scale(.62); }
  45% { opacity: 1; transform: scale(1.04); }
  100% { opacity: .68; transform: scale(1); }
}

@keyframes pokerTableIn {
  from { opacity: 0; transform: scale(.66) rotate(-2deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes pokerTableOut {
  0% { opacity: 1; transform: scale(1) rotate(0deg); }
  70% { opacity: 1; transform: scale(.98) rotate(1deg); }
  100% { opacity: .94; transform: scale(.84) rotate(1.5deg); }
}

@keyframes pokerCardsDeal {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(-42vw, -24vh) rotate(-62deg) scale(.58); }
  68% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1.07), calc(var(--y) - .55rem)) rotate(calc(var(--r) * 1.08)) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}

@keyframes pokerCardsCollect {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) + .8rem)) rotate(var(--r)) scale(.94); }
  28% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(40vw, -22vh) rotate(56deg) scale(.54); }
}

@keyframes pokerChipRoll {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(-35vw, 6.7rem) rotate(0deg) scale(.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(calc(-3.25rem + var(--i) * 2.16rem), 6.35rem) rotate(560deg) scale(1); }
}

@keyframes pokerChipCollect {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(calc(-3.25rem + var(--i) * 2.16rem), 6.35rem) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(34vw, 6.9rem) rotate(500deg) scale(.62); }
}

@keyframes pokerLabelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(.65rem) scale(.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .poker-route-stage { height: 18rem; }
  .poker-route-table { inset: 4.5rem .4rem 4.3rem; border-width: .55rem; }
  .poker-route-card:nth-child(1) { --x: -5.9rem; }
  .poker-route-card:nth-child(2) { --x: -2rem; }
  .poker-route-card:nth-child(3) { --x: 2rem; }
  .poker-route-card:nth-child(4) { --x: 5.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .poker-route-transition { transition: none; }
  .poker-route-transition.is-active .poker-route-glow,
  .poker-route-transition.is-active .poker-route-table,
  .poker-route-transition.is-active .poker-route-card,
  .poker-route-transition.is-active .poker-route-chip,
  .poker-route-transition.is-active .poker-route-label {
    animation: none !important;
    opacity: 1;
  }
}