/* =========================================================
   LUXORA — COMING SOON
========================================================= */


/* ---------------------------------------------------------
   1. FONTS
--------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Jost:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

/* ---------------------------------------------------------
   2. VARIABLES
--------------------------------------------------------- */

:root {
    --coming-veil: oklch(0.16 0.015 60);
    --coming-ink: oklch(0.97 0.012 80);
    --coming-sand: oklch(0.82 0.045 70);

    --coming-font-body: "Jost", Arial, sans-serif;
    --coming-font-title: "Fraunces", Georgia, serif;
}


/* ---------------------------------------------------------
   3. RESET — ONLY FOR THIS PAGE
--------------------------------------------------------- */

.coming-soon-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;

    background: var(--coming-veil);
    color: var(--coming-ink);

    font-family: var(--coming-font-body);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.coming-soon-page *,
.coming-soon-page *::before,
.coming-soon-page *::after {
    box-sizing: border-box;
}

.coming-soon-page main {
    margin: 0;
}

.coming-soon-page img {
    display: block;
    max-width: none;
}

.coming-soon-page header,
.coming-soon-page section,
.coming-soon-page footer,
.coming-soon-page h1,
.coming-soon-page p {
    margin: 0;
}


/* ---------------------------------------------------------
   4. PAGE
--------------------------------------------------------- */

.coming-soon {
    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--coming-veil);
    color: var(--coming-ink);
}

/* ---------------------------------------------------------
   5. BACKGROUND IMAGE
--------------------------------------------------------- */

.coming-soon__background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .70;

    z-index: 0;

    transform-origin: center center;

    /*
     * Jedna ciągła animacja.
     *
     * 0s      -> zdjęcie startuje mocniej przybliżone
     * 2.6s    -> szybko oddala się do skali 1
     * 12.6s   -> następnie bardzo powoli przybliża się
     *             do skali 1.025
     *
     * Po zakończeniu pozostaje w ostatniej pozycji.
     */
    animation:
        coming-background-zoom
        12.6s
        cubic-bezier(.16, 1, .3, 1)
        0s
        1
        both;
}


/* ---------------------------------------------------------
   6. CINEMATIC VEIL
--------------------------------------------------------- */

.coming-soon__veil {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            120% 90% at 50% 10%,
            transparent 10%,
            color-mix(
                in oklab,
                var(--coming-veil) 88%,
                transparent
            ) 100%
        );
}


/* ---------------------------------------------------------
   7. CONTENT
--------------------------------------------------------- */

.coming-soon__content {
    position: relative;

    z-index: 10;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    padding:
        40px
        24px;
}


/* ---------------------------------------------------------
   8. HEADER
--------------------------------------------------------- */

.coming-soon__header {


    font-size: 1.08rem;
    line-height: 1;

    font-weight: 400;



    color: var(--coming-sand);
    font-family: "EB Garamond", serif;
    letter-spacing:.1em;
}


/* ---------------------------------------------------------
   9. HERO
--------------------------------------------------------- */

.coming-soon__hero {
    width: 100%;
    max-width: 1024px;
}


/* ---------------------------------------------------------
   10. EYEBROW
--------------------------------------------------------- */

.coming-soon__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    font-family: var(--coming-font-body);

    font-size: .68rem;

    line-height: 1;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: .40em;

    color: var(--coming-sand);

    animation-delay: var(--animation-delay, 0s);
}


/* ---------------------------------------------------------
   11. PULSE DOT
--------------------------------------------------------- */

.coming-soon__pulse-dot {
    display: inline-block;

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: var(--coming-sand);

    animation:
        coming-pulse-dot
        2.6s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   12. TITLE
--------------------------------------------------------- */

.coming-soon__title {
    margin-top: 24px !important;

    font-family: var(--coming-font-title);

    font-size: clamp(
        3.4rem,
        13vw,
        11rem
    );

    line-height: .86;

    font-weight: 300;

    letter-spacing: -.03em;

    color: var(--coming-ink);
}


/* ---------------------------------------------------------
   13. TITLE LINE MASK
--------------------------------------------------------- */

.coming-soon__line-mask {
    display: block;

    overflow: hidden;

    padding-bottom: .08em;
}


/* ---------------------------------------------------------
   14. TITLE LINE
--------------------------------------------------------- */

.coming-soon__line-rise {
    display: block;

    animation:
        coming-mask-rise
        1.35s
        cubic-bezier(.16, 1, .3, 1)
        both;

    animation-delay: var(--animation-delay, 0s);
}


/* ---------------------------------------------------------
   15. ACCENT TITLE
--------------------------------------------------------- */

.coming-soon__line-rise--accent {
    color: var(--coming-sand);

    font-style: italic;
}


/* ---------------------------------------------------------
   16. HAIRLINE
--------------------------------------------------------- */

.coming-soon__hairline {
    width: 100%;
    max-width: 448px;

    height: 1px;

    margin-top: 40px;

    background: color-mix(
        in oklab,
        var(--coming-sand) 40%,
        transparent
    );

    transform-origin: left center;

    animation:
        coming-hairline
        1.6s
        cubic-bezier(.16, 1, .3, 1)
        both;

    animation-delay: var(--animation-delay, 0s);
}


/* ---------------------------------------------------------
   17. DESCRIPTION
--------------------------------------------------------- */

.coming-soon__description {
    max-width: 380px;

    margin-top: 32px !important;

    font-family: var(--coming-font-body);

    font-size: .875rem;

    line-height: 1.7;

    font-weight: 300;

    color: color-mix(
        in oklab,
        var(--coming-ink) 70%,
        transparent
    );

    animation-delay: var(--animation-delay, 0s);
}


/* ---------------------------------------------------------
   18. FOOTER
--------------------------------------------------------- */

.coming-soon__footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

    font-family: var(--coming-font-body);

    font-size: .62rem;

    line-height: 1;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: .35em;

    color: color-mix(
        in oklab,
        var(--coming-ink) 50%,
        transparent
    );

    animation-delay: var(--animation-delay, 0s);
}


/* ---------------------------------------------------------
   19. GENERAL FADE / BLUR ANIMATION
--------------------------------------------------------- */

.animate-veil-in {
    animation:
        coming-veil-in
        1.6s
        cubic-bezier(.16, 1, .3, 1)
        both;

    animation-delay: var(--animation-delay, 0s);
}


/* ---------------------------------------------------------
   20. ANIMATIONS
--------------------------------------------------------- */

@keyframes coming-veil-in {

    from {
        opacity: 0;

        transform:
            translateY(1.4rem);

        filter: blur(14px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);

        filter: blur(0);
    }

}


@keyframes coming-mask-rise {

    from {
        transform:
            translateY(110%)
            rotate(4deg);
    }

    to {
        transform:
            translateY(0)
            rotate(0);
    }

}


@keyframes coming-background-zoom {

    /*
     * START
     *
     * Zdjęcie jest lekko powiększone.
     * Dzięki temu nie widać krawędzi podczas animacji.
     */
    0% {
        transform:
            scale(1.14)
            translate3d(0, 1.5%, 0);
    }

    /*
     * Pierwsze 2.6 sekundy:
     * szybkie, eleganckie oddalenie.
     */
    20.6% {
        transform:
            scale(1)
            translate3d(0, 0, 0);
    }

    /*
     * Kolejne 10 sekund:
     * bardzo delikatne, prawie niezauważalne
     * przybliżenie.
     */
    100% {
        transform:
            scale(1.025)
            translate3d(0, 0, 0);
    }
}


@keyframes coming-drift {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1.06);
    }

    50% {
        transform:
            translate3d(-1.5%, -1.2%, 0)
            scale(1.10);
    }

}


@keyframes coming-hairline {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


@keyframes coming-pulse-dot {

    0%,
    100% {
        opacity: .35;

        transform:
            scale(.85);
    }

    50% {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* ---------------------------------------------------------
   21. TABLET
--------------------------------------------------------- */

@media (min-width: 640px) {

    .coming-soon__content {
        padding:
            48px
            48px;
    }

}


/* ---------------------------------------------------------
   22. DESKTOP
--------------------------------------------------------- */

@media (min-width: 1024px) {

    .coming-soon__content {
        padding:
            56px
            80px;
    }

}


/* ---------------------------------------------------------
   23. LARGE DESKTOP
--------------------------------------------------------- */

@media (min-width: 1440px) {

    .coming-soon__content {
        padding:
            56px
            80px;
    }

}


/* ---------------------------------------------------------
   24. MOBILE
--------------------------------------------------------- */

@media (max-width: 639px) {

    .coming-soon__content {
        padding:
            32px
            24px;
    }

    .coming-soon__header {
        font-size: .99rem;

        letter-spacing: .32em;
    }

    .coming-soon__eyebrow {
        font-size: .60rem;

        letter-spacing: .30em;
    }

    .coming-soon__title {
        margin-top: 20px !important;

        font-size:
            clamp(
                3.5rem,
                16vw,
                6rem
            );
    }

    .coming-soon__hairline {
        margin-top: 30px;

        max-width: 280px;
    }

    .coming-soon__description {
        max-width: 300px;

        margin-top: 24px !important;

        font-size: .82rem;
    }

    .coming-soon__footer {
        font-size: .55rem;

        letter-spacing: .25em;
    }

}


/* ---------------------------------------------------------
   25. SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 380px) {

    .coming-soon__content {
        padding:
            28px
            20px;
    }

    .coming-soon__title {
        font-size: 3.25rem;
    }

    .coming-soon__footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }

}


/* ---------------------------------------------------------
   26. REDUCED MOTION
--------------------------------------------------------- */

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

    .coming-soon *,
    .coming-soon *::before,
    .coming-soon *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}