/* ─── PAGE TRANSITIONS ──────────────────────────────────────────────────────
   body starts invisible (js-ready), fades in (page-in), fades out (page-out).
   Without JS: body is fully visible — safe fallback.
──────────────────────────────────────────────────────────────────────────── */

body.js-ready {
    opacity: 0;
}

body.js-ready.page-in {
    opacity: 1;
    transition: opacity 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}

body.js-ready.page-out {
    opacity: 0;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── SCROLL REVEAL ─────────────────────────────────────────────────────────
   .anim       — elements hidden until they enter the viewport
   .in-view    — added by JS via IntersectionObserver → visible
   .anim-d1/2/3 — stagger delays for grouped elements
──────────────────────────────────────────────────────────────────────────── */

.anim {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.72s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}

.anim.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.anim-d1 { transition-delay: 0.12s; }
.anim-d2 { transition-delay: 0.26s; }
.anim-d3 { transition-delay: 0.40s; }

/* Large image areas — fade only, no translate (avoids jumpy large blocks) */
.anim-img {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.anim-img.in-view {
    opacity: 1;
}


/* ─── FOOTER SOCIAL ICONS ───────────────────────────────────────────────────
   Shared by all pages. White icons, hover brightens.
──────────────────────────────────────────────────────────────────────────── */

.footer-social {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    margin-top: 0.6rem;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.32);
    transition: color 0.2s;
    line-height: 0;
}

.footer-social-link:hover { color: rgba(255,255,255,0.85); }

.footer-social-link svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}