/* Preview-only HyperFrames-inspired entrance motion layer. Not enqueued in WordPress until approved. */
:root {
    --hf-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hf-duration: 900ms;
    --hf-distance: 22px;
}

html,
body,
#page {
    overflow-x: clip;
}

.hf-enter {
    opacity: 0;
    transform: translate3d(0, var(--hf-distance), 0);
    transition:
        opacity var(--hf-duration) var(--hf-ease),
        transform var(--hf-duration) var(--hf-ease),
        border-color 300ms ease,
        box-shadow 300ms ease;
    transition-delay: var(--hf-delay, 0ms);
    will-change: opacity, transform;
}

.hf-enter.hf-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hf-enter[data-hf-motion="hero"] {
    transform: translate3d(0, 18px, 0) scale(0.985);
}

.hf-enter[data-hf-motion="hero"].hf-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

.hf-enter[data-hf-motion="image"] {
    transform: translate3d(0, 18px, 0) scale(1.025);
    transform-origin: center;
}

.hf-enter[data-hf-motion="image"].hf-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

.hf-stagger > .hf-enter,
.hf-stagger > a,
.hf-stagger > div,
.hf-stagger > li {
    transition-delay: var(--hf-delay, 0ms);
}

.category-card,
.product-card,
.scene-card,
.why-card,
.application-block,
.contact-form-wrap,
.contact-info-wrap,
.specs-table-wrap,
.highlights-list,
.stats-grid,
.footer-col {
    will-change: transform;
}

.hf-visible.category-card,
.hf-visible.product-card,
.hf-visible.scene-card,
.hf-visible.why-card,
.hf-visible.application-block,
.hf-visible.contact-form-wrap,
.hf-visible.contact-info-wrap,
.hf-visible.specs-table-wrap,
.hf-visible.highlights-list,
.hf-visible.stats-grid,
.hf-visible.footer-col {
    animation: hfPanelSettle 1400ms var(--hf-ease) both;
}

.hf-visible .category-card-img::after,
.hf-visible .product-card-img::after,
.hf-visible.scene-card::after,
.hf-visible.product-hero-image::after,
.hf-visible.app-img::after {
    animation: hfImageGlint 1600ms ease both;
}

.product-hero-image,
.app-img,
.category-card-img,
.product-card-img,
.scene-card {
    position: relative;
    overflow: hidden;
}

.product-hero-image::after,
.app-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 0 35%, rgba(205, 239, 255, 0.2), transparent 52% 100%);
    transform: translateX(-130%);
    pointer-events: none;
}

.page-hero::before,
.product-detail-hero::before,
.cta-section::before,
.cta-banner::before {
    animation: hfBlueprintPulse 9s ease-in-out infinite;
}

.hf-visible.section-title,
.hf-visible.hero-title,
.hf-visible.page-hero h1 {
    text-shadow: 0 0 30px rgba(120, 216, 255, 0.28), 0 0 70px rgba(66, 245, 215, 0.08);
}

@keyframes hfPanelSettle {
    0% {
        box-shadow: 0 0 0 rgba(120, 216, 255, 0);
    }

    42% {
        box-shadow: var(--shadow-panel), 0 0 30px rgba(120, 216, 255, 0.17);
    }

    100% {
        box-shadow: var(--shadow-panel);
    }
}

@keyframes hfImageGlint {
    from {
        transform: translateX(-130%);
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    to {
        transform: translateX(130%);
        opacity: 0;
    }
}

@keyframes hfBlueprintPulse {
    0%,
    100% {
        opacity: 0.72;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hf-enter,
    .hf-enter.hf-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .hf-visible.category-card,
    .hf-visible.product-card,
    .hf-visible.scene-card,
    .hf-visible.why-card,
    .hf-visible.application-block,
    .hf-visible.contact-form-wrap,
    .hf-visible.contact-info-wrap,
    .hf-visible.specs-table-wrap,
    .hf-visible.highlights-list,
    .hf-visible.stats-grid,
    .hf-visible.footer-col,
    .page-hero::before,
    .product-detail-hero::before,
    .cta-section::before,
    .cta-banner::before {
        animation: none !important;
    }
}
