/* =========================================================
   A64 — DADOS 3D REALES
   BACKGAMMON PUCARÁ

   Cubos reales CSS con seis caras.
   Animación exclusivamente visual.
========================================================= */


/* =========================================================
   A64.1 — CAPA GENERAL
========================================================= */

.dice-animation-layer {
  position: fixed;

  inset: 0;

  z-index: 95;

  pointer-events: none;

  overflow: hidden;

  perspective:
    900px;

  perspective-origin:
    50% 45%;
}


/* =========================================================
   A64.2 — CONTENEDOR DE CADA DADO
========================================================= */

.dice-animation-die {
  --dice-size:
    clamp(
      34px,
      5.6vh,
      52px
    );

  --dice-half:
    calc(
      var(--dice-size) / 2
    );

  position: fixed;

  width:
    var(--dice-size);

  height:
    var(--dice-size);

  margin-left:
    calc(
      var(--dice-size) / -2
    );

  margin-top:
    calc(
      var(--dice-size) / -2
    );

  transform-style:
    preserve-3d;

  will-change:
    transform,
    opacity;

  pointer-events: none;
}


/* =========================================================
   A64.3 — CUBO INTERIOR
========================================================= */

.dice-cube {
  position: relative;

  width: 100%;

  height: 100%;

  transform-style:
    preserve-3d;

  transform-origin:
    50%
    50%
    0;

  will-change:
    transform;
}


/* =========================================================
   A64.4 — CARAS
========================================================= */

.dice-cube-face {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius:
    5px;

  backface-visibility:
    hidden;

  transform-style:
    preserve-3d;

  box-shadow:
    inset
    0
    0
    2px
    rgba(255, 255, 255, 0.35);
}


.dice-cube-face img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  user-select: none;

  -webkit-user-drag:
    none;

  pointer-events: none;
}


/* =========================================================
   A64.5 — POSICIÓN DE LAS SEIS CARAS
========================================================= */

/* FRENTE */

.dice-cube-face--front {
  transform:
    rotateY(0deg)
    translateZ(
      var(--dice-half)
    );
}


/* ATRÁS */

.dice-cube-face--back {
  transform:
    rotateY(180deg)
    translateZ(
      var(--dice-half)
    );
}


/* DERECHA */

.dice-cube-face--right {
  transform:
    rotateY(90deg)
    translateZ(
      var(--dice-half)
    );
}


/* IZQUIERDA */

.dice-cube-face--left {
  transform:
    rotateY(-90deg)
    translateZ(
      var(--dice-half)
    );
}


/* ARRIBA */

.dice-cube-face--top {
  transform:
    rotateX(90deg)
    translateZ(
      var(--dice-half)
    );
}


/* ABAJO */

.dice-cube-face--bottom {
  transform:
    rotateX(-90deg)
    translateZ(
      var(--dice-half)
    );
}


/* =========================================================
   A64.6 — SOMBRA DEL DADO
========================================================= */

.dice-animation-die::after {
  content: "";

  position: absolute;

  left: 50%;

  top:
    calc(
      100% + 12px
    );

  width:
    110%;

  height:
    24%;

  border-radius:
    50%;

  background:
    rgba(0, 0, 0, 0.48);

  filter:
    blur(5px);

  transform:
    translateX(-50%);

  transform-origin:
    center;

  opacity:
    0;

  pointer-events: none;
}


/* =========================================================
   A64.7 — DADO 1
========================================================= */

.dice-animation-die--1 {
  animation:
    dice-body-one
    820ms
    cubic-bezier(
      0.16,
      0.72,
      0.22,
      1
    )
    forwards;
}


.dice-animation-die--1
.dice-cube {
  animation:
    dice-spin-one
    820ms
    cubic-bezier(
      0.16,
      0.72,
      0.22,
      1
    )
    forwards;
}


.dice-animation-die--1::after {
  animation:
    dice-shadow-one
    820ms
    ease-out
    forwards;
}


/* =========================================================
   A64.8 — DADO 2
========================================================= */

.dice-animation-die--2 {
  animation:
    dice-body-two
    820ms
    cubic-bezier(
      0.16,
      0.72,
      0.22,
      1
    )
    forwards;
}


.dice-animation-die--2
.dice-cube {
  animation:
    dice-spin-two
    820ms
    cubic-bezier(
      0.16,
      0.72,
      0.22,
      1
    )
    forwards;
}


.dice-animation-die--2::after {
  animation:
    dice-shadow-two
    820ms
    ease-out
    forwards;
}


/* =========================================================
   A64.9 — RECORRIDO FÍSICO DADO 1

   Parte desde arriba-centro.
   Cae.
   Golpea.
   Rebota.
   Se asienta.
========================================================= */

@keyframes dice-body-one {

  0% {
    opacity: 1;

    transform:
      translate3d(
        -20px,
        -70px,
        54px
      )
      scale(0.88);
  }


  8% {
    opacity: 1;
  }


  28% {
    transform:
      translate3d(
        -20px,
        -105px,
        72px
      )
      scale(0.88);
  }


  52% {
    transform:
      translate3d(
        -10px,
        -30px,
        38px
      )
      scale(0.98);
  }


  66% {
    transform:
      translate3d(
        2px,
        7px,
        0
      )
      scale(1.04);
  }


  76% {
    transform:
      translate3d(
        7px,
        -17px,
        24px
      )
      scale(0.99);
  }


  86% {
    transform:
      translate3d(
        2px,
        3px,
        0
      )
      scale(1.015);
  }


  93% {
    transform:
      translate3d(
        -1px,
        -5px,
        9px
      )
      scale(1);
  }


  100% {
    opacity: 1;

    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);
  }

}


/* =========================================================
   A64.10 — RECORRIDO FÍSICO DADO 2
========================================================= */

@keyframes dice-body-two {

  0% {
    opacity: 1;

    transform:
      translate3d(
        22px,
        -72px,
        56px
      )
      scale(0.88);
  }


  7% {
    opacity: 1;
  }


  28% {
    transform:
      translate3d(
        19px,
        -110px,
        75px
      )
      scale(0.87);
  }


  52% {
    transform:
      translate3d(
        11px,
        -33px,
        40px
      )
      scale(0.98);
  }


  67% {
    transform:
      translate3d(
        -3px,
        8px,
        0
      )
      scale(1.045);
  }


  77% {
    transform:
      translate3d(
        -8px,
        -18px,
        25px
      )
      scale(0.99);
  }


  87% {
    transform:
      translate3d(
        -2px,
        3px,
        0
      )
      scale(1.015);
  }


  94% {
    transform:
      translate3d(
        1px,
        -5px,
        8px
      )
      scale(1);
  }


  100% {
    opacity: 1;

    transform:
      translate3d(
        0,
        0,
        0
      )
      scale(1);
  }

}


/* =========================================================
   A64.11 — ROTACIÓN CUBO 1
========================================================= */

@keyframes dice-spin-one {

  0% {
    transform:
      rotateX(-20deg)
      rotateY(15deg)
      rotateZ(-12deg);
  }


  24% {
    transform:
      rotateX(145deg)
      rotateY(105deg)
      rotateZ(74deg);
  }


  48% {
    transform:
      rotateX(330deg)
      rotateY(245deg)
      rotateZ(165deg);
  }


  66% {
    transform:
      rotateX(505deg)
      rotateY(380deg)
      rotateZ(240deg);
  }


  76% {
    transform:
      rotateX(565deg)
      rotateY(430deg)
      rotateZ(270deg);
  }


  86% {
    transform:
      rotateX(615deg)
      rotateY(475deg)
      rotateZ(300deg);
  }


  100% {
    transform:
      rotateX(650deg)
      rotateY(510deg)
      rotateZ(325deg);
  }

}


/* =========================================================
   A64.12 — ROTACIÓN CUBO 2
========================================================= */

@keyframes dice-spin-two {

  0% {
    transform:
      rotateX(25deg)
      rotateY(-18deg)
      rotateZ(14deg);
  }


  24% {
    transform:
      rotateX(-150deg)
      rotateY(-115deg)
      rotateZ(-78deg);
  }


  48% {
    transform:
      rotateX(-340deg)
      rotateY(-250deg)
      rotateZ(-170deg);
  }


  67% {
    transform:
      rotateX(-520deg)
      rotateY(-390deg)
      rotateZ(-250deg);
  }


  77% {
    transform:
      rotateX(-580deg)
      rotateY(-440deg)
      rotateZ(-280deg);
  }


  87% {
    transform:
      rotateX(-625deg)
      rotateY(-485deg)
      rotateZ(-310deg);
  }


  100% {
    transform:
      rotateX(-665deg)
      rotateY(-520deg)
      rotateZ(-335deg);
  }

}


/* =========================================================
   A64.13 — SOMBRA DADO 1
========================================================= */

@keyframes dice-shadow-one {

  0% {
    opacity: 0.08;

    transform:
      translateX(-50%)
      scale(0.45);
  }


  40% {
    opacity: 0.16;

    transform:
      translateX(-50%)
      scale(0.62);
  }


  66% {
    opacity: 0.62;

    transform:
      translateX(-50%)
      scale(1.08);
  }


  76% {
    opacity: 0.28;

    transform:
      translateX(-50%)
      scale(0.72);
  }


  86% {
    opacity: 0.58;

    transform:
      translateX(-50%)
      scale(1);
  }


  100% {
    opacity: 0.52;

    transform:
      translateX(-50%)
      scale(0.94);
  }

}


/* =========================================================
   A64.14 — SOMBRA DADO 2
========================================================= */

@keyframes dice-shadow-two {

  0% {
    opacity: 0.08;

    transform:
      translateX(-50%)
      scale(0.42);
  }


  40% {
    opacity: 0.16;

    transform:
      translateX(-50%)
      scale(0.60);
  }


  67% {
    opacity: 0.64;

    transform:
      translateX(-50%)
      scale(1.10);
  }


  77% {
    opacity: 0.27;

    transform:
      translateX(-50%)
      scale(0.70);
  }


  87% {
    opacity: 0.58;

    transform:
      translateX(-50%)
      scale(1);
  }


  100% {
    opacity: 0.52;

    transform:
      translateX(-50%)
      scale(0.94);
  }

}