/*
 * Entrance / exit animation for our SweetAlert2 popups (used alongside
 * notify.js). This makes the popup itself ease in and out instead of
 * appearing instantly.
 *
 * The success icon itself is a custom SVG (see NOTIFY_SUCCESS_ICON_SVG
 * in notify.js): a ring draws clockwise from the top over ~850ms, and
 * only once it is fully drawn does the checkmark fade/scale in. Error
 * popups are unaffected and keep SweetAlert2's default icon.
 */

@keyframes notifyPopIn {
    0% {
        opacity: 0;
        transform: scale(0.75) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes notifyPopOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.75) translateY(-20px);
    }
}

.notify-pop-in {
    animation: notifyPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.notify-pop-out {
    animation: notifyPopOut 0.25s ease-in !important;
}

/* ===========================
    CUSTOM SUCCESS ICON
=========================== */

/* Neutralize SweetAlert2's default success-icon chrome (border ring,
   colored background circle) since we render our own SVG via iconHtml;
   we only want SweetAlert2's sizing/positioning box, not its artwork. */
.swal2-icon.swal2-success {
    border-color: transparent !important;
}

.swal2-icon.swal2-success .swal2-icon-content {
    padding: 0;
}

.notify-success-svg {
    display: block;
    overflow: visible;
}

.notify-success-ring {
    fill: none;
    stroke: #5E8B5A;
    stroke-width: 5;
    stroke-linecap: round;
    /* Start the stroke at 12 o'clock instead of the SVG default (3 o'clock). */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;

    /* 2 * PI * r(35) ≈ 220 */
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: notifySuccessRing 0.85s ease-out forwards;
}

.notify-success-check-group {
    opacity: 0;
    transform: scale(0.5);
    transform-origin: 50% 50%;
    /* Only starts once the ring animation above has finished. */
    animation: notifySuccessCheck 0.3s ease-out forwards;
    animation-delay: 0.85s;
}

.notify-success-check {
    fill: none;
    stroke: #5E8B5A;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;

    /* Approximate path length, used for an accompanying draw-on effect. */
    stroke-dasharray: 46;
    stroke-dashoffset: 46;
    animation: notifySuccessCheckDraw 0.3s ease-out forwards;
    animation-delay: 0.85s;
}

@keyframes notifySuccessRing {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes notifySuccessCheck {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes notifySuccessCheckDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Respect reduced-motion preferences: skip the drawn-out ring/check
   animation and show the completed success state immediately. */
@media (prefers-reduced-motion: reduce) {
    .notify-success-ring {
        animation: none;
        stroke-dashoffset: 0;
    }

    .notify-success-check-group {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    .notify-success-check {
        animation: none;
        stroke-dashoffset: 0;
    }
}