/* ============================================================
   Site-wide entrance & hover animations
   Content is ALWAYS fully opaque and readable — opacity is never
   animated. Entrance animation is a small positional shift only
   (translate/scale), so there is no way for text to appear
   invisible, washed-out, or "broken" at any point, on any
   connection speed or scroll speed. Without JS, or with
   prefers-reduced-motion, elements sit in their final position
   with no transform at all.
   ============================================================ */

html.js [data-reveal] {
    transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.44, 1);
    transition-delay: calc(var(--tw-delay, 0) * 1ms);
}

html.js [data-reveal="up"]    { transform: translateY(20px); }
html.js [data-reveal="fade"]  { transform: translateY(10px); }
html.js [data-reveal="left"]  { transform: translateX(-20px); }
html.js [data-reveal="right"] { transform: translateX(20px); }
html.js [data-reveal="scale"] { transform: scale(0.96); }

html.js [data-reveal].in-view { transform: none; }

/* Numeric counters (trust-strip stats etc.) */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- Hover / interaction polish (additive, non-breaking) ---- */
.product-card, .value-card, .tech-card, .stat-card, .download-card,
.benefit-card, .info-card, .guideline-card, .guide-card, .variant-card, .cert-card {
    transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.35s ease;
}
.product-card:hover, .value-card:hover, .tech-card:hover, .stat-card:hover,
.download-card:hover, .benefit-card:hover, .guide-card:hover, .variant-card:hover,
.cert-card:hover {
    transform: translateY(-6px);
}

/* Button hover motion handled in style.css (circle-fill) */

.faq-question { transition: color 0.25s ease; }

.tag { transition: transform 0.25s ease; }
.tag:hover { transform: translateY(-2px); }

/* Respect explicit user preference no matter what */
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    .product-card, .value-card, .tech-card, .stat-card, .download-card,
    .benefit-card, .info-card, .guideline-card, .guide-card, .variant-card,
    .btn, .tag {
        transition: none !important;
    }
}