@font-face {
    font-family: 'Swiss';
    src: url('assets/Swiss 911 Compressed Regular.otf');
}

:root{
    --rowenta: #00A6CA;
    --moulinex: #E00613;
    --light: rgba(255, 255, 255, .1);

    --col: 800px
}

* { box-sizing: border-box; z-index: 10; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; padding: 0; margin: 0; font-family: "Inter Tight", sans-serif; }
body { background-color: #111;}

main{ overflow: hidden; position: fixed; inset: 0; width: 100%; height: 100dvh; isolation: isolate; }

main > section { background-color: #111;  overflow: hidden; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100dvh; opacity: 0; visibility: hidden; transform: translate3d(0, 5%, 0) scale(.985); pointer-events: none; z-index: 0; will-change: opacity, transform;
    transition:
        opacity 650ms ease,
        transform 850ms cubic-bezier(.22, 1, .36, 1),
        visibility 850ms;
}

@media (prefers-reduced-motion: reduce) {
    main > section,
    main > section .content > .image,
    main > section .content > .text > *,
    .navigation-link {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

main > section.is-active { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; z-index: 2; transition-delay: 0ms; }

main > section.is-before { transform: translate3d(0, -5%, 0) scale(.985); }

main > section .content > .image,
main > section .content > .text > * { opacity: 0; transform: translate3d(0, 22px, 0);
    transition:
        opacity 500ms ease,
        transform 700ms cubic-bezier(.22, 1, .36, 1);
}

main > section.is-active .content > .image,
main > section.is-active .content > .text > * { opacity: 1; transform: translate3d(0, 0, 0); }

main > section.is-active .content > .image { transition-delay: 180ms; }
main > section.is-active .content > .text > *:nth-child(1) { transition-delay: 220ms; }
main > section.is-active .content > .text > *:nth-child(2) { transition-delay: 300ms; }
main > section.is-active .content > .text > *:nth-child(3) { transition-delay: 380ms; }
main > section.is-active .content > .text > *:nth-child(4) { transition-delay: 440ms; }
main > section.is-active .content > .text > *:nth-child(5) { transition-delay: 500ms; }
main > section.is-active .content > .text > *:nth-child(6) { transition-delay: 560ms; }


/* NAVBAR LOGHI */
.navbar { position: fixed; top: 50px; left: 100px; width: calc(100% - 200px); z-index: 99; }
    .navbar ul { display: flex; list-style: none; padding: 0; margin: 0; gap: 10px; justify-content: end; }
        .navbar ul li { display: flex; justify-content: center; align-items: center; width: fit-content; height: 58px; padding: 0 20px; background-color: var(--light); border-radius: 12px; backdrop-filter: blur(10px); position: relative; }
            .navbar ul li span { display: block; font-size: 16px; font-weight: 400; color: #ffffff; white-space: nowrap;  }
            .navbar ul li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
            .navbar ul li svg { width: 24px; height: 24px; color: #fff; margin: 0 0 0 10px }
            .navbar ul li img { width: 40px; height: 40px;}

        .navbar ul li.hwu { margin-right: auto; padding: 0; width: 58px;}
            .navbar ul li.hwu svg { margin: 0; }


/* NAVBAR VERTICALE */
.navigation { top: 50px; left: 45px; position: fixed; width: 40px; height: calc(100dvh - 100px); min-height: 0; z-index: 999; }
    .navigation-ruler { position: absolute; top: 0; bottom: 0; left: 0; width: 40px; pointer-events: none;}
        .navigation-ruler::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px;
            background: repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent 10px,
                #fff 10px,
                #fff 11px,
                transparent 11px,
                transparent 12px
            );
        }

.navigation-links { position: absolute; inset: 0; width: 0; left: 55px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 50px }
    .navigation-link { display: flex; align-items: center; justify-content: center; height: 58px;  width: 58px; padding: 0; border: none; border-radius: 12px; background: var(--light); backdrop-filter: blur(10px); text-align: center; text-decoration: none; }
        .navigation-link.is-current{ padding: 0 20px; width: fit-content; }
            .navigation-link.is-current span { display: block; font-size: 16px; font-weight: 400; color: #ffffff; white-space: nowrap; }
            .navigation-link.is-current img, .navigation-link.is-current svg { margin: 0 10px 0 0}

        .navigation-link span { display: none; }
        .navigation-link img { display: block; width: 40px; height: 40px;}
        .navigation-link svg { color: #fff; width: 24px ; height: 24px;}

    .navigation-link {
        transition:
            width 350ms ease,
            padding 350ms ease,
            background-color 250ms ease,
            transform 350ms ease;
    }


/* GENERAL CONTENT */
#homepage .content { grid-template-columns: 1fr; }

.content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; width: 100%; height: 100%; padding: 50px 100px; }
    .content .image { display: flex; width: 100%; height: 100%; padding: 100px; justify-content: center; }
        .content .image img { height: 100%; object-fit: cover;}

    .content .main { width: var(--col); height: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; margin: 0 auto }

    .content .text { width: 100%; height: 100%; text-align: right; display: flex; flex-direction: column; justify-content: center; align-items: end; gap: 20px }
        .content .pill { height: 30px; border: 1px solid white; border-radius: 999px; padding: 0 20px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px; font-weight: 400; text-transform: uppercase; }
        .content h1, .content h2 { font-family: "Swiss"; color: #fff; font-size: 100px; font-weight: 400; line-height: 1; margin: 0 0 30px 0; }
        .content h1 { font-size: 120px; }

        .content .parag { max-width: var(--col); color: #bbb; font-size: 22px; font-weight: 400; margin: 0; }
            .content .parag b { font-weight: 600; color: #fff;}

        .content .cta { display: flex; justify-content: center; align-items: center; width: fit-content; height: 58px; background-color: var(--light); backdrop-filter: blur(10px); border-radius: 12px; color: #fff; font-size: 18px; font-weight: 400; padding: 0 20px; margin: 30px 0 0 0; white-space: nowrap; text-decoration: none; }


/* LUCI DI SFONDO */
.bg-light { display: block; position: absolute; width: 600px; aspect-ratio: 1; border-radius: 999px; filter: blur(600px); z-index: 1; }
    .bg-light.rowenta { background-color: var(--rowenta)}
    .bg-light.moulinex { background-color: var(--moulinex)}

    .bg-light.lb { bottom: -100px; left: -100px; }
    .bg-light.lt { top: -100px; left: -100px; }
    .bg-light.rb { bottom: -100px; right: -100px; }
    .bg-light.rt { top: -100px; right: -100px; }
    .bg-light.rm { top: 50%; right: -300px; transform: translateY(-50%); }

/* LINK ANTEPRIME */
.links-preview { display: flex; flex-direction: column; gap: 20px; margin: 80px 0 0 0; max-width: var(--col); }

.link-preview { display: flex; width: 100%; min-width: 0; min-height: 110px; overflow: hidden; border-radius: 12px; background: #fff; text-decoration: none; margin: 0; }
    .link-preview__content { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 10px; padding: 10px 20px; text-align: left; }
        .link-preview__title { overflow: hidden; color: #000; font-size: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; margin: 0; }
        .link-preview__description { overflow: hidden; color: #7f7f7f; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; margin: 0; }

        .link-preview__source { display: flex; align-items: center; gap: 7px; color: #7f7f7f; font-size: 14px; }
        .link-preview__favicon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 999px; object-fit: contain; }

        .link-preview__price { color: #000; font-size: 22px; font-weight: 600; white-space: nowrap; margin: 20px 0 0 0; }

        .link-preview__image-wrapper { display: flex; flex: 0 0 150px; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; padding: 4px; }
            .link-preview__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #e8e8e8 }