/*
 * CompuFixGuru Web F66 — homepage transitions and validation polish.
 * This layer only adjusts visual continuity on the homepage.
 */

.home main > section {
    position: relative;
}

.home .cfg-trust,
.home .cfg-section,
.home .cfg-brand-wall {
    scroll-margin-top: 108px;
}

/* Bridge hero into trust panel with a subtle light bloom. */
.home .cfg-hero::after {
    transition: opacity .35s ease, transform .35s ease;
}

.home .cfg-hero-grid::after {
    position: absolute;
    right: 2%;
    bottom: -92px;
    width: clamp(180px, 28vw, 360px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(98, 244, 207, .5), transparent);
    content: "";
    pointer-events: none;
}

/* Trust panel feels like a physical bridge between the hero and catalog. */
.home .cfg-trust {
    isolation: isolate;
}

.home .cfg-trust::before {
    position: absolute;
    z-index: -1;
    inset: 8px 10%;
    border-radius: 28px;
    background: rgba(200, 16, 46, .08);
    filter: blur(28px);
    content: "";
    pointer-events: none;
}

.home .cfg-trust-item {
    overflow: hidden;
}

.home .cfg-trust-item::after {
    position: absolute;
    right: -28px;
    bottom: -48px;
    width: 96px;
    height: 96px;
    border: 1px solid rgba(200, 16, 46, .12);
    border-radius: 50%;
    content: "";
    transition: transform .3s ease, border-color .3s ease;
}

.home .cfg-trust-item:hover::after,
.home .cfg-trust-item:focus-within::after {
    border-color: rgba(200, 16, 46, .28);
    transform: scale(1.18);
}

/* Catalog transition: dark field opens with a restrained top highlight. */
.home .cfg-section-muted:first-of-type::before {
    position: absolute;
    top: 0;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(98, 244, 207, .36), transparent);
    content: "";
}

.home .cfg-card-grid {
    perspective: 1200px;
}

.home .cfg-card-grid .cfg-card {
    transform-origin: 50% 70%;
}

.home .cfg-card-grid .cfg-card:focus-visible {
    outline: 2px solid var(--cfg-mint);
    outline-offset: 4px;
}

/* Brand wall gets a clearer editorial entrance and exit edge. */
.home .cfg-brand-wall::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 24px;
    background: linear-gradient(180deg, rgba(3, 8, 12, .08), transparent);
    content: "";
    pointer-events: none;
}

.home .cfg-brand-wall__head {
    position: relative;
}

.home .cfg-brand-wall__head::after {
    position: absolute;
    right: 0;
    bottom: -20px;
    width: min(34%, 300px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 16, 46, .3));
    content: "";
}

.home .cfg-brand-logo {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.home .cfg-brand-logo:focus-within {
    border-color: rgba(200, 16, 46, .34);
    box-shadow: 0 18px 40px rgba(6, 35, 45, .12);
    transform: translateY(-3px);
}

/* B2B section receives a clean transition stripe without changing content. */
.home .cfg-section-dark {
    overflow: hidden;
}

.home .cfg-section-dark::after {
    position: absolute;
    right: -11vw;
    bottom: -22vw;
    width: min(46vw, 560px);
    height: min(46vw, 560px);
    border: 1px solid rgba(200, 16, 46, .08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.home .cfg-b2b-panel {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.home .cfg-b2b-panel:hover,
.home .cfg-b2b-panel:focus-within {
    border-color: rgba(98, 244, 207, .3);
    box-shadow: 0 36px 92px rgba(4, 16, 22, .28);
    transform: translateY(-4px);
}

/* Featured products align visually with the rest of the homepage. */
.home .cfg-products {
    position: relative;
    overflow: hidden;
}

.home .cfg-products::before {
    position: absolute;
    top: -190px;
    left: -150px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(6, 35, 45, .055);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.home .woocommerce ul.products li.product,
.home .woocommerce-page ul.products li.product {
    border: 1px solid rgba(6, 35, 45, .06);
}

.home .woocommerce ul.products li.product:focus-within,
.home .woocommerce-page ul.products li.product:focus-within {
    outline: 2px solid var(--cfg-crimson);
    outline-offset: 4px;
}

/* Final CTA acts as the visual endpoint of the homepage narrative. */
.home .cfg-section-muted:last-of-type::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(98, 244, 207, .28), transparent);
    content: "";
}

.home .cfg-cta {
    transition: transform .3s ease, box-shadow .3s ease;
}

.home .cfg-cta:hover,
.home .cfg-cta:focus-within {
    box-shadow: 0 42px 96px rgba(0, 0, 0, .36);
    transform: translateY(-3px);
}

@media (max-width: 980px) {
    .home .cfg-hero-grid::after {
        right: 14%;
        bottom: -64px;
        left: 14%;
        width: auto;
    }

    .home .cfg-brand-wall__head::after {
        display: none;
    }

    .home .cfg-section-dark::after {
        right: -160px;
        bottom: -180px;
        width: 360px;
        height: 360px;
    }
}

@media (max-width: 640px) {
    .home .cfg-trust,
    .home .cfg-section,
    .home .cfg-brand-wall {
        scroll-margin-top: 84px;
    }

    .home .cfg-hero-grid::after,
    .home .cfg-trust::before,
    .home .cfg-section-dark::after,
    .home .cfg-products::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .cfg-card-grid .cfg-card,
    .home .cfg-b2b-panel,
    .home .cfg-cta,
    .home .cfg-brand-logo,
    .home .cfg-trust-item,
    .home .cfg-trust-item::after {
        transition: none !important;
        transform: none !important;
    }
}