/* ============================================
   Alive Behaviors — Animations & Interactions
   ============================================ */

/* ------------------------------------------
   1. Staggered Breadcrumb Arrival
   ------------------------------------------ */

@keyframes breadcrumb-arrive {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Each segment gets progressively delayed via JS nth-child */
.breadcrumb-segment:nth-child(1) { animation-delay: 100ms; }
.breadcrumb-segment:nth-child(2) { animation-delay: 200ms; }
.breadcrumb-segment:nth-child(3) { animation-delay: 300ms; }
.breadcrumb-segment:nth-child(4) { animation-delay: 400ms; }
.breadcrumb-segment:nth-child(5) { animation-delay: 500ms; }
.breadcrumb-segment:nth-child(6) { animation-delay: 600ms; }

/* Separators also stagger */
.breadcrumb-separator:nth-of-type(1) { animation-delay: 150ms; }
.breadcrumb-separator:nth-of-type(2) { animation-delay: 250ms; }
.breadcrumb-separator:nth-of-type(3) { animation-delay: 350ms; }
.breadcrumb-separator:nth-of-type(4) { animation-delay: 450ms; }
.breadcrumb-separator:nth-of-type(5) { animation-delay: 550ms; }

/* ------------------------------------------
   2. Scroll-Aware Link Warmth
   ------------------------------------------ */

.post-content a {
    --warmth: 0;
    text-shadow: 0 0 calc(var(--warmth) * 10px) rgba(184, 74, 40, calc(var(--warmth) * 0.2));
    transition: text-shadow 300ms ease, color var(--transition-base), border-color var(--transition-base);
}

/* ------------------------------------------
   3. Connection Map Arrival Pulse
   (tier-arrive keyframes are in connection-map.css)
   ------------------------------------------ */

/* Connection links within tiers also stagger slightly */
.connection-map.is-visible .connection-link {
    opacity: 0;
    animation: link-appear 400ms var(--ease-out) forwards;
}

.connection-map.is-visible .connection-tier:nth-child(1) .connection-link {
    animation-delay: calc(100ms + var(--link-index, 0) * 30ms);
}

.connection-map.is-visible .connection-tier:nth-child(2) .connection-link {
    animation-delay: calc(250ms + var(--link-index, 0) * 30ms);
}

.connection-map.is-visible .connection-tier:nth-child(3) .connection-link {
    animation-delay: calc(400ms + var(--link-index, 0) * 30ms);
}

@keyframes link-appear {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }
    to {
        opacity: var(--target-opacity, 1);
        transform: translateX(0);
    }
}

/* Set target opacities per tier so the animation lands correctly */
.connection-link--direct { --target-opacity: 1; }
.connection-link--near { --target-opacity: 0.6; }
.connection-link--distant { --target-opacity: 0.3; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb-segment,
    .connection-map.is-visible .connection-tier,
    .connection-map.is-visible .connection-link,
    .floating-link {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .post-content a {
        text-shadow: none !important;
    }
}