:root
{
    --card-playable: 0; /* to be used by click handlers */
    
    --mid-rotation00: 0deg;
    --mid-rotation33: 120deg;
    --mid-rotation67: 240deg;
    --mid-rotation100: 360deg;

    --at3d-filter00: brightness(1);
    --at3d-filter33: brightness(1);
    --at3d-filter67: brightness(1);
    --at3d-filter100: brightness(1);
    
    --at3d-trans00: rotateX(calc(3*var(--mid-rotation00))) rotateY(calc(var(--mid-rotation00)));
    --at3d-trans33: rotateX(calc(3*var(--mid-rotation33))) rotateY(calc(var(--mid-rotation33))) translateZ(70px);
    --at3d-trans67: rotateX(calc(3*var(--mid-rotation67))) rotateY(calc(var(--mid-rotation67))) translateZ(30px);
    --at3d-trans100: rotateX(calc(3*var(--mid-rotation100))) rotateY(calc(var(--mid-rotation100) ))
                            rotateZ(calc(var(--mid-rotation100) +  var(--animated-angle) ));

    --animated-angle: 0deg;
    --animate3d-duration: 1500ms;
    --card_pick_angle:-5deg;
    --card-hover-transform: rotate(calc(var(--card_pick_angle)));
}

.suit0playable .suit0,
.suit1playable .suit1,
.suit2playable .suit2,
.suit3playable .suit3
{
    --card-playable: 1; /* to be used by click handlers */
}

.card_container
{
    --card-active-z-index: 3;
    --back-active-z-index: 3;
    --card-deactivated-z-index: 0;
    position: relative;
    display: flex;
}

.card_front, .card_back {
    position: absolute;
    display: none;
}

.intercard_spacer
{
    height: 0px;
    width: 0px;
    transition: width var(--trans_delta), height var(--trans_delta);
}

.card_container img {
    width: var(--card_width);
}

.card_container .card_front
{
    left: 0px;
    top: 0px;
    visibility: visible;
    transform: translate(0,0); /* weird, yeah but this is necessary for the stacking context bullshit */        
    transition: margin-top var(--trans_delta), margin-bottom var(--trans_delta),
                transform var(--trans_delta), visibility var(--trans_delta),
                opacity var(--trans_delta_opacity), left var(--trans_delta), top var(--trans_delta);
    transition-timing-function: linear;
    transition-delay: var(--trans_delay);
    box-shadow: -2px -2px 4px 1px rgba(30, 30, 30, 1);
}

.card_control
{
    display: flex;
    transform: scale(0.1);
    transition: transform var(--trans_delta_opacity);
}

.card_control.card_active,
.card_control.back_active
{
    transform: translate(0px, 0px);
}

.card_control.card_active.card_visible,
.card_control.back_active.card_visible
{
    transition: none;
}

/* a card that is available to the player */
.card_active .card_front
{
    display: flex;
    z-index: var(--card-active-z-index);
}

.suit0active .card_container.suit0 .card_front:hover,
.suit1active .card_container.suit1 .card_front:hover,
.suit2active .card_container.suit2 .card_front:hover,
.suit3active .card_container.suit3 .card_front:hover
{
    margin-top: calc(0px - var(--card_protrude_selected));
    transform: var(--card-hover-transform);
}

.suit0emph .suit0 .card_front,
.suit1emph .suit1 .card_front,
.suit2emph .suit2 .card_front,
.suit3emph .suit3 .card_front
{
    margin-top: calc(0px - var(--card_protrude));
}

.suit0emph.suit0active .suit0 .card_front:hover,
.suit1emph.suit1active .suit1 .card_front:hover,
.suit2emph.suit2active .suit2 .card_front:hover,
.suit3emph.suit3active .suit3 .card_front:hover
{
    margin-top: calc(0px - var(--card_protrude) + var(--card_protrude_selected));
    transform: var(--card-hover-transform);
}


.card_active .intercard_spacer
{
    width: var(--intercard_skip);
    height: var(--intersuit_skip);
}

.back_active .intercard_spacer
{
    width: var(--blank_intercard_skip);
    height: var(--intersuit_skip);
    transition: width var(--trans_delta);
}

.show_red_back .back_active .card_back.RED_BACK
{
    display: flex;
    z-index: var(--back-active-z-index);
}

.show_blue_back .back_active .card_back.BLUE_BACK
{
    display: flex;
    z-index: var(--back-active-z-index);
}

/* a card that is not available to the player */
.suit0inactive .suit0 .card_front,
.suit1inactive .suit1 .card_front,
.suit2inactive .suit2 .card_front,
.suit3inactive .suit3 .card_front
{
    filter: brightness(70%);
    z-index: var(--card-deactivated-z-index);
}

@property --mid-rotation {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.card_animate .card_front
{
    --mid-rotation: 0deg;
    --animated-left-from: 0px;
    --animated-top-from: 0px;
    --animated-left-to: 0px;
    --animated-top-to: 0px;
    --animated-mid-top: 30px;
    --animated-midmid-top: -30px;
    --animated-angle: 0deg;
    --size-ratio: 1;
    animation: 600ms animated_throw;
    animation-iteration-count: infinite;
    animation-iteration-count: 1;
/*    animation-fill-mode: forwards; */
    animation-timing-function: linear;
    animation-direction: normal;
    margin-top: 0;
    transform: rotate(calc(var(--mid-rotation)));
    z-index: 100;
}

@property --mid-rotation {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Firefox is now having trouble with custom properties inside animation frames
   so we removed --mid-rotation */

@keyframes animated_throw {
  0% {
      /* --mid-rotation: 0deg; somehow this declaration by itself will mess up the whole animation,
         even enabling the @property at-keyword and declaring it does not help */
      top: calc(var(--animated-top-from));
      left: calc(var(--animated-left-from));
      transform: scale(calc(var(--size-ratio))) rotate(0deg);
  }

  33% {
      top: calc(2/3*var(--animated-top-from) + 1/3*var(--animated-top-to) + var(--animated-mid-top));
      left: calc(2/3*var(--animated-left-from) + 1/3*var(--animated-left-to));
      transform: scale(calc(1/3 + 2/3*var(--size-ratio))) rotate(240deg);
  }

  67% {
      top: calc(1/3*var(--animated-top-from) + 2/3*var(--animated-top-to) + var(--animated-midmid-top));
      left: calc(1/3*var(--animated-left-from) + 2/3*var(--animated-left-to));
      transform: scale(calc(2/3 + 1/3*var(--size-ratio))) rotate(480deg);
  }

  100% {
      top: calc(var(--animated-top-to));
      left: calc(var(--animated-left-to));
      transform: scale(1) rotate(720deg);
  }

}

@keyframes animated_throw0 {
  0% {
      --mid-rotation: 0deg;
      --card-hover-transform: inherit;
      top: calc(var(--animated-top-from));
      left: calc(var(--animated-left-from));
      transform: scale(calc(var(--size-ratio))) rotate(calc(var(--mid-rotation)));
      z-index: 100;
  }

  33% {
      --mid-rotation: 240deg;
      --card-hover-transform: inherit;
      top: calc(2/3*var(--animated-top-from) + 1/3*var(--animated-top-to) + var(--animated-mid-top));
      left: calc(2/3*var(--animated-left-from) + 1/3*var(--animated-left-to));
      transform: scale(calc(1/3 + 2/3*var(--size-ratio))) rotate(calc(var(--mid-rotation)));
  }

  67% {
      --mid-rotation: 480deg;
      --card-hover-transform: inherit;
      top: calc(1/3*var(--animated-top-from) + 2/3*var(--animated-top-to) + var(--animated-midmid-top));
      left: calc(1/3*var(--animated-left-from) + 2/3*var(--animated-left-to));
      transform: scale(calc(2/3 + 1/3*var(--size-ratio))) rotate(calc(var(--mid-rotation)));
  }

  100% {
      --mid-rotation: 720deg;
      --card-hover-transform: inherit;
      top: calc(var(--animated-top-to));
      left: calc(var(--animated-left-to));
      transform: scale(1) rotate(calc(var(--mid-rotation) + var(--animated-angle)));
  }

}

/* 3d effects */

@property --face-brightness {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

.hand3d .card_control
{
    perspective: 800px;
    perspective-origin: 50% 50%;
}
.hand3d .card_container
{
    transform-style: preserve-3d;
}

.hand3d .card_container .card_front,
.hand3d .card_container .card_back
{
    backface-visibility: hidden;
}

.hand3d .card_container .card_back
{
    transform: rotateX(180deg);
}

.hand3d .show_blue_back .card_active .card_back.BLUE_BACK,
.hand3d .show_red_back .card_active .card_back.RED_BACK
{
    display: flex;
}

.hand3d .card_active .card_front
{
    position: relative;
}

.card_control.card_active.card_animate3d .card_container.card3d
{
    --mid-rotation: 0deg;
    animation: var(--animate3d-duration) animated_throw3d;
    animation-iteration-count: infinite;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    /* animation-fill-mode: forwards; */
}

.card_control.card_active.card_animate3d .card_container.card3d .card_front img,
.card_control.card_active.card_animate3d .card_container.card3d .card_back img
{
    --face-brightness: 1;
    animation: var(--animate3d-duration) animated_face_color;
    animation-iteration-count: infinite;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-direction: normal;
    /* animation-fill-mode: forwards; */
}


.card_control.card_active .card_container.card3d
{
    transition: transform var(--trans_delta), left var(--trans_delta), top var(--trans_delta);
}

.card_control.card_active.card_animate3d .card_container.card3d .card_front img
{
    --shadow-shade: rgba(0,0,0,0.7);
}
.card_control.card_active.card_animate3d .card_container.card3d .card_back img
{
    --shadow-shade: rgba(0, 80, 90, 0.5);
}

@keyframes animated_throw3d {
  0% {
      top: calc(var(--animated-top-from));
      left: calc(var(--animated-left-from));
      transform: var(--at3d-trans00);
  }

  33% {
      top: calc(2/3*var(--animated-top-from) + 1/3*var(--animated-top-to));
      left: calc(2/3*var(--animated-left-from) + 1/3*var(--animated-left-to));
      transform: var(--at3d-trans33);
  }

  67% {
      top: calc(1/3*var(--animated-top-from) + 2/3*var(--animated-top-to));
      left: calc(1/3*var(--animated-left-from) + 2/3*var(--animated-left-to));
      transform: var(--at3d-trans67);
  }

  100% {
      top: calc(var(--animated-top-to));
      left: calc(var(--animated-left-to));
      transform: var(--at3d-trans100);
  }
}

@keyframes animated_face_color {
  0% {
      filter: var(--at3d-filter00);
      box-shadow: 0px 0px 9px 3px var(--shadow-shade);
  }

  33% {
      filter: var(--at3d-filter33);
      box-shadow: 5px 5px 9px 3px var(--shadow-shade);
  }

  67% {
      filter: var(--at3d-filter67);
      box-shadow: 18px 18px 9px 3px var(--shadow-shade);
  }

  100% {
      filter: var(--at3d-filter100);
      box-shadow: 0px 0px 9px 3px var(--shadow-shade);
  }
}