/**
 * Transitions & Animations CSS
 * Global micro-interactions and transition utilities for My Fasting Mentor
 */

/* ============================================
   1. BASE KEYFRAMES
   ============================================ */

/* Slide up entrance animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scale bounce for selections */
@keyframes selectBounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

/* Progress bar fill animation */
@keyframes progressFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Checkmark pop animation */
@keyframes checkPop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Pulse animation for CTAs */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 151, 96, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(52, 151, 96, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 151, 96, 0);
  }
}

/* Subtle glow pulse for loaders */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(53, 109, 78, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(53, 109, 78, 0.6));
  }
}

/* Spinner rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Shimmer effect for loading states */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ============================================
   2. PAGE ENTRANCE ANIMATIONS
   ============================================ */

/* Staggered entrance for quiz cards */
.choose_card,
.answer-item,
.option-btn,
.select-age-item {
  opacity: 0;
  transform: translateY(12px);
  animation: slideUp 0.4s ease forwards;
}

/* Stagger delays for sequential items */
.choose_card:nth-child(1),
.answer-item:nth-child(1),
.option-btn:nth-child(1),
.select-age-item:nth-child(1) { animation-delay: 0.05s; }

.choose_card:nth-child(2),
.answer-item:nth-child(2),
.option-btn:nth-child(2),
.select-age-item:nth-child(2) { animation-delay: 0.10s; }

.choose_card:nth-child(3),
.answer-item:nth-child(3),
.option-btn:nth-child(3),
.select-age-item:nth-child(3) { animation-delay: 0.15s; }

.choose_card:nth-child(4),
.answer-item:nth-child(4),
.option-btn:nth-child(4),
.select-age-item:nth-child(4) { animation-delay: 0.20s; }

.choose_card:nth-child(5),
.answer-item:nth-child(5),
.option-btn:nth-child(5) { animation-delay: 0.25s; }

.choose_card:nth-child(6),
.answer-item:nth-child(6),
.option-btn:nth-child(6) { animation-delay: 0.30s; }

.choose_card:nth-child(7),
.answer-item:nth-child(7),
.option-btn:nth-child(7) { animation-delay: 0.35s; }

.choose_card:nth-child(8),
.answer-item:nth-child(8),
.option-btn:nth-child(8) { animation-delay: 0.40s; }

.choose_card:nth-child(9),
.option-btn:nth-child(9) { animation-delay: 0.45s; }

.choose_card:nth-child(10),
.option-btn:nth-child(10) { animation-delay: 0.50s; }

.option-btn:nth-child(11) { animation-delay: 0.55s; }
.option-btn:nth-child(12) { animation-delay: 0.60s; }
.option-btn:nth-child(13) { animation-delay: 0.65s; }

/* Title entrance animation */
.choose_head,
.main-title {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

/* ============================================
   3. SELECTION FEEDBACK
   ============================================ */

/* Active/tap state for clickable cards */
.choose_bx:active,
.answer-inner:active,
.age-inner:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* Selected state bounce animation */
.choose_bx.selecting,
.answer-inner.selecting {
  animation: selectBounce 0.3s ease;
}

/* Enhanced selection states */
input[type="radio"]:checked + label,
input[type="radio"]:checked + .choose_bx,
input[type="radio"]:checked + div,
.answer-item input[type="radio"]:checked + div,
.answer-item input[type="checkbox"]:checked + div {
  transition: all 0.2s ease;
}

/* Checkbox/radio check animation */
.check-circle-box svg,
.input-check svg {
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input[type="checkbox"]:checked + div .check-circle-box svg,
input[type="checkbox"]:checked + .choose-list-item-inner .input-check svg,
input[type="radio"]:checked + div .check-circle-box svg {
  transform: scale(1);
  animation: checkPop 0.3s ease;
}

/* Option button selected state */
.zone-option-btn input:checked ~ .zone-image-option,
.option-btn input:checked ~ .option-label {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  transform: scale(1.02);
}

/* ============================================
   4. BUTTON STATES
   ============================================ */

/* Base button transitions */
.messure_btn,
.continue-btn-box button,
.btn,
button[type="submit"] {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Button hover states */
.messure_btn:hover,
.continue-btn-box button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 151, 96, 0.25);
}

/* Button active/press states */
.messure_btn:active,
.continue-btn-box button:active:not(:disabled) {
  transform: scale(0.98) translateY(1px);
  box-shadow: 0 2px 8px rgba(52, 151, 96, 0.3);
}

/* Disabled button state */
.messure_btn:disabled,
.continue-btn-box button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Pulsing CTA button */
.btn-pulse {
  animation: pulse 2s infinite;
}

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

.btn.loading::after,
.messure_btn.loading::after,
button.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   5. CARD DEPTH & HOVER STATES
   ============================================ */

/* Base card styling with subtle shadow */
.choose_bx,
.answer-inner,
.choose-list-item-inner {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

/* Card hover states - desktop only */
@media (hover: hover) {
  .choose_bx:hover,
  .answer-inner:hover,
  .choose-list-item-inner:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }
}

/* Enhanced selected card state */
input[type="radio"]:checked + .choose-list-item-inner,
input[type="checkbox"]:checked + .choose-list-item-inner {
  box-shadow: 0 4px 16px rgba(52, 151, 96, 0.2);
  border-color: #349760;
}

/* Age selection cards */
.age-inner {
  transition: transform 0.2s ease;
}

.age-inner:hover {
  transform: scale(1.02);
}

.age-range {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.age-inner:hover .age-range {
  background-color: rgb(45, 140, 35);
}

/* ============================================
   6. PROGRESS BAR ANIMATION
   ============================================ */

.progress-bar {
  animation: progressFill 0.6s ease-out forwards;
  transform-origin: left;
}

.progress {
  overflow: hidden;
}

/* ============================================
   7. FORM INPUT TRANSITIONS
   ============================================ */

.messure_input,
.form-control {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.messure_input:focus,
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(52, 151, 96, 0.15);
  border-color: #349760;
}

/* ============================================
   8. LOADING STATES
   ============================================ */

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Circular loader glow effect */
#animated {
  animation: glowPulse 2s ease-in-out infinite;
}

/* ============================================
   9. MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 575px) {
  /* Faster animations on mobile */
  .choose_card,
  .answer-item,
  .option-btn,
  .select-age-item {
    animation-duration: 0.3s;
  }
  
  /* Reduce stagger delays on mobile */
  .choose_card:nth-child(n),
  .answer-item:nth-child(n),
  .option-btn:nth-child(n),
  .select-age-item:nth-child(n) {
    animation-delay: calc(0.03s * var(--item-index, 1));
  }
  
  /* Disable hover transforms on touch devices */
  .choose_bx:hover,
  .answer-inner:hover,
  .choose-list-item-inner:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  
  /* Keep active states for touch feedback */
  .choose_bx:active,
  .answer-inner:active {
    transform: scale(0.98);
    background-color: rgba(52, 151, 96, 0.05);
  }
}

/* ============================================
   10. SAFE AREA SUPPORT (iOS)
   ============================================ */

.continue-btn,
.continue-box {
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .continue-btn,
  .continue-box {
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
  }
}

/* ============================================
   11. REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   12. OFFER PAGE SPECIFIC
   ============================================ */

/* Most popular badge pulse */
.most-popular {
  animation: pulse 2s infinite;
}

/* Price list item selection */
.price-list-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.price-list-item-wrap input:checked + .price-list-item {
  transform: scale(1.01);
  box-shadow: 0 4px 20px rgba(25, 135, 84, 0.2);
}

/* Checkout button pulsing */
.checkout-price .app-button.pulsing {
  animation: pulse 1.5s cubic-bezier(0.66, 0, 0, 1) infinite;
}

/* Review cards entrance */
.app-review {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.5s ease forwards;
}

.app-review:nth-child(1) { animation-delay: 0.1s; }
.app-review:nth-child(2) { animation-delay: 0.2s; }
.app-review:nth-child(3) { animation-delay: 0.3s; }