/* Visual Feedback Enhancement CSS Infrastructure */

/* ===== CSS CUSTOM PROPERTIES FOR CONSISTENT TIMING AND EASING ===== */
:root {
  /* Animation Durations */
  --vf-duration-fast: 150ms;
  --vf-duration-normal: 300ms;
  --vf-duration-slow: 500ms;
  --vf-duration-emphasis: 800ms;
  --vf-duration-particle: 1000ms;
  --vf-duration-glow: 2000ms;

  /* Easing Functions */
  --vf-ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --vf-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --vf-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --vf-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --vf-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --vf-ease-in: cubic-bezier(0.4, 0.0, 1, 1);

  /* Colors for Visual States */
  --vf-color-valid: #4caf50;
  --vf-color-invalid: #f44336;
  --vf-color-warning: #ff9800;
  --vf-color-success: #4caf50;
  --vf-color-bonus: #ffd700;
  --vf-color-danger: #f44336;
  --vf-color-highlight: #2196f3;

  /* Opacity Values */
  --vf-opacity-preview: 0.8;
  --vf-opacity-highlight: 0.6;
  --vf-opacity-disabled: 0.4;
  --vf-opacity-fade: 0.0;

  /* Transform Values */
  --vf-scale-hover: 1.05;
  --vf-scale-active: 0.95;
  --vf-scale-emphasis: 1.2;
  --vf-translate-float: -20px;

  /* Shadow Values */
  --vf-shadow-glow: 0 0 10px;
  --vf-shadow-emphasis: 0 0 20px;
  --vf-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ===== HARDWARE ACCELERATION BASE CLASSES ===== */
.vf-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.vf-gpu-layer {
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* ===== CORE ANIMATION BASE CLASSES ===== */

/* Fade Animations */
.vf-fade-in {
  animation: vf-fadeIn var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

.vf-fade-out {
  animation: vf-fadeOut var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

.vf-fade-in-up {
  animation: vf-fadeInUp var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

/* Slide Animations */
.vf-slide-in-left {
  animation: vf-slideInLeft var(--vf-duration-normal) var(--vf-ease-bounce) forwards;
}

.vf-slide-in-right {
  animation: vf-slideInRight var(--vf-duration-normal) var(--vf-ease-bounce) forwards;
}

.vf-slide-in-up {
  animation: vf-slideInUp var(--vf-duration-normal) var(--vf-ease-bounce) forwards;
}

.vf-slide-in-down {
  animation: vf-slideInDown var(--vf-duration-normal) var(--vf-ease-bounce) forwards;
}

/* Scale Animations */
.vf-scale-in {
  animation: vf-scaleIn var(--vf-duration-normal) var(--vf-ease-bounce) forwards;
}

.vf-scale-out {
  animation: vf-scaleOut var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

.vf-bounce-in {
  animation: vf-bounceIn var(--vf-duration-emphasis) var(--vf-ease-bounce) forwards;
}

/* Pulse Animations */
.vf-pulse {
  animation: vf-pulse var(--vf-duration-glow) var(--vf-ease-in-out) infinite;
}

.vf-pulse-fast {
  animation: vf-pulse var(--vf-duration-normal) var(--vf-ease-in-out) infinite;
}

.vf-pulse-slow {
  animation: vf-pulse var(--vf-duration-emphasis) var(--vf-ease-in-out) infinite;
}

/* Shake Animations */
.vf-shake {
  animation: vf-shake var(--vf-duration-slow) var(--vf-ease-smooth) forwards;
}

.vf-invalid-shake {
  animation: vf-invalidShake var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

.vf-wobble {
  animation: vf-wobble var(--vf-duration-slow) var(--vf-ease-smooth) infinite;
}

/* Float Animations */
.vf-float-up {
  animation: vf-floatUp var(--vf-duration-emphasis) var(--vf-ease-out) forwards;
}

.vf-float-score {
  animation: vf-floatScore var(--vf-duration-emphasis) var(--vf-ease-out) forwards;
}

/* ===== VISUAL STATE CLASSES ===== */

/* Drag Feedback States */
.vf-drag-valid {
  background-color: var(--vf-color-valid) !important;
  box-shadow: var(--vf-shadow-glow) var(--vf-color-valid);
  border: 2px solid var(--vf-color-valid);
  opacity: var(--vf-opacity-highlight);
  transition: all var(--vf-duration-fast) var(--vf-ease-smooth);
}

/* Valid Placement Position Highlighting */
.vf-valid-position {
  background-color: rgba(76, 175, 80, 0.3) !important;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6), inset 0 0 4px rgba(76, 175, 80, 0.4);
  border: 2px solid rgba(76, 175, 80, 0.8);
  transform: scale(1.02);
  transition: all var(--vf-duration-fast) var(--vf-ease-smooth);
  will-change: transform, background-color, box-shadow;
  z-index: 10;
  position: relative;
}

.vf-valid-position::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--vf-color-valid);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  animation: vf-validPulse var(--vf-duration-glow) var(--vf-ease-in-out) infinite;
}
/* NEUE KLASSE: Spezielle Hervorhebung für gültige Bonusfelder */
.vf-valid-bonus-position {
  outline: 3px solid var(--vf-color-valid);
  outline-offset: -3px; /* Zeichnet die Kontur innerhalb der Zelle */
  box-shadow: 0 0 12px var(--vf-color-valid), inset 0 0 8px rgba(76, 175, 80, 0.5);
  transform: scale(1.1);
  transition: all var(--vf-duration-fast) var(--vf-ease-smooth);
  will-change: transform, box-shadow, outline;
  z-index: 10;
  position: relative;
}
@keyframes vf-validPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
}


/* Invalid Placement Position Highlighting */
.vf-invalid-position {
  background-color: rgba(244, 67, 54, 0.3) !important;
  box-shadow: 0 0 8px rgba(244, 67, 54, 0.6), inset 0 0 4px rgba(244, 67, 54, 0.4);
  border: 2px solid rgba(244, 67, 54, 0.8);
  transform: scale(1.02);
  transition: all var(--vf-duration-fast) var(--vf-ease-smooth);
  will-change: transform, background-color, box-shadow;
  z-index: 10;
  position: relative;
}

.vf-invalid-position::after {
  content: '✕';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  color: var(--vf-color-invalid);
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  animation: vf-invalidPulse var(--vf-duration-glow) var(--vf-ease-in-out) infinite;
}

/* Enhanced Invalid Position States */
.vf-invalid-primary {
  background-color: rgba(244, 67, 54, 0.5) !important;
  box-shadow: 0 0 12px rgba(244, 67, 54, 0.8), inset 0 0 6px rgba(244, 67, 54, 0.6);
  border: 3px solid rgba(244, 67, 54, 1);
  transform: scale(1.05);
}

.vf-invalid-primary::after {
  font-size: 12px;
  opacity: 1;
  animation: vf-invalidPrimaryPulse var(--vf-duration-normal) var(--vf-ease-in-out) infinite;
}

.vf-invalid-preview {
  background-color: rgba(244, 67, 54, 0.2) !important;
  box-shadow: 0 0 6px rgba(244, 67, 54, 0.4), inset 0 0 3px rgba(244, 67, 54, 0.3);
  border: 2px dashed rgba(244, 67, 54, 0.6);
  opacity: 0.8;
}

.vf-invalid-preview::after {
  content: '·';
  font-size: 14px;
  opacity: 0.7;
  animation: vf-invalidPreviewPulse var(--vf-duration-slow) var(--vf-ease-in-out) infinite;
}

@keyframes vf-invalidPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

@keyframes vf-invalidPrimaryPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.8;
  }
}

@keyframes vf-invalidPreviewPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.9;
  }
}

/* Hover state transitions between valid/invalid */
.vf-hover-transition {
  transition: all var(--vf-duration-fast) var(--vf-ease-smooth);
}

/* Enhanced transition effects for state changes */
.vf-state-transition {
  transition: background-color var(--vf-duration-fast) var(--vf-ease-smooth),
              border-color var(--vf-duration-fast) var(--vf-ease-smooth),
              box-shadow var(--vf-duration-fast) var(--vf-ease-smooth),
              transform var(--vf-duration-fast) var(--vf-ease-smooth),
              opacity var(--vf-duration-fast) var(--vf-ease-smooth);
}

/* Invalid placement overlay effect */
.vf-invalid-overlay {
  position: relative;
}

.vf-invalid-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(244, 67, 54, 0.1) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(244, 67, 54, 0.1) 50%, 
    rgba(244, 67, 54, 0.1) 75%, 
    transparent 75%);
  background-size: 8px 8px;
  pointer-events: none;
  opacity: 0;
  animation: vf-invalidOverlayFade var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

@keyframes vf-invalidOverlayFade {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.vf-drag-invalid {
  background-color: var(--vf-color-invalid) !important;
  box-shadow: var(--vf-shadow-glow) var(--vf-color-invalid);
  border: 2px solid var(--vf-color-invalid);
  opacity: var(--vf-opacity-highlight);
  transition: all var(--vf-duration-fast) var(--vf-ease-smooth);
}

.vf-drag-preview {
  background-color: var(--vf-color-highlight) !important;
  opacity: var(--vf-opacity-preview);
  border: 2px dashed var(--vf-color-highlight);
  transition: all var(--vf-duration-fast) var(--vf-ease-smooth);
}

/* Bonus Field States */
.vf-bonus-highlight {
  box-shadow: var(--vf-shadow-emphasis) var(--vf-color-bonus);
  transform: scale(var(--vf-scale-emphasis));
  transition: all var(--vf-duration-normal) var(--vf-ease-bounce);
}

.vf-bonus-activated {
  animation: vf-bonusActivation var(--vf-duration-emphasis) var(--vf-ease-bounce) forwards;
}

/* Hover Effects */
.vf-hover-lift {
  transition: transform var(--vf-duration-fast) var(--vf-ease-smooth),
              box-shadow var(--vf-duration-fast) var(--vf-ease-smooth);
}

.vf-hover-lift:hover {
  transform: translateY(-2px) scale(var(--vf-scale-hover));
  box-shadow: var(--vf-shadow-hover);
}

.vf-hover-glow {
  transition: box-shadow var(--vf-duration-fast) var(--vf-ease-smooth);
}

.vf-hover-glow:hover {
  box-shadow: var(--vf-shadow-glow) var(--vf-color-highlight);
}

/* Success States */
.vf-success-flash {
  animation: vf-successFlash var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

.vf-score-update {
  animation: vf-scoreUpdate var(--vf-duration-normal) var(--vf-ease-bounce) forwards;
}

/* Error States */
.vf-error-shake {
  animation: vf-errorShake var(--vf-duration-slow) var(--vf-ease-smooth) forwards;
}

.vf-error-flash {
  animation: vf-errorFlash var(--vf-duration-normal) var(--vf-ease-smooth) forwards;
}

/* Disabled States */
.vf-disabled {
  opacity: var(--vf-opacity-disabled);
  pointer-events: none;
  filter: grayscale(0.5);
  transition: all var(--vf-duration-normal) var(--vf-ease-smooth);
}

/* Loading States */
.vf-loading {
  position: relative;
  overflow: hidden;
}

.vf-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: vf-shimmer var(--vf-duration-emphasis) var(--vf-ease-smooth) infinite;
}

/* ===== KEYFRAME DEFINITIONS ===== */

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

@keyframes vf-fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@keyframes vf-slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes vf-slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes vf-slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vf-slideInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vf-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes vf-scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes vf-bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes vf-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes vf-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes vf-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}

@keyframes vf-floatUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(var(--vf-translate-float));
  }
}

@keyframes vf-floatScore {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--vf-translate-float)) scale(0.8);
  }
}

@keyframes vf-bonusActivation {
  0% {
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    transform: scale(1.3);
    box-shadow: var(--vf-shadow-emphasis) var(--vf-color-bonus);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--vf-shadow-glow) var(--vf-color-bonus);
  }
}

@keyframes vf-successFlash {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--vf-color-success);
  }
}

@keyframes vf-scoreUpdate {
  0% {
    transform: scale(1);
    color: inherit;
  }
  50% {
    transform: scale(1.2);
    color: var(--vf-color-success);
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

@keyframes vf-errorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

@keyframes vf-invalidShake {
  0%, 100% { transform: translateX(0) scale(1.02); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px) scale(1.02); }
  20%, 40%, 60%, 80% { transform: translateX(3px) scale(1.02); }
}

@keyframes vf-errorFlash {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--vf-color-invalid);
  }
}

@keyframes vf-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ===== PARTICLE EFFECT CLASSES ===== */

.vf-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1000;
}

.vf-sparkle {
  width: 4px;
  height: 4px;
  background: var(--vf-color-bonus);
  animation: vf-sparkleFloat var(--vf-duration-particle) var(--vf-ease-out) forwards;
}

.vf-particle-burst {
  animation: vf-particleBurst var(--vf-duration-particle) var(--vf-ease-out) forwards;
}

@keyframes vf-sparkleFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0.5);
  }
}

@keyframes vf-particleBurst {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* ===== ACCESSIBILITY SUPPORT ===== */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .vf-fade-in,
  .vf-fade-out,
  .vf-fade-in-up,
  .vf-slide-in-left,
  .vf-slide-in-right,
  .vf-slide-in-up,
  .vf-slide-in-down,
  .vf-scale-in,
  .vf-scale-out,
  .vf-bounce-in,
  .vf-pulse,
  .vf-pulse-fast,
  .vf-pulse-slow,
  .vf-shake,
  .vf-wobble,
  .vf-float-up,
  .vf-float-score,
  .vf-bonus-activated,
  .vf-success-flash,
  .vf-score-update,
  .vf-error-shake,
  .vf-error-flash,
  .vf-sparkle,
  .vf-particle-burst {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .vf-hover-lift:hover {
    transform: none;
  }

  .vf-loading::after {
    display: none;
  }
}

/* High Contrast Support */
@media (prefers-contrast: high) {
  .vf-drag-valid {
    border: 3px solid currentColor;
    background-color: transparent !important;
  }

  .vf-drag-invalid {
    border: 3px solid currentColor;
    background-color: transparent !important;
  }

  .vf-drag-preview {
    border: 3px dashed currentColor;
    background-color: transparent !important;
  }

  .vf-bonus-highlight {
    border: 3px solid currentColor;
    box-shadow: none;
  }
}

/* ===== UTILITY CLASSES ===== */

.vf-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vf-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vf-no-transition {
  transition: none !important;
  animation: none !important;
}

.vf-preserve-3d {
  transform-style: preserve-3d;
}

.vf-smooth-edges {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== PERFORMANCE OPTIMIZATION CLASSES ===== */

.vf-optimize-animations {
  contain: layout style paint;
  will-change: transform, opacity;
}

.vf-composite-layer {
  transform: translateZ(0);
  will-change: transform;
}

.vf-isolate {
  isolation: isolate;
}