/**
 * Magnetic Button Styles
 * Dr. Yıldız Digital Ecosystem
 * 
 * Styles for the magnetic button effect that creates a premium
 * interactive experience where buttons subtly follow cursor movement.
 * 
 * Requirements: 28.4
 */

/* ============================================
 * MAGNETIC BUTTON BASE STYLES
 * ============================================ */

.magnetic-button {
  /* Enable GPU acceleration for smooth transforms */
  will-change: transform;
  
  /* Ensure the button doesn't affect layout during animation */
  position: relative;
  
  /* Smooth transition for non-animated properties */
  transition: 
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Ensure transform doesn't interfere with other button states */
.magnetic-button:active {
  /* Preserve magnetic transform while adding scale */
  transform-origin: center center;
}

/* ============================================
 * MAGNETIC BUTTON HOVER ENHANCEMENT
 * ============================================ */

/* Add subtle glow effect when magnetic effect is active */
.magnetic-button:hover {
  /* Subtle shadow enhancement for depth */
  box-shadow: 
    0 4px 12px rgba(240, 49, 103, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Primary button magnetic hover */
.magnetic-button.btn--primary:hover {
  box-shadow: 
    0 6px 20px rgba(240, 49, 103, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Outline button magnetic hover */
.magnetic-button.btn--outline:hover {
  box-shadow: 
    0 4px 16px rgba(240, 49, 103, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ============================================
 * MAGNETIC BUTTON CONTAINER
 * For buttons that need a wrapper for proper positioning
 * ============================================ */

.magnetic-button-wrapper {
  display: inline-block;
  position: relative;
}

/* ============================================
 * REDUCED MOTION SUPPORT
 * Disable magnetic effect for users who prefer reduced motion
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  .magnetic-button {
    will-change: auto;
    transform: none !important;
  }
}

/* ============================================
 * TOUCH DEVICE HANDLING
 * Magnetic effect is disabled on touch devices via JS,
 * but we ensure no visual artifacts remain
 * ============================================ */

@media (hover: none) and (pointer: coarse) {
  .magnetic-button {
    will-change: auto;
    transform: none !important;
  }
}

/* ============================================
 * MAGNETIC BUTTON FOCUS STATES
 * Ensure focus states work correctly with magnetic effect
 * ============================================ */

.magnetic-button:focus-visible {
  /* Focus outline should not be affected by transform */
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* ============================================
 * SPECIFIC BUTTON CONTEXTS
 * Apply magnetic styling to specific button contexts
 * ============================================ */

/* Header CTA button */
.header__cta .magnetic-button {
  /* Slightly stronger shadow for header prominence */
  box-shadow: 0 2px 8px rgba(240, 49, 103, 0.1);
}

.header__cta .magnetic-button:hover {
  box-shadow: 
    0 6px 24px rgba(240, 49, 103, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hero slider CTA */
.hero-slider__cta .magnetic-button {
  /* Larger shadow for hero prominence */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.hero-slider__cta .magnetic-button:hover {
  box-shadow: 
    0 8px 32px rgba(240, 49, 103, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Contact form submit button */
.contact-form .magnetic-button {
  /* Subtle shadow for form context */
  box-shadow: 0 2px 6px rgba(240, 49, 103, 0.1);
}

.contact-form .magnetic-button:hover {
  box-shadow: 
    0 6px 20px rgba(240, 49, 103, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Treatment detail CTA */
.treatment-cta .magnetic-button,
.consultation-cta .magnetic-button {
  box-shadow: 0 2px 8px rgba(240, 49, 103, 0.1);
}

.treatment-cta .magnetic-button:hover,
.consultation-cta .magnetic-button:hover {
  box-shadow: 
    0 8px 28px rgba(240, 49, 103, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================
 * MAGNETIC BUTTON LOADING STATE
 * Disable magnetic effect during loading
 * ============================================ */

.magnetic-button.btn--loading {
  /* Disable magnetic effect during loading */
  pointer-events: none;
  transform: none !important;
}

/* ============================================
 * MAGNETIC BUTTON DISABLED STATE
 * Disable magnetic effect when button is disabled
 * ============================================ */

.magnetic-button:disabled,
.magnetic-button.btn--disabled {
  /* Disable magnetic effect when disabled */
  transform: none !important;
  will-change: auto;
}