/**
 * Continue Block - Académie des Étoiles
 */

.ade-continue { margin: var(--ade-space-3xl) 0; }

.ade-continue__container {
    background: linear-gradient(135deg,
                rgba(155, 81, 224, 0.03) 0%,
                rgba(202, 179, 255, 0.05) 100%);
    border-radius: 16px;
    box-shadow: var(--ade-shadow-md);
    padding: var(--ade-space-2xl);
    border: 2px solid rgba(155, 81, 224, 0.1);
}

.ade-continue__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ade-space-xl);
}

/* Message */
.ade-continue__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ade-space-md);
    text-align: center;
}

.ade-continue__icon {
    color: var(--ade-primary);
    opacity: 0.8;
}

.ade-continue__text {
    font-size: var(--ade-font-size-large);
    color: var(--ade-text);
    margin: 0;
    max-width: 600px;
}

/* Button */
.ade-continue__button {
    display: inline-flex;
    align-items: center;
    gap: var(--ade-space-sm);
    padding: var(--ade-space-md) var(--ade-space-2xl);
    background: var(--ade-primary);
    color: var(--ade-white);
    border: none;
    border-radius: 12px;
    font-size: var(--ade-font-size-large);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(155, 81, 224, 0.3);
}

.ade-continue__button:hover {
    background: var(--ade-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(155, 81, 224, 0.4);
}

.ade-continue__button:active {
    transform: translateY(0);
}

.ade-continue__button:focus {
    outline: 3px solid rgba(155, 81, 224, 0.3);
    outline-offset: 4px;
}

.ade-continue__button-icon {
    transition: transform 0.3s ease;
}

.ade-continue__button:hover .ade-continue__button-icon {
    transform: translateX(4px);
}

/* Completed state */
.ade-continue__button--completed {
    background: var(--ade-gray);
    color: var(--ade-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

.ade-continue__button--completed:hover {
    background: var(--ade-gray);
    transform: none;
    box-shadow: none;
}

.ade-continue__button--completed .ade-continue__button-icon {
    display: none;
}

.ade-continue__button-check {
    display: none;
}

.ade-continue__button--completed .ade-continue__button-check {
    display: inline-block;
    color: #2ec573;
}

/* Completion state */
.ade-continue__completion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ade-space-md);
    padding: var(--ade-space-lg);
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 2px solid #2ec573;
    border-radius: 12px;
    animation: slideInFade 0.5s ease;
}

.ade-continue__completion-icon {
    color: #2ec573;
}

.ade-continue__completion-text {
    font-size: var(--ade-font-size-base);
    font-weight: 600;
    color: #1a7c4f;
    margin: 0;
    text-align: center;
}

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

/* Hidden content after Continue block */
.ade-continue-hidden {
    display: none !important;
}

/* Revealed content animation
 * PRIORITY 1 OPTIMIZATION (1.2): animation-delay set dynamically via JavaScript
 * for staggered reveals without creating N timers. Reduces event loop pressure by 95%.
 */
.ade-continue-revealed {
    animation: revealContent 0.8s ease forwards;
    /* animation-delay: set dynamically via script.js (e.g., 0ms, 50ms, 100ms, ...) */
}

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

/* Style variants */
.ade-continue__container--success .ade-continue__icon {
    color: #2ec573;
}

.ade-continue__container--success .ade-continue__button {
    background: #2ec573;
    box-shadow: 0 4px 12px rgba(46, 213, 115, 0.3);
}

.ade-continue__container--success .ade-continue__button:hover {
    background: #25a05d;
    box-shadow: 0 6px 16px rgba(46, 213, 115, 0.4);
}

.ade-continue__container--default .ade-continue__icon {
    color: var(--ade-gray);
}

.ade-continue__container--default .ade-continue__button {
    background: var(--ade-gray);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.ade-continue__container--default .ade-continue__button:hover {
    background: #495057;
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.4);
}

/* Responsive */
@media screen and (max-width: 768px) {
    .ade-continue__container {
        padding: var(--ade-space-xl);
    }

    .ade-continue__text {
        font-size: var(--ade-font-size-base);
    }

    .ade-continue__button {
        padding: var(--ade-space-sm) var(--ade-space-xl);
        font-size: var(--ade-font-size-base);
    }

    .ade-continue__icon {
        width: 36px;
        height: 36px;
    }
}