/* =========================================================
   NANCYS HOME VISUAL V1
   Reine Presentation Layer.
   ========================================================= */

.nancys-home-page {
    overflow-x: clip;
}


/* ---------------------------------------------------------
   Hero Food Slider
   --------------------------------------------------------- */

.nancys-home-food-slider {
    position: relative;
    min-width: 0;
    width: 100%;
}


.nancys-home-food-slider__viewport {
    position: relative;

    overflow: hidden;

    width: 100%;
    aspect-ratio: 1 / 1;

    border-radius:
        clamp(
            26px,
            4vw,
            40px
        );

    background: #eee5d8;

    box-shadow:
        0 30px 80px
        rgba(16, 59, 115, 0.16);

    isolation: isolate;

    touch-action:
        pan-y;
}


.nancys-home-food-slide {
    position: absolute;
    inset: 0;

    margin: 0;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 600ms ease;
}


.nancys-home-food-slide.is-active {
    z-index: 1;

    opacity: 1;

    pointer-events: auto;
}


.nancys-home-food-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);
}


.nancys-home-food-slide.is-active img {
    animation:
        nancys-home-food-zoom
        12s
        cubic-bezier(
            0.2,
            0.65,
            0.25,
            1
        )
        forwards;
}


@keyframes nancys-home-food-zoom {

    from {
        transform:
            scale(1.01);
    }

    to {
        transform:
            scale(1.06);
    }
}


/* ---------------------------------------------------------
   Badge
   --------------------------------------------------------- */

.nancys-home-food-slider__badge {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 4;

    padding:
        9px 14px;

    border-radius:
        999px;

    background:
        rgba(
            255,
            248,
            235,
            0.92
        );

    color:
        var(--blue);

    box-shadow:
        0 8px 30px
        rgba(16, 59, 115, 0.12);

    backdrop-filter:
        blur(12px);

    font-size:
        0.82rem;

    font-weight:
        900;
}


/* ---------------------------------------------------------
   Slider Controls
   --------------------------------------------------------- */

.nancys-home-food-slider__controls {
    position: absolute;

    right: 18px;
    bottom: 18px;
    left: 18px;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}


.nancys-home-food-slider__arrow {
    display: inline-flex;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.48
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            248,
            235,
            0.94
        );

    color:
        var(--blue);

    box-shadow:
        0 6px 22px
        rgba(16, 59, 115, 0.16);

    cursor: pointer;

    font: inherit;
    font-size: 1.25rem;
    font-weight: 900;

    transition:
        transform 180ms ease,
        background 180ms ease;
}


.nancys-home-food-slider__arrow:hover {
    transform:
        scale(1.06);

    background: #fff;
}


.nancys-home-food-slider__arrow:focus-visible {
    outline:
        4px solid
        var(--yellow);

    outline-offset: 3px;
}


.nancys-home-food-slider__dots {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-inline: auto;
}


.nancys-home-food-slider__dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.56
        );

    cursor: pointer;

    transition:
        width 220ms ease,
        background 220ms ease;
}


.nancys-home-food-slider__dot.is-active {
    width: 28px;

    background: #fff;
}


/* ---------------------------------------------------------
   Navigation Cards
   --------------------------------------------------------- */

.nancys-home-navigation
.nancys-link-card {

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


@media (hover: hover) {

    .nancys-home-navigation
    .nancys-link-card:hover {

        transform:
            translateY(-5px);

        box-shadow:
            0 22px 52px
            rgba(16, 59, 115, 0.11);
    }
}


/* ---------------------------------------------------------
   Scroll Reveal
   --------------------------------------------------------- */

.nancys-home-motion-ready
.nancys-home-reveal {

    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity 620ms ease,
        transform 620ms
        cubic-bezier(
            0.2,
            0.65,
            0.25,
            1
        );
}


.nancys-home-motion-ready
.nancys-home-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 759px) {

    .nancys-home-food-slider {
        margin-top: 8px;
    }


    .nancys-home-food-slider__viewport {
        border-radius: 28px;
    }


    .nancys-home-food-slider__badge {
        top: 14px;
        left: 14px;
    }

    .nancys-home-food-slider__controls {
        right: 14px;
        bottom: 14px;
        left: 14px;
    }


    .nancys-home-food-slider__arrow {
        width: 40px;
        height: 40px;
    }

}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .nancys-home-food-slide,
    .nancys-home-food-slide img,
    .nancys-home-food-slider__arrow,
    .nancys-home-food-slider__dot,
    .nancys-home-navigation .nancys-link-card,
    .nancys-home-reveal {

        animation: none !important;

        transition: none !important;

        transform: none !important;
    }

}


/* =========================================================
   NANCYS HOME VISUAL V1.2
   Slider control polish
   ========================================================= */

@media (min-width: 760px) {

    .nancys-home-food-slider__arrow {
        width: 36px;
        height: 36px;

        background:
            rgba(
                255,
                248,
                235,
                0.82
            );

        box-shadow:
            0 4px 16px
            rgba(16, 59, 115, 0.12);

        font-size: 1.05rem;

        opacity: 0.78;

        transition:
            opacity 180ms ease,
            transform 180ms ease,
            background 180ms ease;
    }


    .nancys-home-food-slider:hover
    .nancys-home-food-slider__arrow,

    .nancys-home-food-slider__arrow:focus-visible {
        opacity: 1;
    }


    .nancys-home-food-slider__arrow:hover {
        transform:
            scale(1.08);

        background:
            rgba(
                255,
                255,
                255,
                0.98
            );
    }

}


.nancys-home-food-slider__dot {
    width: 7px;
    height: 7px;

    background:
        rgba(
            255,
            255,
            255,
            0.48
        );
}


.nancys-home-food-slider__dot.is-active {
    width: 22px;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        );
}


@media (max-width: 759px) {

    .nancys-home-food-slider__arrow {
        width: 38px;
        height: 38px;

        font-size: 1.08rem;

        box-shadow:
            0 4px 16px
            rgba(16, 59, 115, 0.13);
    }


    .nancys-home-food-slider__controls {
        bottom: 13px;
    }

}