/* ======================
   MODAL ANIMATIONS - MATERIAL DESIGN INSPIRED
   Анімації модалок з дизайнерськими принципами
   - Модалка "виростає" з картки
   - Морфінг ефект
   - Easing функції з Material Design
   - Stagger animations для контенту
====================== */

:root {
  /* Material Design Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-anticipate: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ======================
   МОРФІНГ АНІМАЦІЯ - МОДАЛКА "ВИРОСТАЄ" З КАРТКИ
====================== */

.modal-overlay {
  transition: all 0.5s var(--ease-out-expo);
}

.modal-overlay.active {
  animation: modalOverlayAppear 0.5s var(--ease-out-expo);
}

.modal {
  transform-origin: center center;
  transition: all 0.6s var(--ease-out-expo);
}

/* Початковий стан - маленька точка */
.modal-overlay:not(.active) .modal {
  transform: scale(0.05) translateY(200px);
  opacity: 0;
  border-radius: 50%;
}

/* Кінцевий стан - повна модалка */
.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
  border-radius: 20px;
  animation: modalMorphIn 0.7s var(--ease-out-expo);
}

/* Анімація закриття - повертається в картку */
.modal-overlay.closing .modal {
  animation: modalMorphOut 0.5s var(--ease-in-out-quart) forwards;
}

@keyframes modalOverlayAppear {
  0% {
    backdrop-filter: blur(0px);
    background: rgba(0, 0, 0, 0);
  }
  100% {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.8);
  }
}

@keyframes modalMorphIn {
  0% {
    transform: scale(0.05) translateY(200px) rotateX(90deg);
    opacity: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  30% {
    transform: scale(0.3) translateY(100px) rotateX(45deg);
    opacity: 0.3;
    border-radius: 40%;
  }
  60% {
    transform: scale(0.8) translateY(20px) rotateX(10deg);
    opacity: 0.8;
    border-radius: 25px;
  }
  100% {
    transform: scale(1) translateY(0) rotateX(0deg);
    opacity: 1;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  }
}

@keyframes modalMorphOut {
  0% {
    transform: scale(1) translateY(0) rotateX(0deg);
    opacity: 1;
    border-radius: 20px;
  }
  40% {
    transform: scale(0.7) translateY(30px) rotateX(-15deg);
    opacity: 0.7;
    border-radius: 30px;
  }
  100% {
    transform: scale(0.05) translateY(200px) rotateX(-90deg);
    opacity: 0;
    border-radius: 50%;
  }
}

/* ======================
   STAGGER ANIMATION - КОНТЕНТ З'ЯВЛЯЄТЬСЯ ПОЕТАПНО
====================== */

.modal-overlay.active .modal-header {
  animation: contentSlideDown 0.6s var(--ease-out-expo) 0.3s both;
}

.modal-overlay.active .modal-description {
  animation: contentFadeUp 0.5s var(--ease-out-expo) 0.5s both;
}

.modal-overlay.active .modal-features {
  animation: contentFadeUp 0.5s var(--ease-out-expo) 0.7s both;
}

.modal-overlay.active .modal-actions {
  animation: contentFadeUp 0.5s var(--ease-out-expo) 0.9s both;
}

/* Анімація feature list items по черзі */
.modal-overlay.active .modal-feature-list li {
  opacity: 0;
  animation: listItemSlide 0.4s var(--ease-out-expo) forwards;
}

.modal-feature-list li:nth-child(1) { animation-delay: 0.8s; }
.modal-feature-list li:nth-child(2) { animation-delay: 0.9s; }
.modal-feature-list li:nth-child(3) { animation-delay: 1.0s; }
.modal-feature-list li:nth-child(4) { animation-delay: 1.1s; }
.modal-feature-list li:nth-child(5) { animation-delay: 1.2s; }
.modal-feature-list li:nth-child(6) { animation-delay: 1.3s; }

@keyframes contentSlideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes listItemSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ======================
   ENHANCED BUTTON ANIMATIONS
====================== */

.modal-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out-expo);
}

.modal-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s var(--ease-out-expo);
}

.modal-btn:hover::before {
  width: 300px;
  height: 300px;
}

.modal-btn:active {
  transform: scale(0.95);
}

/* Ripple effect при кліку */
.modal-btn.ripple {
  animation: rippleEffect 0.6s var(--ease-out-expo);
}

@keyframes rippleEffect {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(255, 152, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 152, 0, 0);
  }
}

/* ======================
   CLOSE BUTTON ENHANCED ANIMATION
====================== */

.modal-close {
  transition: all 0.3s var(--ease-anticipate);
}

.modal-close:hover {
  transform: scale(1.1) rotate(90deg);
  background: rgba(255, 152, 0, 0.2);
}

.modal-close:active {
  transform: scale(0.9) rotate(180deg);
}

/* ======================
   PARALLAX EFFECT ДЛЯ HEADER
====================== */

.modal-header::before {
  animation: gradientShift 0.8s var(--ease-out-expo) 0.4s both;
}

@keyframes gradientShift {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ======================
   MICRO-INTERACTIONS
====================== */

/* Feature list hover effect */
.modal-feature-list li {
  transition: all 0.3s var(--ease-out-expo);
  position: relative;
}

.modal-feature-list li::before {
  transition: all 0.3s var(--ease-anticipate);
}

.modal-feature-list li:hover::before {
  transform: scale(1.2) rotate(360deg);
}

/* Modal title icon animation */
.modal-title .icon {
  transition: all 0.4s var(--ease-anticipate);
}

.modal-overlay.active .modal-title .icon {
  animation: iconBounce 0.8s var(--ease-anticipate) 0.6s;
}

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

/* ======================
   SCROLL ANIMATIONS В МОДАЛЦІ
====================== */

.modal {
  scroll-behavior: smooth;
}

.modal::-webkit-scrollbar-thumb {
  transition: all 0.3s ease;
}

.modal::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
  transform: scaleY(1.1);
}

/* ======================
   RESPONSIVE ANIMATION ADJUSTMENTS
====================== */

/* Зменшуємо анімації на слабких пристроях */
@media (max-width: 768px) {
  .modal {
    transition-duration: 0.4s;
  }
  
  .modal-overlay.active .modal {
    animation-duration: 0.5s;
  }
  
  .modal-overlay.closing .modal {
    animation-duration: 0.3s;
  }
  
  /* Спрощуємо stagger animations на мобільних */
  .modal-overlay.active .modal-header,
  .modal-overlay.active .modal-description,
  .modal-overlay.active .modal-features,
  .modal-overlay.active .modal-actions {
    animation-delay: 0.2s;
  }
  
  .modal-feature-list li {
    animation-delay: 0.3s !important;
  }
}

/* Відключаємо складні анімації для користувачів з порушеннями */
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal-overlay {
    transition: opacity 0.2s ease;
  }
  
  .modal-overlay.active .modal {
    animation: simpleModalAppear 0.3s ease;
  }
  
  @keyframes simpleModalAppear {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Відключаємо stagger animations */
  .modal-overlay.active .modal-header,
  .modal-overlay.active .modal-description,
  .modal-overlay.active .modal-features,
  .modal-overlay.active .modal-actions,
  .modal-feature-list li {
    animation: none;
    opacity: 1;
  }
}

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

/* Включаємо hardware acceleration */
.modal,
.modal-overlay,
.modal-btn,
.modal-close {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Відключаємо will-change після анімації */
.modal-overlay:not(.active) .modal,
.modal-overlay:not(.active) {
  will-change: auto;
}