/* ── Hero image position — desktop only ── */
.hero-img {
    object-position: 65% center;
}

/* ── Animations ── */
@keyframes heroScale {
    from { transform: scale(1.06); }
    to   { transform: scale(1.02); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-tag   { animation: fadeUp .7s ease both; animation-delay: .10s; }
.hero-h1    { animation: fadeUp .8s ease both; animation-delay: .25s; }
.hero-sub   { animation: fadeUp .8s ease both; animation-delay: .42s; }
.hero-ctas  { animation: fadeUp .8s ease both; animation-delay: .58s; }

/* ── Header ── */
#site-header {
    background: transparent;
}
#site-header.scrolled {
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
/* ── About section scroll animations ── */
.about-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.about-fade.visible {
    opacity: 1;
    transform: translateY(0);
}
/* ── Products scroll animations ── */
.prod-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod-fade.visible {
    opacity: 1;
    transform: translateY(0);
}
/* ── Contact animations ── */
.contact-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-fade.visible {
    opacity: 1;
    transform: translateY(0);
}