/* ========================================
   COMING SOON PAGE
======================================== */
/* FONT */
@font-face {
    font-family: "Forum";
    src:
        url("../fonts/Forum/Forum.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Forum/Forum.woff") format("woff"),
        url("../fonts/Forum/Forum.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
/* BASE */
:root {
    --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
	    /* Colors */
    --color-ink: #222;
    --color-black: #000;
    --color-white: #fff;
    --color-peach: #ffe6d7;

    /* Shared backgrounds */
    --bg-concrete: url("../img/bg-concrete-wall-gray.jpg");

    /* Repeated effects */
    --shadow-card: 0 0 2px rgba(0,0,0,.2);
    --shadow-diagonal: drop-shadow(0 0 2px rgba(0,0,0,.2));
    --overlay-white: rgba(255,255,255,.97);
    --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Shared diagonal system */
    --diagonal-angle: 110deg;
    --diagonal-color: var(--color-peach);
}
* {box-sizing: border-box;}
html, body {width: 100%; height: 100%; margin: 0; overflow: hidden;}
/* PAGE */
.page-coming-soon {position: relative; width: 100%; height: 100vh; background: url("../img/bg-concrete-wall-gray.jpg") center center / cover no-repeat; min-height: 100vh; display: flex; align-items: center; justify-content: center;}
.page-coming-soon__content {width: 35%; z-index: 2;}
.page-coming-soon__intro {opacity: 0; transform: translate3d(0, 24px, 0); animation: page-coming-soon-intro .8s var(--ease-smooth) .15s forwards; will-change: opacity, transform;}
.page-coming-soon__logo img {width: 100%; height: auto;}
.page-coming-soon__title {margin: 0 32px 0 0; font-family: "Forum", serif; font-size: 22px; font-weight: 400; line-height: 1.1; color: #222; text-align: right;}

/* white diagonal */
.hero-white-shadow {position: absolute; inset: 0; z-index: 1; filter: var(--shadow-diagonal); pointer-events: none;}
.hero-white {width: 100%; height: 100%; background: var(--color-white);
    clip-path:
        polygon(
            0 0,
            13% 0,
            86% 100%,
            0 100%
        );
}
/* persik (peach) diagonal */
.hero-persik-shadow {position: absolute; inset: 0; z-index: 1; filter: var(--shadow-diagonal); pointer-events: none;}
.hero-persik {width: 100%; height: 100%; position: absolute; background: var(--diagonal-color);
 	clip-path: polygon(
        86% 0,
        100% 0,
        100% 100%,
        28% 100%
    );
    pointer-events: none;
}

/* ========================================
   EFFECT
======================================== */
@keyframes page-coming-soon-intro {
    to {opacity: 1; transform: translate3d(0, 0, 0);}
}

/* ========================================
   ADAPTIVE
======================================== */
@media (min-width: 240px) and (max-width: 319px) {
	.page-coming-soon__content {width: 80%;}
	.page-coming-soon__title {font-size: 14px;}
	.page-coming-soon__title {margin: 0 18px 0 0;}
	.hero-white {
    clip-path:
        polygon(
            0 0,
            20% 0,
            100% 70%,
			100% 100%,
            0 100%
        );
}
	.hero-persik {
 	clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        13% 100%
    );
}	
}

@media (min-width: 320px) and (max-width: 359px) {
	.page-coming-soon__content {width: 80%;}
	.page-coming-soon__title {font-size: 14px;}
	.page-coming-soon__title {margin: 0 18px 0 0;}
	.hero-white {
    clip-path:
        polygon(
            0 0,
            20% 0,
            100% 70%,
			100% 100%,
            0 100%
        );
}
	.hero-persik {
 	clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        13% 100%
    );
}	
}

@media (min-width: 360px) and (max-width: 479px) {
	.page-coming-soon__content {width: 70%;}
	.page-coming-soon__title {font-size: 14px;}
	.page-coming-soon__title {margin: 0 18px 0 0;}
	.hero-white {
    clip-path:
        polygon(
            0 0,
            20% 0,
            100% 70%,
			100% 100%,
            0 100%
        );
}
	.hero-persik {
 	clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        13% 100%
    );
}	
}

@media (min-width: 480px) and (max-width: 539px) {
	.page-coming-soon__content {width: 70%;}
	.page-coming-soon__title {font-size: 17px;}
	.page-coming-soon__title {margin: 0 22px 0 0;}
	.hero-white {
    clip-path:
        polygon(
            0 0,
            18% 0,
            100% 80%,
			100% 100%,
            0 100%
        );
}
	.hero-persik {
 	clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        13% 100%
    );
}	
}

@media (min-width: 540px) and (max-width: 599px) {
	.page-coming-soon__content {width: 70%;}
	.page-coming-soon__title {font-size: 19px;}
	.page-coming-soon__title {margin: 0 24px 0 0;}
	.hero-white {
    clip-path:
        polygon(
            0 0,
            18% 0,
            100% 100%,
            0 100%
        );
}
	.hero-persik {
 	clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        18% 100%
    );
}	
}

@media (min-width: 600px) and (max-width: 719px) {
	.page-coming-soon__content {width: 60%;}
	.page-coming-soon__title {font-size: 19px;}
	.page-coming-soon__title {margin: 0 24px 0 0;}
	.hero-white {
    clip-path:
        polygon(
            0 0,
            18% 0,
            100% 100%,
            0 100%
        );
}
	.hero-persik {
 	clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        18% 100%
    );
}	
}

@media (min-width: 720px) and (max-width: 767px) {
	.page-coming-soon__content {width: 60%;}
	.page-coming-soon__title {font-size: 19px;}
	.hero-white {
    clip-path:
        polygon(
            0 0,
            18% 0,
            100% 100%,
            0 100%
        );
}
	.hero-persik {
 	clip-path: polygon(
        82% 0,
        100% 0,
        100% 100%,
        18% 100%
    );
}
}

@media (min-width: 768px) and (max-width: 799px) {
	.page-coming-soon__content {width: 55%;}
	.page-coming-soon__title {font-size: 20px;}	
}

@media (min-width: 800px) and (max-width: 853px) {
	.page-coming-soon__content {width: 55%;}
	.page-coming-soon__title {font-size: 20px;}	
}

@media (min-width: 854px) and (max-width: 959px) {
	.page-coming-soon__content {width: 55%;}
	.page-coming-soon__title {font-size: 20px;}
}

@media (min-width: 960px) and (max-width: 1023px) {
	.page-coming-soon__content {width: 45%;}
	.page-coming-soon__title {font-size: 21px;}
}

@media (min-width: 1024px) and (max-width: 1151px) {
	.page-coming-soon__content {width: 45%;}
	.page-coming-soon__title {font-size: 21px;}
}

@media (min-width: 1152px) and (max-width: 1199px) {
	.page-coming-soon__content {width: 45%;}
	.page-coming-soon__title {font-size: 21px;}
}

@media (min-width: 1200px) and (max-width: 1279px) {

}

@media (min-width: 1280px) and (max-width: 1365px) {
	.page-coming-soon__content {width: 45%;}
	.page-coming-soon__title {font-size: 21px;}
}

@media (min-width: 1366px) and (max-width: 1439px) {
	.page-coming-soon__content {width: 45%;}
	.page-coming-soon__title {font-size: 21px;}
}

@media (min-width: 1440px) and (max-width: 1599px) {

}

@media (min-width: 1600px) and (max-width: 1920px) {

}
/* ========================================
   end coming-soon PAGE
======================================== */