/* ====================================
   PHASE 1: PERFORMANCE CSS ADDITIONS
   ==================================== */

/* Smooth page transitions */
body {
    opacity: 0;
    animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Optimized loading spinner */
.spinner-border {
    width: 1.2rem;
    height: 1.2rem;
    border-width: 0.15em;
}

/* Prefetch indicator (hidden but helps with prefetching) */
.prefetch-indicator {
    position: fixed;
    bottom: -100px;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Optimistic UI - instant visual feedback */
.form_box:active,
.female_box:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.form_box input[type="radio"]:checked ~ .choose-list-item-inner,
.female_box input[type="radio"]:checked ~ .choose-list-item-inner {
    background: linear-gradient(135deg, #0A884D 0%, #0bb95a 100%);
    color: white;
    transition: all 0.2s ease;
}

/* Skeleton loading for images (prevents layout shift) */
img:not([src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Optimize repaints - will-change for animated elements */
.progress-bar,
.form_box,
.female_box {
    will-change: transform;
}

/* Reduce motion for accessibility (respects user preference) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

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

/* Optimize font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Hardware acceleration for animations */
.progress-bar,
.choose_bx,
.form_box {
    transform: translateZ(0);
    backface-visibility: hidden;
}