/* hud-animations.css - Hardware-accelerated micro-animations for dice roll and dev card purchase */

/* Center Dice Stage Overlay */
.dice-center-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  background: rgba(10, 14, 26, 0.46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.22s ease-out;
  cursor: pointer;
  user-select: none;
}

.dice-center-stage.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.dice-center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.dice-center-roller {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* 3D Dice Slots & Shadows */
.dice-3d-slot {
  position: relative;
  width: 76px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  perspective: 1000px;
  transform-style: preserve-3d;
  will-change: transform;
}

.dice-3d-slot.is-hidden {
  display: none !important;
}

/* Genuine 3D Cube (64px x 64px x 64px) */
.dice-3d-cube {
  width: 64px;
  height: 64px;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.16, 0.9, 0.3, 1.2);
  margin-bottom: 8px;
}

.dice-3d-cube .cube-face {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 6px;
  box-sizing: border-box;
  backface-visibility: hidden;
  user-select: none;
}

/* 3D Face Transforms (half-width = 32px) */
.dice-3d-cube .face-1 { transform: rotateY(0deg) translateZ(32px); }
.dice-3d-cube .face-2 { transform: rotateY(90deg) translateZ(32px); }
.dice-3d-cube .face-3 { transform: rotateX(90deg) translateZ(32px); }
.dice-3d-cube .face-4 { transform: rotateX(-90deg) translateZ(32px); }
.dice-3d-cube .face-5 { transform: rotateY(-90deg) translateZ(32px); }
.dice-3d-cube .face-6 { transform: rotateY(180deg) translateZ(32px); }

/* Materials & Textures */
/* 1. Red Acrylic Die */
.dice-3d-cube.die-red .cube-face {
  background: radial-gradient(circle at 35% 30%, #f87171 0%, #ef4444 45%, #991b1b 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(0, 0, 0, 0.45);
}

.dice-3d-cube.die-red .pip {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* 2. Amber Yellow Die */
.dice-3d-cube.die-yellow .cube-face {
  background: radial-gradient(circle at 35% 30%, #fbbf24 0%, #f59e0b 50%, #b45309 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.65), inset 0 -2px 6px rgba(0, 0, 0, 0.35);
}

.dice-3d-cube.die-yellow .pip {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fef08a 60%, #cbd5e1 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* 3. Cities & Knights Event Die */
.dice-3d-cube.die-event .cube-face {
  background: radial-gradient(circle at 35% 30%, #475569 0%, #334155 50%, #0f172a 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dice-3d-cube.die-event .event-ico {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

/* Dice Pips Grid Placement */
.pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  justify-self: center;
  align-self: center;
}

.pip-1 { grid-area: 1 / 1; }
.pip-2 { grid-area: 1 / 2; }
.pip-3 { grid-area: 1 / 3; }
.pip-4 { grid-area: 2 / 1; }
.pip-5 { grid-area: 2 / 2; }
.pip-6 { grid-area: 2 / 3; }
.pip-7 { grid-area: 3 / 1; }
.pip-8 { grid-area: 3 / 2; }
.pip-9 { grid-area: 3 / 3; }

/* 3D Shadows Underneath (Anchored on Table Floor) */
.dice-3d-shadow {
  width: 66px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 45%, rgba(0, 0, 0, 0) 75%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  filter: blur(2px);
  will-change: transform, opacity, filter;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* 1. Cinematic Floor Shadow Anticipation (0.65s gravity curve) */
.dice-3d-slot.rolling .dice-3d-shadow {
  animation: shadowAnticipation 0.65s cubic-bezier(0.5, 0.05, 0.8, 0.4) forwards;
}

@keyframes shadowAnticipation {
  0% { transform: scale(0.35); opacity: 0.45; filter: blur(6px); }
  35% { transform: scale(0.55); opacity: 0.60; filter: blur(4.5px); }
  65% { transform: scale(0.85); opacity: 0.78; filter: blur(3px); }
  88% { transform: scale(1.22); opacity: 0.92; filter: blur(2px); }
  100% { transform: scale(1.45); opacity: 1.0; filter: blur(1.5px); }
}

/* Glowing Robber 7 */
.dice-3d-cube.die-seven .cube-face {
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.95), inset 0 2px 6px rgba(255, 255, 255, 0.8) !important;
  border-color: #fca5a5 !important;
}

/* 2. Dice Fall from Upper Board Viewport (0.65s gravity acceleration) */
/* Starts safely inside board screen at -200px: never clipped, falls naturally */
.dice-3d-cube.rolling-1 {
  animation: gravityFallDie1 0.65s cubic-bezier(0.5, 0.05, 0.8, 0.4) forwards;
}

.dice-3d-cube.rolling-2 {
  animation: gravityFallDie2 0.63s cubic-bezier(0.5, 0.05, 0.8, 0.4) forwards;
}

.dice-3d-cube.rolling-event {
  animation: gravityFallDieEvent 0.64s cubic-bezier(0.5, 0.05, 0.8, 0.4) forwards;
}

@keyframes gravityFallDie1 {
  0% {
    transform: translateY(-200px) translateX(-20px) rotateX(15deg) rotateY(0deg) rotateZ(-10deg) scale(1.18);
  }
  30% {
    transform: translateY(-165px) translateX(-14px) rotateX(270deg) rotateY(180deg) rotateZ(80deg) scale(1.14);
  }
  60% {
    transform: translateY(-105px) translateX(-7px) rotateX(630deg) rotateY(360deg) rotateZ(190deg) scale(1.08);
  }
  85% {
    transform: translateY(-35px) translateX(-2px) rotateX(990deg) rotateY(540deg) rotateZ(280deg) scale(1.03);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotateX(1260deg) rotateY(720deg) rotateZ(360deg) scale(1);
  }
}

@keyframes gravityFallDie2 {
  0% {
    transform: translateY(-205px) translateX(20px) rotateX(-15deg) rotateY(0deg) rotateZ(10deg) scale(1.18);
  }
  30% {
    transform: translateY(-170px) translateX(14px) rotateX(-270deg) rotateY(180deg) rotateZ(-80deg) scale(1.14);
  }
  60% {
    transform: translateY(-110px) translateX(7px) rotateX(-630deg) rotateY(360deg) rotateZ(-190deg) scale(1.08);
  }
  85% {
    transform: translateY(-38px) translateX(2px) rotateX(-990deg) rotateY(540deg) rotateZ(-280deg) scale(1.03);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotateX(-1260deg) rotateY(720deg) rotateZ(-360deg) scale(1);
  }
}

@keyframes gravityFallDieEvent {
  0% {
    transform: translateY(-200px) translateX(0px) rotateX(10deg) rotateY(0deg) rotateZ(0deg) scale(1.18);
  }
  30% {
    transform: translateY(-165px) translateX(0px) rotateX(270deg) rotateY(-180deg) rotateZ(90deg) scale(1.14);
  }
  60% {
    transform: translateY(-105px) translateX(0px) rotateX(630deg) rotateY(-360deg) rotateZ(180deg) scale(1.08);
  }
  85% {
    transform: translateY(-35px) translateX(0px) rotateX(990deg) rotateY(-540deg) rotateZ(270deg) scale(1.03);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotateX(1260deg) rotateY(-720deg) rotateZ(360deg) scale(1);
  }
}

/* 3. Rebound & Settle Bounces (0.85s) */
.dice-3d-slot.settled-bounce {
  animation: tableReboundBounces 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.25) forwards;
}

@keyframes tableReboundBounces {
  0% { transform: translateY(0px) scale(1); }
  30% { transform: translateY(-56px) scale(1.06); }
  58% { transform: translateY(5px) scale(0.98); }
  76% { transform: translateY(-16px) scale(1.02); }
  90% { transform: translateY(2px) scale(1); }
  100% { transform: translateY(0px) scale(1); }
}

.dice-3d-slot.settled-bounce .dice-3d-shadow {
  animation: tableReboundShadow 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.25) forwards;
}

@keyframes tableReboundShadow {
  0% { transform: scale(1.45); opacity: 1.0; filter: blur(1.5px); }
  30% { transform: scale(0.65); opacity: 0.40; filter: blur(5px); }
  58% { transform: scale(1.3); opacity: 0.92; filter: blur(1.5px); }
  76% { transform: scale(0.85); opacity: 0.55; filter: blur(3px); }
  100% { transform: scale(1); opacity: 0.75; filter: blur(2px); }
}

/* Sum Badge */
.dice-center-sum-badge {
  background: linear-gradient(135deg, rgba(226, 185, 59, 0.95), rgba(180, 83, 9, 0.95));
  color: #1e1b4b;
  font-weight: 900;
  font-size: 20px;
  padding: 3px 18px;
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(226, 185, 59, 0.5);
  border: 2px solid #fef08a;
  animation: sumBadgePop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.dice-center-sum-badge.badge-seven {
  background: linear-gradient(135deg, #ef4444, #991b1b);
  color: #ffffff;
  border-color: #fca5a5;
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.6);
}

/* Flying Dev Card */
.flying-dev-card {
  position: fixed;
  width: 52px;
  height: 74px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid var(--gold-primary, #e2b93b);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(226, 185, 59, 0.45);
  z-index: 1000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--gold-primary, #e2b93b);
  will-change: transform, opacity;
}

.flying-dev-card .flying-card-ico {
  font-size: 24px;
}

.flying-dev-card .flying-card-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fef08a;
}

/* Dock Bounce Pulse on Arrival */
@keyframes devCardDockPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(226, 185, 59, 0.7)); }
  100% { transform: scale(1); filter: none; }
}

.dock-pulse-active {
  animation: devCardDockPulse 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes sumBadgePop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  70% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dice-3d-cube.rolling-1,
  .dice-3d-cube.rolling-2,
  .dice-3d-cube.rolling-event,
  .dice-3d-slot.settled-bounce,
  .dice-center-sum-badge,
  .dock-pulse-active {
    animation: none !important;
  }
  .dice-center-stage,
  .flying-dev-card,
  .dice-3d-cube {
    transition: none !important;
  }
}