/* ============================================================
   SKIN — Hover micro-interactions
   ============================================================
   Subtle, instant-feedback hover states for cards and links.
   All transforms are gated behind prefers-reduced-motion so they
   vanish for users who ask for less motion. Loaded after
   components.css (see default.hbs).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

    /* Cards lift gently and gain a soft shadow on hover */
    .card {
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-soft);
        border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    }

    /* Feature image / duotone photo eases in on card hover */
    .card-image {
        transition: transform 0.45s ease;
    }
    .card:hover .card-image {
        transform: scale(1.04);
    }

    /* Feature-hero aside (linked post) lifts + zooms like a card */
    .hero-aside:has(.hero-aside-link) {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .hero-aside:has(.hero-aside-link:hover) {
        transform: translateY(-4px);
        box-shadow: var(--shadow-soft);
    }
    .hero-aside-media {
        transition: transform 0.45s ease;
    }
    .hero-aside-link:hover .hero-aside-media {
        transform: scale(1.04);
    }

    /* Corner arrow nudges outward */
    .mini-arrow,
    .post-card-arrow {
        transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    .card:hover .mini-arrow,
    .card:hover .post-card-arrow {
        transform: translate(3px, -3px);
    }

    /* Text links shift their arrow / underline affordance */
    .text-link {
        transition: color 0.2s ease, gap 0.2s ease;
    }

    /* Header eases in on first load (opacity only — keeps the sticky
       header from fighting a transform). */
    .site-header {
        animation: cc-header-in 0.6s ease both;
    }
    @keyframes cc-header-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}