/**
 * app-premium.css - Premium enhancements & micro-interactions
 * Ce fichier complète app.css avec les améliorations premium
 * À charger APRÈS app.css et design-system.css
 */

/* ===============================================
   PREMIUM MODE TOGGLE
   =============================================== */
body:not(.premium-mode) .premium-only {
  display: none !important;
}

body.premium-mode {
  /* Amélioration du background avec subtile animation */
  background: 
    radial-gradient(circle at 20% 30%, rgba(124, 147, 245, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(245, 163, 199, 0.06) 0%, transparent 40%),
    linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-mid) 50%, var(--color-bg-end) 100%);
}

/* ===============================================
   LOADER & PRELOAD SCREEN
   =============================================== */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: linear-gradient(135deg, var(--color-bg-start) 0%, var(--color-bg-mid) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-premium);
}

.loader-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-logo {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-primary);
  text-shadow: 0 0 40px var(--color-primary-glow);
  animation: pulse 2s var(--ease-premium) infinite;
}

.loader-progress {
  width: 240px;
  height: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.loader-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-full);
  transition: width var(--duration-fast) var(--ease-premium);
  box-shadow: 0 0 12px var(--color-primary-glow);
}

.loader-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* ===============================================
   BUTTONS - Micro-interactions premium
   =============================================== */

/* Primary Button */
.btn-primary, .setupBtn:not(.secondary):not(.danger) {
  position: relative;
  padding: var(--space-3) var(--space-6);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--text-base);
  box-shadow: var(--shadow-md), var(--glow-primary);
  transition: all var(--duration-fast) var(--ease-premium);
  overflow: hidden;
}

.btn-primary::before, .setupBtn:not(.secondary):not(.danger)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.btn-primary:hover::before, .setupBtn:not(.secondary):not(.danger):hover::before {
  opacity: 1;
}

.btn-primary:hover, .setupBtn:not(.secondary):not(.danger):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

.btn-primary:active, .setupBtn:not(.secondary):not(.danger):active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

/* Secondary Button */
.btn-secondary, .setupBtn.secondary {
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  transition: all var(--duration-fast) var(--ease-premium);
}

.btn-secondary:hover, .setupBtn.secondary:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:active, .setupBtn.secondary:active {
  transform: translateY(0) scale(0.98);
}

/* Ghost Button */
.btn-ghost {
  padding: var(--space-3) var(--space-6);
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--duration-fast) var(--ease-premium);
}

.btn-ghost:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-ghost:active {
  transform: scale(0.96);
}

/* Danger Button */
.setupBtn.danger {
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
  color: white;
  box-shadow: var(--shadow-md), var(--glow-warning);
}

.setupBtn.danger:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--glow-warning);
}

/* Menu Button (topbar) */
.menuBtn {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  transition: all var(--duration-fast) var(--ease-premium);
}

.menuBtn:hover {
  background: var(--color-surface-hover) !important;
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.menuBtn:active {
  transform: translateY(0) scale(0.95);
}

/* Loading state */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===============================================
   BUBBLE BUTTONS - Enhanced avec tilt 3D
   =============================================== */
.bubbleBtn {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--meBtnR, var(--radius-lg));
  transition: all var(--duration-fast) var(--ease-premium);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.bubbleBtn::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--color-primary-glow), transparent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-fast);
  z-index: -1;
}

/* Desktop : tilt 3D au hover */
@media (hover: hover) {
  .bubbleBtn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-md), var(--glow-primary);
    border-color: var(--color-primary);
  }
  
  .bubbleBtn:hover::before {
    opacity: 1;
  }
  
  /* Tilt 3D subtil */
  .bubbleBtn {
    transition: transform var(--duration-fast) var(--ease-premium);
  }
}

/* Mobile : press feedback */
.bubbleBtn:active {
  transform: scale(0.96);
}

/* ===============================================
   CARDS - Animations de cartes premium
   =============================================== */
.card-item {
  transition: all var(--duration-fast) var(--ease-premium);
  transform-style: preserve-3d;
}

/* Draw animation (anticipation + impact) */
@keyframes cardDraw {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.8) rotateX(-15deg);
  }
  40% {
    opacity: 1;
    transform: translateY(-8px) scale(1.05) rotateX(5deg);
  }
  70% {
    transform: translateY(2px) scale(0.98) rotateX(-2deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
  }
}

.card-draw-animation {
  animation: cardDraw var(--duration-slow) var(--ease-bounce);
}

/* Play animation */
@keyframes cardPlay {
  0% {
    transform: scale(1) rotateZ(0);
  }
  30% {
    transform: scale(1.15) rotateZ(-5deg);
  }
  60% {
    transform: scale(0.95) rotateZ(2deg);
  }
  100% {
    transform: scale(1) rotateZ(0);
  }
}

.card-play-animation {
  animation: cardPlay var(--duration-normal) var(--ease-bounce);
}

/* Flip animation */
@keyframes cardFlip {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(90deg) scale(1.1);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.card-flip-animation {
  animation: cardFlip var(--duration-slow) var(--ease-premium);
}

/* Score particle effect */
@keyframes scoreSparkle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0);
  }
  50% {
    opacity: 0.8;
    transform: translate(var(--tx, 0), var(--ty, -30px)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx, 0) * 1.5), calc(var(--ty, -30px) * 1.5)) scale(0.5);
  }
}

.score-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  animation: scoreSparkle var(--duration-slow) var(--ease-premium) forwards;
  box-shadow: 0 0 8px var(--color-accent);
}

/* ===============================================
   PANELS & MODALS - Transitions améliorées
   =============================================== */
.panelOverlay {
  backdrop-filter: blur(0px);
  transition: backdrop-filter var(--duration-normal) var(--ease-premium);
}

.panelOverlay:not([aria-hidden="true"]) {
  backdrop-filter: blur(6px);
}

.panel {
  transform: translateY(100%);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-premium);
}

.panelOverlay:not([aria-hidden="true"]) .panel {
  transform: translateY(0);
  opacity: 1;
}

/* Zone Modal */
.zone-modal {
  backdrop-filter: blur(0px);
  transition: all var(--duration-normal) var(--ease-premium);
}

.zone-modal:not([hidden]) {
  backdrop-filter: blur(6px);
}

.zone-modal-content {
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: all var(--duration-normal) var(--ease-premium);
}

.zone-modal:not([hidden]) .zone-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Card Modal */
.card-modal {
  backdrop-filter: blur(0px);
  transition: backdrop-filter var(--duration-normal) var(--ease-premium);
}

.card-modal:not([style*="display: none"]) {
  backdrop-filter: blur(6px);
}

.card-modal-content {
  transform: scale(0.9);
  opacity: 0;
  transition: all var(--duration-fast) var(--ease-premium);
}

.card-modal:not([style*="display: none"]) .card-modal-content {
  transform: scale(1);
  opacity: 1;
}

/* ===============================================
   TOAST - Premium feedback
   =============================================== */
.toastWrap {
  position: fixed;
  bottom: calc(var(--safe-bottom) + var(--space-6));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all var(--duration-fast) var(--ease-premium);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===============================================
   TURN DOT - Amélioré avec glow
   =============================================== */
@keyframes pulse-premium {
  0%, 100% {
    box-shadow: 
      0 6px 18px rgba(0,0,0,.3), 
      0 0 20px currentColor,
      inset 0 1px 2px rgba(255,255,255,0.4);
  }
  50% {
    box-shadow: 
      0 6px 24px rgba(0,0,0,.4), 
      0 0 32px currentColor,
      inset 0 1px 3px rgba(255,255,255,0.5);
  }
}

.turnDot {
  animation: pulse-premium 2s var(--ease-premium) infinite;
}

/* ===============================================
   SCORE TRACK - Visual enhancement
   =============================================== */
.stfFill {
  transition: width var(--duration-normal) var(--ease-premium);
  position: relative;
  overflow: hidden;
}

.stfFill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s linear infinite;
}

/* ===============================================
   FOCUS STATES - Accessibilité premium
   =============================================== */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===============================================
   MOBILE OPTIMIZATION
   =============================================== */
@media (max-width: 768px) {
  /* Éviter les animations trop complexes sur mobile */
  .card-item {
    transform-style: flat;
  }
  
  /* Réduire les blurs sur mobile faible */
  body.low-perf .panelOverlay:not([aria-hidden="true"]),
  body.low-perf .zone-modal:not([hidden]),
  body.low-perf .card-modal:not([style*="display: none"]) {
    backdrop-filter: blur(3px);
  }
}

/* ===============================================
   LANDSCAPE OPTIMIZATIONS
   =============================================== */
@media (orientation: landscape) {
  .loader-screen {
    flex-direction: row;
    gap: var(--space-6);
  }
}

/* ===============================================
   PERFORMANCE MODE
   =============================================== */
body.low-perf {
  /* Désactiver animations coûteuses */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Désactiver blurs */
  .panelOverlay,
  .zone-modal,
  .card-modal,
  .toast {
    backdrop-filter: none !important;
  }
  
  /* Simplifier shadows */
  * {
    box-shadow: none !important;
  }
}

/* ===============================================
   UTILITIES PREMIUM
   =============================================== */
.shake {
  animation: shake 0.3s var(--ease-premium);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.float {
  animation: float 3s var(--ease-premium) infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Glow utility */
.glow {
  box-shadow: 0 0 20px currentColor;
}

/* Success pulse */
.success-pulse {
  animation: successPulse 0.6s var(--ease-bounce);
}

@keyframes successPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}