/* Kdai hero deck: one shot shuffle on load, then it stays settled.
   Generated. Deck mode only applies at 1100px and up; below that the flex fan
   in styles.css takes over unchanged.
   Cycle: fan, gather, cut, riffle, stack, deal, fan. Runs once. */

@media (min-width: 1100px) {
  .fan {
    position: relative;
    display: block;
    width: 1138px;
    height: 240px;
    margin: 64px auto 0;
    padding: 0;
    gap: 0;
    perspective: 1500px;
    perspective-origin: 50% 36%;
    cursor: default;
  }

  .fan__card {
    position: absolute;
    top: 0;
    margin: 0;
    transform-origin: 50% 78%;
    backface-visibility: hidden;
    will-change: transform;
    animation-duration: 4.8s;
    animation-delay: 0.65s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transition: none;
  }

  /* the accent stays on the third card so it travels through the riffle */
  .fan__card:nth-child(3) { background: var(--lime); }
  .fan__card:nth-child(3) .fan__no,
  .fan__card:nth-child(3) .fan__meta { color: rgba(19, 19, 19, 0.6); }
  .fan__card:nth-child(3) .fan__six i { background: rgba(19, 19, 19, 0.2); }

  .fan__card:nth-child(1) { left: 0px; z-index: 10; animation-name: hd-0; }
  .fan__card:nth-child(2) { left: 194px; z-index: 20; animation-name: hd-1; }
  .fan__card:nth-child(3) { left: 388px; z-index: 40; animation-name: hd-2; }
  .fan__card:nth-child(4) { left: 582px; z-index: 30; animation-name: hd-3; }
  .fan__card:nth-child(5) { left: 776px; z-index: 20; animation-name: hd-4; }
  .fan__card:nth-child(6) { left: 970px; z-index: 10; animation-name: hd-5; }

  /* once it has run, drop the animation and hold the pose statically */
  .fan.is-done .fan__card { animation: none; will-change: auto; }
  .fan.is-done .fan__card:nth-child(1) { transform: translate3d(0.0px, 26.0px, 0) rotateY(18.0deg) rotate(-10.00deg) scale(0.900); }
  .fan.is-done .fan__card:nth-child(2) { transform: translate3d(0.0px, 10.0px, 0) rotateY(11.0deg) rotate(-6.00deg) scale(0.950); }
  .fan.is-done .fan__card:nth-child(3) { transform: translate3d(0.0px, 0.0px, 0) rotateY(4.0deg) rotate(-2.00deg) scale(1.000); }
  .fan.is-done .fan__card:nth-child(4) { transform: translate3d(0.0px, 0.0px, 0) rotateY(-4.0deg) rotate(2.00deg) scale(1.000); }
  .fan.is-done .fan__card:nth-child(5) { transform: translate3d(0.0px, 10.0px, 0) rotateY(-11.0deg) rotate(6.00deg) scale(0.950); }
  .fan.is-done .fan__card:nth-child(6) { transform: translate3d(0.0px, 26.0px, 0) rotateY(-18.0deg) rotate(10.00deg) scale(0.900); }
}

@media (prefers-reduced-motion: reduce) {
  .fan__card { animation: none !important; }
}

@keyframes hd-0 {
  0% { transform: translate3d(0.0px, 26.0px, 0) rotateY(18.0deg) rotate(-10.00deg) scale(0.900); z-index: 10; }
  12% { transform: translate3d(0.0px, 26.0px, 0) rotateY(18.0deg) rotate(-10.00deg) scale(0.900); z-index: 10; }
  24% { transform: translate3d(485.0px, 0.0px, 0) rotateY(0.0deg) rotate(-6.00deg) scale(0.965); z-index: 60; }
  32% { transform: translate3d(359.0px, 0.0px, 0) rotateY(0.0deg) rotate(-12.00deg) scale(0.965); z-index: 60; }
  37% { transform: translate3d(411.0px, -70.0px, 0) rotateY(5.0deg) rotate(-11.00deg) scale(0.945); z-index: 20; }
  44% { transform: translate3d(459.0px, -22.0px, 0) rotateY(0.0deg) rotate(-4.50deg) scale(0.955); z-index: 72; }
  50% { transform: translate3d(485.0px, 0.0px, 0) rotateY(0.0deg) rotate(-5.16deg) scale(0.960); z-index: 60; }
  56.0% { transform: translate3d(174.6px, 6.8px, 0) rotateY(7.2deg) rotate(-4.00deg) scale(0.978); z-index: 10; }
  70.0% { transform: translate3d(0.0px, 32.8px, 0) rotateY(20.5deg) rotate(-12.00deg) scale(0.914); z-index: 10; }
  78.0% { transform: translate3d(0.0px, 26.0px, 0) rotateY(18.0deg) rotate(-10.00deg) scale(0.900); z-index: 10; }
  100% { transform: translate3d(0.0px, 26.0px, 0) rotateY(18.0deg) rotate(-10.00deg) scale(0.900); z-index: 10; }
}
@keyframes hd-1 {
  0% { transform: translate3d(0.0px, 10.0px, 0) rotateY(11.0deg) rotate(-6.00deg) scale(0.950); z-index: 20; }
  12% { transform: translate3d(0.0px, 10.0px, 0) rotateY(11.0deg) rotate(-6.00deg) scale(0.950); z-index: 20; }
  24% { transform: translate3d(301.0px, -7.5px, 0) rotateY(0.0deg) rotate(-3.60deg) scale(0.965); z-index: 56; }
  32% { transform: translate3d(175.0px, -7.5px, 0) rotateY(0.0deg) rotate(-9.60deg) scale(0.965); z-index: 56; }
  37% { transform: translate3d(222.0px, -26.0px, 0) rotateY(5.0deg) rotate(-8.60deg) scale(0.945); z-index: 36; }
  44% { transform: translate3d(272.0px, -2.0px, 0) rotateY(0.0deg) rotate(-2.70deg) scale(0.955); z-index: 56; }
  50% { transform: translate3d(299.6px, -6.5px, 0) rotateY(0.0deg) rotate(-3.10deg) scale(0.960); z-index: 56; }
  59.8% { transform: translate3d(104.8px, 2.6px, 0) rotateY(4.4deg) rotate(-2.40deg) scale(0.978); z-index: 20; }
  73.4% { transform: translate3d(0.0px, 12.6px, 0) rotateY(12.5deg) rotate(-7.20deg) scale(0.965); z-index: 20; }
  80.4% { transform: translate3d(0.0px, 10.0px, 0) rotateY(11.0deg) rotate(-6.00deg) scale(0.950); z-index: 20; }
  100% { transform: translate3d(0.0px, 10.0px, 0) rotateY(11.0deg) rotate(-6.00deg) scale(0.950); z-index: 20; }
}
@keyframes hd-2 {
  0% { transform: translate3d(0.0px, 0.0px, 0) rotateY(4.0deg) rotate(-2.00deg) scale(1.000); z-index: 40; }
  12% { transform: translate3d(0.0px, 0.0px, 0) rotateY(4.0deg) rotate(-2.00deg) scale(1.000); z-index: 40; }
  24% { transform: translate3d(117.0px, -15.0px, 0) rotateY(0.0deg) rotate(-1.20deg) scale(0.965); z-index: 52; }
  32% { transform: translate3d(-9.0px, -15.0px, 0) rotateY(0.0deg) rotate(-7.20deg) scale(0.965); z-index: 52; }
  37% { transform: translate3d(33.0px, 18.0px, 0) rotateY(5.0deg) rotate(-6.20deg) scale(0.945); z-index: 52; }
  44% { transform: translate3d(85.0px, 18.0px, 0) rotateY(0.0deg) rotate(-0.90deg) scale(0.955); z-index: 40; }
  50% { transform: translate3d(114.2px, -12.9px, 0) rotateY(0.0deg) rotate(-1.03deg) scale(0.960); z-index: 52; }
  63.6% { transform: translate3d(34.9px, 0.0px, 0) rotateY(1.6deg) rotate(-0.80deg) scale(0.978); z-index: 40; }
  76.8% { transform: translate3d(0.0px, 0.0px, 0) rotateY(4.6deg) rotate(-2.40deg) scale(1.016); z-index: 40; }
  82.8% { transform: translate3d(0.0px, 0.0px, 0) rotateY(4.0deg) rotate(-2.00deg) scale(1.000); z-index: 40; }
  100% { transform: translate3d(0.0px, 0.0px, 0) rotateY(4.0deg) rotate(-2.00deg) scale(1.000); z-index: 40; }
}
@keyframes hd-3 {
  0% { transform: translate3d(0.0px, 0.0px, 0) rotateY(-4.0deg) rotate(2.00deg) scale(1.000); z-index: 30; }
  12% { transform: translate3d(0.0px, 0.0px, 0) rotateY(-4.0deg) rotate(2.00deg) scale(1.000); z-index: 30; }
  24% { transform: translate3d(-67.0px, -22.5px, 0) rotateY(0.0deg) rotate(1.20deg) scale(0.965); z-index: 48; }
  32% { transform: translate3d(59.0px, -22.5px, 0) rotateY(0.0deg) rotate(7.20deg) scale(0.965); z-index: 48; }
  37% { transform: translate3d(-8.0px, -48.0px, 0) rotateY(-5.0deg) rotate(6.20deg) scale(0.945); z-index: 28; }
  44% { transform: translate3d(-50.0px, -12.0px, 0) rotateY(0.0deg) rotate(0.90deg) scale(0.955); z-index: 64; }
  50% { transform: translate3d(-71.2px, -19.4px, 0) rotateY(0.0deg) rotate(1.03deg) scale(0.960); z-index: 48; }
  65.5% { transform: translate3d(-34.9px, 0.0px, 0) rotateY(-1.6deg) rotate(0.80deg) scale(0.978); z-index: 30; }
  78.5% { transform: translate3d(0.0px, 0.0px, 0) rotateY(-4.6deg) rotate(2.40deg) scale(1.016); z-index: 30; }
  84.0% { transform: translate3d(0.0px, 0.0px, 0) rotateY(-4.0deg) rotate(2.00deg) scale(1.000); z-index: 30; }
  100% { transform: translate3d(0.0px, 0.0px, 0) rotateY(-4.0deg) rotate(2.00deg) scale(1.000); z-index: 30; }
}
@keyframes hd-4 {
  0% { transform: translate3d(0.0px, 10.0px, 0) rotateY(-11.0deg) rotate(6.00deg) scale(0.950); z-index: 20; }
  12% { transform: translate3d(0.0px, 10.0px, 0) rotateY(-11.0deg) rotate(6.00deg) scale(0.950); z-index: 20; }
  24% { transform: translate3d(-251.0px, -30.0px, 0) rotateY(0.0deg) rotate(3.60deg) scale(0.965); z-index: 44; }
  32% { transform: translate3d(-125.0px, -30.0px, 0) rotateY(0.0deg) rotate(9.60deg) scale(0.965); z-index: 44; }
  37% { transform: translate3d(-197.0px, -4.0px, 0) rotateY(-5.0deg) rotate(8.60deg) scale(0.945); z-index: 44; }
  44% { transform: translate3d(-237.0px, 8.0px, 0) rotateY(0.0deg) rotate(2.70deg) scale(0.955); z-index: 48; }
  50% { transform: translate3d(-256.6px, -25.8px, 0) rotateY(0.0deg) rotate(3.10deg) scale(0.960); z-index: 44; }
  61.7% { transform: translate3d(-104.8px, 2.6px, 0) rotateY(-4.4deg) rotate(2.40deg) scale(0.978); z-index: 20; }
  75.1% { transform: translate3d(0.0px, 12.6px, 0) rotateY(-12.5deg) rotate(7.20deg) scale(0.965); z-index: 20; }
  81.6% { transform: translate3d(0.0px, 10.0px, 0) rotateY(-11.0deg) rotate(6.00deg) scale(0.950); z-index: 20; }
  100% { transform: translate3d(0.0px, 10.0px, 0) rotateY(-11.0deg) rotate(6.00deg) scale(0.950); z-index: 20; }
}
@keyframes hd-5 {
  0% { transform: translate3d(0.0px, 26.0px, 0) rotateY(-18.0deg) rotate(10.00deg) scale(0.900); z-index: 10; }
  12% { transform: translate3d(0.0px, 26.0px, 0) rotateY(-18.0deg) rotate(10.00deg) scale(0.900); z-index: 10; }
  24% { transform: translate3d(-435.0px, -37.5px, 0) rotateY(0.0deg) rotate(6.00deg) scale(0.965); z-index: 40; }
  32% { transform: translate3d(-309.0px, -37.5px, 0) rotateY(0.0deg) rotate(12.00deg) scale(0.965); z-index: 40; }
  37% { transform: translate3d(-386.0px, 40.0px, 0) rotateY(-5.0deg) rotate(11.00deg) scale(0.945); z-index: 60; }
  44% { transform: translate3d(-424.0px, 28.0px, 0) rotateY(0.0deg) rotate(4.50deg) scale(0.955); z-index: 32; }
  50% { transform: translate3d(-442.0px, -32.2px, 0) rotateY(0.0deg) rotate(5.16deg) scale(0.960); z-index: 40; }
  57.9% { transform: translate3d(-174.6px, 6.8px, 0) rotateY(-7.2deg) rotate(4.00deg) scale(0.978); z-index: 10; }
  71.7% { transform: translate3d(0.0px, 32.8px, 0) rotateY(-20.5deg) rotate(12.00deg) scale(0.914); z-index: 10; }
  79.2% { transform: translate3d(0.0px, 26.0px, 0) rotateY(-18.0deg) rotate(10.00deg) scale(0.900); z-index: 10; }
  100% { transform: translate3d(0.0px, 26.0px, 0) rotateY(-18.0deg) rotate(10.00deg) scale(0.900); z-index: 10; }
}