/**
 * BarcaLive UI Effects & Animations
 * Apple-style premium visual layer.
 */

:root {
  --mesh-color-1: #1a1a2e;
  --mesh-speed: 10s;
  --skeleton-base: rgba(255, 255, 255, 0.05);
  --skeleton-highlight: rgba(255, 255, 255, 0.1);
}

/* --- Ambient Mesh Background --- */
.mesh-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 30% 50%, var(--mesh-color-1) 0%, transparent 50%);
  transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: background;
}

/* --- Skeleton Placeholders --- */
.skeleton-loading {
  position: relative !important;
  min-height: 200px; /* Ensure space for skeleton */
}

.skeleton-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 50;
  pointer-events: none;
  padding: 20px;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-placeholder {
  background: var(--skeleton-base);
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.skeleton-placeholder::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0,
    var(--skeleton-highlight) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 2s infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Match Card Skeleton */
.skeleton-match-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.skeleton-match-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--skeleton-base);
}

.skeleton-match-card .content {
  flex: 1;
}

.skeleton-match-card .line {
  height: 12px;
  background: var(--skeleton-base);
  border-radius: 6px;
  margin-bottom: 8px;
}

.skeleton-match-card .line-short {
  width: 40%;
}

/* Table Row Skeleton */
.skeleton-table-row {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.skeleton-table-row .cell {
  background: var(--skeleton-base);
  height: 12px;
  border-radius: 6px;
}

/* Dynamic Island Skeleton */
.skeleton-island {
  width: 48px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  margin: 0 auto;
  animation: skeleton-pulse 1.5s infinite ease-in-out;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.95); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* --- Utility Animations --- */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: opacity;
}

.fade-out {
  opacity: 1;
  animation: fadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: opacity;
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInLeft 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
  will-change: opacity, transform;
}

.pulse {
  animation: pulseEffect 2s infinite;
  will-change: transform;
}

.shake {
  animation: shakeEffect 0.5s cubic-bezier(.36,.07,.19,.97) both;
  will-change: transform;
}

.bounce {
  animation: bounceEffect 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
  will-change: transform;
}

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

@keyframes fadeOut {
  to { opacity: 0; }
}

@keyframes slideInLeft {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulseEffect {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes shakeEffect {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes bounceEffect {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}