/* ================================================================= */
/*  Performance & Polish Upgrade 2026 — ElAshkef                     */
/*  Stream Live cursor, 3D tilt, skeleton loaders, animated glass   */
/* ================================================================= */

/* ============ STREAM LIVE CURSOR ============ */
/* Red broadcast pulsing effect for the new "stream_live" cursor style */
#cursor-main.cursor-live-pulse {
  animation: cursorLivePulse 1.3s ease-in-out infinite;
}
#cursor-dot.cursor-live-pulse-dot {
  animation: cursorLiveDotPulse 1.3s ease-in-out infinite;
}
@keyframes cursorLivePulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255,59,59,0.6),
      0 0 12px rgba(255,59,59,0.55),
      0 0 28px rgba(255,59,59,0.30);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(255,59,59,0),
      0 0 22px rgba(255,59,59,0.80),
      0 0 45px rgba(255,59,59,0.45);
  }
}
@keyframes cursorLiveDotPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.3); opacity: 0.85; }
}

/* ============ CURSOR "POP" PREVIEW ANIMATION ============ */
/* Triggered once when a cursor style is selected */
#cursor-main.cursor-preview-anim,
#cursor-dot.cursor-preview-anim {
  animation-name: cursorPreviewPop;
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Don't override the ongoing live-pulse animation */
#cursor-main.cursor-live-pulse.cursor-preview-anim {
  animation:
    cursorPreviewPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    cursorLivePulse 1.3s ease-in-out 0.5s infinite;
}
@keyframes cursorPreviewPop {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ============ SKELETON LOADER ============ */
/* Replaces spinners on game cards and image slots */
.skeleton-loader {
  position: relative;
  background: linear-gradient(90deg,
    rgba(40, 30, 70, 0.5)  0%,
    rgba(60, 50, 100, 0.75) 50%,
    rgba(40, 30, 70, 0.5) 100%);
  background-size: 200% 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
  overflow: hidden;
}
.skeleton-loader img {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.skeleton-loader img[src]:not([src=""]) {
  /* Will be set to opacity:1 once loaded via JS */
}
.skeleton-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 30%,
    rgba(232,183,48,0.08) 50%,
    transparent 70%);
  animation: skeletonSweep 1.8s ease-in-out infinite;
  pointer-events: none;
}
/* Hide skeleton decoration once real image loaded */
.game-image:not(.skeleton-loader) img { opacity: 1; }
.game-image:not(.skeleton-loader)::after { display: none; }
.game-image:not(.skeleton-loader) { animation: none; background: transparent; }

@keyframes skeletonShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skeletonSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Show real image when loaded (JS removes skeleton-loader class) */
.game-image img { opacity: 1 !important; }
.game-image.skeleton-loader img { opacity: 0 !important; }

/* ============ 3D TILT HOVER FOR GAME CARDS ============ */
/* Subtle rotateX/rotateY on hover - GPU accelerated */
.game-card {
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1.15),
    box-shadow 0.4s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .game-card:hover {
    transform: translateY(-6px) rotateX(3deg) rotateY(-3deg) scale(1.015);
    box-shadow:
      0 20px 40px -10px rgba(0,0,0,0.55),
      0 0 30px rgba(232,183,48,0.18);
  }
  .game-card:hover .game-image img {
    transform: scale(1.06);
    transition: transform 0.6s ease;
  }
}

/* ============ ANIMATED GLASS BORDERS ============ */
/* Subtle rotating conic gradient border around featured cards */
.game-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(232,183,48,0.35) 90deg,
    transparent 180deg,
    rgba(232,183,48,0.25) 270deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: glassBorderSpin 6s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .game-card:hover::before {
    opacity: 1;
    animation-play-state: running;
  }
}
@keyframes glassBorderSpin {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

/* ============ PARALLAX BACKGROUND (subtle) ============ */
/* Already handled via #bg-animation in app.js; only add the
   translate-Y-on-scroll class that app.js will apply. */
body.parallax-ready #bg-animation {
  will-change: transform;
  transition: transform 0.15s linear;
}

/* ============ PERFORMANCE: REDUCE MOTION FOR LOW-POWER DEVICES ============ */
@media (prefers-reduced-motion: reduce) {
  .game-card,
  .game-card::before,
  .skeleton-loader,
  .skeleton-loader::after,
  #cursor-main.cursor-live-pulse,
  #cursor-dot.cursor-live-pulse-dot,
  #cursor-main.cursor-preview-anim,
  #cursor-dot.cursor-preview-anim {
    animation: none !important;
    transition: none !important;
  }
  .game-card:hover {
    transform: none !important;
  }
}

/* ============ DASHBOARD KEYBOARD SHORTCUT HINT ============ */
.admin-shortcut-hint {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 6px;
  margin-inline-start: 6px;
  border-radius: 4px;
  background: rgba(232,183,48,0.1);
  color: var(--gold, #E8B730);
  border: 1px solid rgba(232,183,48,0.25);
  font-family: 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ============ ADMIN FLASH HIGHLIGHT (when shortcut activates a tab) ============ */
@keyframes adminShortcutFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,183,48,0); }
  50%      { box-shadow: 0 0 0 3px rgba(232,183,48,0.55); }
}
.admin-nav-btn.shortcut-flash {
  animation: adminShortcutFlash 0.5s ease;
}

/* ============ FONTS LOADED CLASS ============ */
/* Lighter text rendering before webfont loads to prevent layout jank */
html:not(.fonts-loaded) body {
  font-synthesis: style weight;
}