/**
 * Pack Simulator Custom Styles
 * Foil effects, animations, and responsive styles
 */

/* Floating pack value overlay: flex when visible (Tailwind hidden toggles visibility) */
#packValueOverlay {
  display: flex;
}
#packValueOverlay.hidden {
  display: none;
}

/* Pack opening 3D spin animation */
@keyframes packSpin3D {
  0% { 
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1);
  }
  25% { 
    transform: perspective(1000px) rotateY(90deg) rotateX(10deg) scale(1.1);
  }
  50% { 
    transform: perspective(1000px) rotateY(180deg) rotateX(0deg) scale(1.15);
  }
  75% { 
    transform: perspective(1000px) rotateY(270deg) rotateX(-10deg) scale(1.1);
  }
  100% { 
    transform: perspective(1000px) rotateY(360deg) rotateX(0deg) scale(1);
  }
}

.pack-spin-3d {
  animation: packSpin3D 1.5s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* Pack opening shake animation (for combination effect) */
@keyframes packShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(-10px) rotate(-5deg); }
  20% { transform: translateX(10px) rotate(5deg); }
  30% { transform: translateX(-8px) rotate(-3deg); }
  40% { transform: translateX(8px) rotate(3deg); }
  50% { transform: translateX(-6px) rotate(-2deg); }
  60% { transform: translateX(6px) rotate(2deg); }
  70% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
  90% { transform: translateX(-2px) rotate(-0.5deg); }
}

.pack-shake-animation {
  animation: packShake 0.5s ease-in-out infinite;
}

/* Pack image pulse effect */
@keyframes packPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

.pack-pulse-animation {
  animation: packPulse 0.8s ease-in-out infinite;
}

/* Foil card effect */
.foil-card {
  position: relative;
  overflow: hidden;
}

.foil-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: conic-gradient(
    from 0deg,
    rgba(255, 215, 0, 0.3),
    rgba(255, 255, 255, 0.4),
    rgba(0, 191, 255, 0.3),
    rgba(255, 215, 0, 0.3)
  );
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

/* Mouse-follow shine for foil cards */
.foil-card {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.foil-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle 200px at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.4),
    transparent 50%
  );
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.foil-card:hover::before {
  opacity: 1;
}

/* Update mouse position on hover */
.foil-card {
  cursor: pointer;
}

.foil-card:hover {
  cursor: pointer;
}

/* Shimmer effect for rare/mythic cards */
.shimmer {
  animation: shimmer 1.5s ease-in-out;
}

@keyframes shimmer {
  0%, 100% {
    box-shadow: 0 0 14px var(--tcg-border), 0 10px 40px -10px rgba(219, 39, 119, 0.12);
  }
  50% {
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.6), 0 10px 40px -10px rgba(255, 215, 0, 0.3);
  }
}

/* Card reveal animation */
.card-element {
  will-change: opacity, transform;
}

/* Ensure price is visible */
.card-element .text-pink-500 {
  color: #db2777 !important;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(219, 39, 119, 0.5);
}

/* Pack value spinner counter styles */
#packValue {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  min-height: 3rem;
  display: flex;
  align-items: center;
}

#packValueContainer {
  background: rgba(219, 39, 119, 0.1);
  border-color: rgba(219, 39, 119, 0.4);
  box-shadow: 0 0 20px rgba(219, 39, 119, 0.2);
}

#packValueContainer h2 {
  color: #f3f4f6;
}

/* Ensure spinner counter columns are visible */
#packValue > div {
  display: inline-block;
  vertical-align: top;
}

#packValue > div > div {
  will-change: transform;
}

/* 3D hover effect for cards */
.card-element {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card-element:hover {
  transform: translateY(-5px) scale(1.02);
  transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .card-element {
    font-size: 0.75rem;
  }
  
  #packGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .tcg-glass-card {
    padding: 1rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  #packGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
  #packGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  #packGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Loading states */
.card-element.loading {
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Pack opening overlay animation */
#openingOverlay {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal animations */
#cardModal {
  animation: fadeIn 0.3s ease-in;
}

#cardModal .tcg-glass-card {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Touch-friendly buttons on mobile */
@media (max-width: 768px) {
  button {
    min-height: 44px;
    min-width: 44px;
  }
  
  select {
    min-height: 44px;
  }
}

/* Improve contrast for accessibility */
@media (prefers-contrast: high) {
  .tcg-glass-card {
    border-width: 2px;
  }
  
  .card-element {
    border-width: 2px;
  }
}

/* Pack accounting table styles */
#packAccountingTable table {
  border-collapse: collapse;
  width: 100%;
}

#packAccountingTable tbody tr {
  transition: background-color 0.2s ease;
}

#packAccountingTable tbody tr:hover {
  background-color: rgba(219, 39, 119, 0.15);
}

#packAccountingTable tfoot {
  background-color: rgba(219, 39, 119, 0.1);
}

#packAccountingTable th,
#packAccountingTable td {
  white-space: nowrap;
}

#packAccountingTable td:first-child {
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  font-family: monospace;
}

#packAccountingTable .font-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Rarity header rows */
#packAccountingTable tbody tr.bg-pink-500\/10 {
  background-color: rgba(219, 39, 119, 0.08);
}

/* Subtotals */
#packAccountingTable tbody tr.bg-pink-500\/5 {
  background-color: rgba(219, 39, 119, 0.03);
}

/* Responsive table */
@media (max-width: 768px) {
  #packAccountingTable {
    font-size: 0.875rem;
  }
  
  #packAccountingTable th,
  #packAccountingTable td {
    padding: 0.5rem 0.25rem;
  }
  
  #packAccountingTable th:nth-child(2),
  #packAccountingTable td:nth-child(2) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}