/* ─────────────────────────────────────────────────────────────────────────────
   assets/css/animations.css
   Page transitions, scroll-reveal, toast notifications, blur-up image loading.
   Uses existing CSS variable system (--ink, --maroon, --gold, --cream, --border).
───────────────────────────────────────────────────────────────────────────── */

/* ── Page transitions ──────────────────────────────────────────────────────── */
html.page-transition-in body {
    animation: pageFadeIn 0.28s ease forwards;
}

html.page-transition-out body {
    animation: pageFadeOut 0.22s ease forwards;
    pointer-events: none;
}

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

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

/* ── Scroll-reveal animations ──────────────────────────────────────────────── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger siblings for a cascade effect */
.reveal-on-scroll:nth-child(2) { transition-delay: 0.07s; }
.reveal-on-scroll:nth-child(3) { transition-delay: 0.14s; }
.reveal-on-scroll:nth-child(4) { transition-delay: 0.21s; }
.reveal-on-scroll:nth-child(5) { transition-delay: 0.28s; }
.reveal-on-scroll:nth-child(6) { transition-delay: 0.35s; }
.reveal-on-scroll:nth-child(7) { transition-delay: 0.42s; }
.reveal-on-scroll:nth-child(8) { transition-delay: 0.49s; }

/* ── Blur-up lazy image loading ────────────────────────────────────────────── */
.img-blur-up {
    filter: blur(8px);
    transition: filter 0.45s ease;
    will-change: filter;
}

.img-blur-up.img-loaded {
    filter: blur(0);
}

/* ── Toast notifications ───────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--ink, #1a1a1a);
    color: #fff;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
    user-select: none;
}

.toast.toast-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-success { background: #1c4a2a; }
.toast-error   { background: var(--maroon, #8b1a2e); }
.toast-info    { background: #1a3a5c; }

.toast-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.9;
}

.toast-msg { flex: 1; line-height: 1.4; }

@media (max-width: 480px) {
    .toast-container {
        bottom: 16px;
        right: 12px;
        left: 12px;
        max-width: unset;
    }
}