/*
 * animations.css — Step transitions, hover effects, UI animations
 * widget4 modernization
 */

/* ============================================================
   Step / Modal transitions
   ============================================================ */

@keyframes stepIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

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

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

/* Apply to .content when the modal becomes visible */
.modal_item.active .content {
    animation: fadeIn var(--transition-normal);
}

.modal-step-enter { animation: stepIn  var(--transition-normal); }
.modal-step-exit  { animation: stepOut var(--transition-fast) forwards; }

/* ============================================================
   Cards and buttons — hover/active micro-interactions
   ============================================================ */

/* Radio cards (dates, times, coaches) */
.param.date  .label > div:not(.off):not(.off2) label,
.param.time  label,
.param.age   label,
.param.tickets label,
.coach_item,
.coach_amount_users_content label {
    transition:
        transform   var(--transition-fast),
        box-shadow  var(--transition-fast);
}

.param.date  .label > div:not(.off):not(.off2) label:hover,
.param.time  label:hover,
.param.age   label:hover,
.param.tickets label:hover,
.coach_item:hover {
    transform:  translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Групповые тренировки: шаг 4 использует i-элементы, лифт-эффект не нужен */
.content.v3 .param.time label          { transition: none; }
.content.v3 .param.time label:hover    { transform: none; box-shadow: none; }

/* Primary button */
.btn {
    transition:
        background-color var(--transition-fast),
        transform        var(--transition-fast),
        box-shadow       var(--transition-fast);
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0);    box-shadow: none; }

/* Return links */
.return_link { transition: color var(--transition-fast); }

/* Progress lines at bottom */
aside .bottom .line {
    transition: border-color var(--transition-slow);
}

/* ============================================================
   Spinner (improved — single CSS keyframe)
   ============================================================ */

@keyframes spin_form {
    to { transform: rotate(359deg); }
}

.animate-spin {
    display: inline-block;
    animation: spin_form 2s infinite linear;
}

/* ============================================================
   Error mark slide-in
   ============================================================ */

@keyframes errorPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

aside.error .error_mark {
    animation: errorPulse 0.4s ease;
}

/* ============================================================
   Personal/Payment sections slide-down
   ============================================================ */

.personal_ON .personal_data,
.payment_ON  .payment_data {
    animation: slideDown var(--transition-normal);
}

/* ============================================================
   Calendar open/close
   ============================================================ */

.calendarON .param.calendar {
    animation: slideDown var(--transition-normal);
}