/* =========================================================
   MYDLOWE CRAFT BAR
   Custom styles
========================================================= */


/* =========================================================
   BASE
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

::selection {
    background: #d7c6aa;
    color: #32271f;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-link {
    position: relative;

    color: #604c36;

    font-size: 0.875rem;
    font-weight: 500;

    transition:
        color 180ms ease,
        opacity 180ms ease;
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -7px;

    height: 1px;

    background: #604c36;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 180ms ease;
}

.nav-link:hover {
    color: #32271f;
}

.nav-link:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   HERO
========================================================= */

.hero-image-wrap {
    animation: heroFloat 8s ease-in-out infinite;
}

.hero-image {
    transition:
        transform 700ms cubic-bezier(.2, .8, .2, 1);
}

.hero-image-wrap:hover .hero-image {
    transform: scale(1.025);
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================================================
   SECTIONS
========================================================= */

.section-padding {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.section-kicker {
    margin-bottom: 1.25rem;

    color: #967b57;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}

.section-title {
    font-family:
        Georgia,
        Cambria,
        "Times New Roman",
        serif;

    font-size: clamp(2.4rem, 5vw, 4.2rem);

    line-height: 1.08;

    letter-spacing: -0.025em;

    color: #32271f;
}

.section-title span {
    display: block;

    color: #967b57;
}

.large-copy {
    max-width: 800px;

    font-size: clamp(1.15rem, 2vw, 1.4rem);

    line-height: 1.9;

    color: #604c36;
}

#o-marce {
  background-color: #eee9dc;
}
/* =========================================================
   KOLEKCJA — DELIKATNE TŁO
   ========================================================= */

.collection-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


/*
 * Zdjęcie zajmuje całą sekcję.
 */
.collection-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}


/*
 * Delikatne zdjęcie wanny / piany.
 */
.collection-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0.35;

    filter:
        grayscale(15%)
        sepia(8%)
        blur(2px);

    transform: scale(1.04);
}


/*
 * Jasna warstwa zabezpieczająca czytelność tekstu.
 */
.collection-background::after {
    content: "";

    position: absolute;
    inset: 0;

    /* background: */
        /* linear-gradient( */
            /* 180deg, */
            /* rgba(255, 255, 255, 0.96) 0%, */
            /* rgba(255, 255, 255, 0.82) 35%, */
            /* rgba(255, 255, 255, 0.88) 70%, */
            /* rgba(255, 255, 255, 0.97) 100% */
        /* ); */
}

/* =========================================================
   PROCESS CARDS
========================================================= */

.process-card {
    position: relative;

    min-height: 270px;

    overflow: hidden;

    padding: 2rem;

    border: 1px solid #e7dcc9;

    border-radius: 1.5rem;

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

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

.process-card:hover {
    transform: translateY(-5px);

    border-color: #d7c6aa;

    box-shadow:
        0 20px 50px rgba(73, 57, 43, 0.08);
}

.process-number {
    display: inline-flex;

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

    width: 42px;
    height: 42px;

    margin-bottom: 2rem;

    border-radius: 999px;

    background: #f3eee4;

    color: #796143;

    font-size: 0.75rem;
    font-weight: 700;
}

.process-card h3 {
    margin-bottom: 0.75rem;

    font-family:
        Georgia,
        Cambria,
        "Times New Roman",
        serif;

    font-size: 1.6rem;

    color: #49392b;
}

.process-card p {
    color: #796143;

    line-height: 1.75;
}


/* =========================================================
   INGREDIENTS
========================================================= */

.ingredient {
    padding: 0.7rem 1rem;

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

    border-radius: 999px;

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

    color: #e7dcc9;

    font-size: 0.85rem;

    text-align: center;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.ingredient:hover {
    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.2);

    transform: translateY(-2px);
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.product-card {
    overflow: hidden;

    border: 1px solid #e7dcc9;

    border-radius: 1.5rem;

    background: #faf8f3;

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

.product-card:hover {
    transform: translateY(-7px);

    border-color: #d7c6aa;

    box-shadow:
        0 25px 60px rgba(73, 57, 43, 0.11);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image-wrap {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f3eee4;
}

.product-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 500ms cubic-bezier(.2, .8, .2, 1);
}

.product-card:hover .product-image {
    transform: scale(1.06);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-content {
    padding: 1.5rem;
}

.product-number {
    margin-bottom: 0.5rem;

    color: #bca27d;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.15em;
}

.product-content h3 {
    margin-bottom: 1rem;

    font-family:
        Georgia,
        Cambria,
        "Times New Roman",
        serif;

    font-size: 1.45rem;

    color: #49392b;
}

.product-content p {
    margin-top: 0.85rem;

    color: #796143;

    font-size: 0.84rem;

    line-height: 1.7;
}

.product-content strong {
    color: #604c36;
}

.product-price {
    margin-top: 1.25rem;

    padding-top: 1rem;

    border-top: 1px solid #e7dcc9;

    color: #49392b;

    font-size: 1.15rem;
    font-weight: 700;
}


/* =========================================================
   FORM
========================================================= */

.form-label {
    display: block;

    margin-bottom: 0.55rem;

    color: #49392b;

    font-size: 0.875rem;
    font-weight: 600;
}

.form-input {
    width: 100%;

    border: 1px solid #e7dcc9;

    border-radius: 0.9rem;

    background: #faf8f3;

    padding: 0.85rem 1rem;

    color: #32271f;

    outline: none;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.form-input::placeholder {
    color: #bca27d;
}

.form-input:hover {
    border-color: #d7c6aa;
}

.form-input:focus {
    border-color: #967b57;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(150, 123, 87, 0.12);
}


/* =========================================================
   CHECKBOX
========================================================= */

input[type="checkbox"] {
    accent-color: #49392b;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.contact-card {
    display: flex;

    min-height: 145px;

    flex-direction: column;

    justify-content: center;

    padding: 1.5rem;

    border: 1px solid #e7dcc9;

    border-radius: 1.5rem;

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

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

.contact-card:hover {
    transform: translateY(-4px);

    background: #fff;

    box-shadow:
        0 15px 40px rgba(73, 57, 43, 0.08);
}

.contact-label {
    margin-bottom: 0.5rem;

    color: #967b57;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.contact-value {
    color: #49392b;

    font-family:
        Georgia,
        Cambria,
        "Times New Roman",
        serif;

    font-size: 1.15rem;
}


/* =========================================================
   FOOTER
========================================================= */

footer a {
    text-decoration: none;
}


/* =========================================================
   FOCUS / ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(150, 123, 87, 0.35);

    outline-offset: 3px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .section-padding {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }

    .hero-image-wrap {
        animation: none;
    }

    .hero-image-wrap:hover .hero-image {
        transform: none;
    }

    .product-card:hover {
        transform: none;
    }

    .product-card:hover .product-image {
        transform: none;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

}


/* =========================================================
   SCROLL REVEAL
   Fade + slide-up + stagger
========================================================= */

.reveal,
.reveal-stagger {
    opacity: 0;
    transform: translate3d(0, 28px, 0);

    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);

    will-change: opacity, transform;
}


/* Element pokazany */

.reveal.is-visible,
.reveal-stagger.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* =========================================================
   REVEAL DELAYS
========================================================= */

.reveal-delay-1 {
    --reveal-delay: 0.08s;
}

.reveal-delay-2 {
    --reveal-delay: 0.16s;
}

.reveal-delay-3 {
    --reveal-delay: 0.24s;
}

.reveal-delay-4 {
    --reveal-delay: 0.32s;
}

.reveal-delay-5 {
    --reveal-delay: 0.40s;
}

.reveal-delay-6 {
    --reveal-delay: 0.48s;
}

.reveal-delay-7 {
    --reveal-delay: 0.56s;
}

.reveal-delay-8 {
    --reveal-delay: 0.64s;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;

        transform: none;

        transition: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}