/**
 * Scroll reveal: section enters once; items use --shufra-sr-delay (index × 55ms), same idea as biodent --bd-sr-delay.
 */

/* Pre-JS / first paint: hero matches wired targets so content is not visible then hidden (flash). Removed in main.js after wireSection. */
@media (prefers-reduced-motion: no-preference) {
    html.shufra-sr-boot .shufra-section-hero .shufra-hero-col--copy > *,
    html.shufra-sr-boot .shufra-section-hero .shufra-hero-col--media:has(.hero-image-frame img) {
        opacity: 0 !important;
        transform: translate3d(0, 1rem, 0) !important;
    }
}

/*
 * Tailwind Play CDN injects styles after theme CSS — without !important, utilities
 * like `transition` on hero/about typography and CTAs override these rules.
 */
.shufra-reveal .shufra-reveal-item {
    transition-property: opacity, transform !important;
    transition-duration: 0.75s, 0.75s !important;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transition-delay: var(--shufra-sr-delay, 0ms) !important;
    will-change: opacity, transform;
}

/*
 * Tailwind "transition" shorthand on cards / links wins over our rule — force opacity + transform for reveal.
 */
.shufra-reveal .shufra-reveal-item.about-box,
.shufra-reveal .shufra-reveal-item.packages-card,
.shufra-reveal .shufra-reveal-item.review-card,
.shufra-reveal details.shufra-reveal-item,
.shufra-reveal a.shufra-reveal-item {
    transition-property: opacity, transform !important;
    transition-duration: 0.75s, 0.3s !important;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transition-delay: var(--shufra-sr-delay, 0ms) !important;
}

.shufra-reveal:not(.shufra-reveal-visible) .shufra-reveal-item {
    opacity: 0 !important;
    transform: translate3d(0, 1rem, 0) !important;
}

.shufra-reveal.shufra-reveal-visible .shufra-reveal-item {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .shufra-reveal .shufra-reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}