:root {
  --baseColor: 40,40,48; /* #282830 */
  --baseFont: 'champagne__limousinesregular';
  --baseFontBold: 'champagne__limousinesbold';
  --titleFont: 'mordenaregular';
  --transition: all 0.4s;
  --wh: 26vw /* =500px*100%/1920px */;
  --padding: clamp(1.5625rem, 0.625rem + 4.6875vw, 6.25rem);
}
::selection {color: rgb(var(--color_white)); background: var(--clr);}
body {min-height: 100vh; font-family: var(--baseFont); background-color: var(--clr);}
.fwNormal {font-family: var(--baseFont);}
.fwBold {font-family: var(--baseFontBold);}
.dot-pattern {position: absolute; right: 2.60%; bottom: 15%; width: 330px; height: 120px; background-image: radial-gradient(#fff 10%, transparent 10%), radial-gradient(#fff 10%, transparent 10%); background-size: 33px 30px; background-repeat: repeat;}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 14, 2023 */
@font-face {font-family: 'mordenaregular'; src: url('../fonts/mordena-regular-webfont.woff2') format('woff2'), url('../fonts/mordena-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'champagne__limousinesregular'; src: url('../fonts/champagne__limousines-webfont.woff2') format('woff2'), url('../fonts/champagne__limousines-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'champagne__limousinesbold'; src: url('../fonts/champagne__limousines_bold-webfont.woff2') format('woff2'), url('../fonts/champagne__limousines_bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}

.main-links .link {position: absolute; font-family: var(--titleFont); font-size: clamp(2rem, 1.8rem + 1vw, 3rem); color: #fff; letter-spacing: 0.06em; text-decoration: none; z-index: 1; line-height: normal;}
.main-links .link a {color: #fff; text-decoration: none;}
.main-links .about-link {left: 15px; bottom: 15px;}
.main-links .design-link {position: absolute; right: 15px; top: 15px;}
.main-links .design-link a:before {content: ''; width: 80%; height: 1px; background-color: white; position: absolute; left: -90%; bottom: 10px;}
/* .main-links .contact-link {right: 2.60%; bottom: 2.60%;} */
.main-links .social-link {right: 2.60%; bottom: 2.60%;}
.social-link li a {width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;}
.social-link li a img {filter: brightness(100) invert(1);}
.pr {padding-right: var(--padding);}

.width {margin: 0 auto; width: 44vw;}
.page {position: fixed; left: 0; top: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; transition: var(--transition); overflow: hidden; background-color: var(--clr); z-index: 0;}
.page:target {opacity: 1; visibility: visible; z-index: 1;}
.page .left-logo {position: absolute; left: 15px; top: 15px; width: calc(var(--wh) / 3); height: calc(var(--wh) / 3); transition: var(--transition); filter: brightness(0) invert(1); z-index: 1; opacity: 0;}
.page.target .left-logo {opacity: 1;}

.home.page {opacity: 1; visibility: visible; display: flex; align-items: center; justify-content: center;}
.home .logo {position: absolute; left: calc(50% - 75px); border-radius: 50%; overflow: hidden; transition: var(--transition); width: var(--wh); height: var(--wh); top: 50%; transform: translateY(-50%);}
.home .logo img {filter: invert(11%) sepia(5%) saturate(1936%) hue-rotate(202deg) brightness(91%) contrast(86%); transition: var(--transition);}
.home .width:hover + .logo {left: 15px; top: 15px; filter: brightness(0) invert(1); width: calc(var(--wh) / 3); height: calc(var(--wh) / 3); transform: none;}
.home .title {font-family: var(--titleFont); font-size: clamp(3.125rem, 2rem + 5.625vw, 8.75rem); color: var(--clr); line-height: 0.90; position: relative; z-index: 2;}
.home .pics {position: absolute; left: calc(50% - 75px); opacity: 0; transition: var(--transition); z-index: 1; width: var(--wh); height: var(--wh);}
.home .width:hover .pics {opacity: 1;}

.designs:before {content: ''; position: absolute; left: 260px; bottom: 30px; background: url('../images/design-pattern.png') left top no-repeat; width: 370px; height: 220px;}
.designs .circles {position: absolute; left: calc(50% + 250px); top: 0; width: 100%; bottom: 0; transform: translateX(-50%); transition: 1s; display: flex; flex-direction: column; align-items: center; overflow: hidden; overflow-y: scroll; scrollbar-width: none; padding: 12vw 0; opacity: 0;}
.designs .circles::-webkit-scrollbar {display: none;}
.designs .circles .circle {margin-bottom: 2rem; position: relative; flex-shrink: 0; display: flex; align-items: center;}
.designs .circles .circle a {display: block; width: var(--wh); height: var(--wh); overflow: hidden; border-radius: 50%; position: relative;}
.designs .circles .circle a img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.designs .circles .circle .design-name-details {width: 300px; opacity: 0; transition: var(--transition);}
.designs .circles .circle .design-name-details h2 {color: #fff; font-family: var(--baseFontBold); font-size: clamp(1.0625rem, 0.975rem + 0.4375vw, 1.5rem); letter-spacing: 0.2em;}
.designs .circles .circle .design-name-details h2 small {font-family: var(--baseFont); letter-spacing: normal;}
.designs .circles .circle:hover .design-name-details {opacity: 1;}
.designs .title {font-family: var(--titleFont); font-size: clamp(3.125rem, 2rem + 5.625vw, 8.75rem); color: var(--clr); line-height: 0.90; position: absolute; z-index: 2; left: -100%; transition: var(--transition);}
.designs.target .circles {transform: translateX(-50%); transition-delay: 1s; opacity: 1;}
.designs.target .title {left: 30%; transition-delay: 0.2s;}

.d-page {min-height: 100vh; opacity: 0; visibility: hidden; transition: var(--transition); background-color: #fff;}
.d-page.target {opacity: 1; visibility: visible;}
.d-page.target .design-left {left: 0; transition-delay: 0.2s; transition-duration: 1s;}
.d-page.target .design-left .design-title {opacity: 1;}
.d-page.target .design-details {right: 0; transition-delay: 0.6s; transition-duration: 1s;}
.d-page .nav {background-color: var(--clr);}
.d-page a {color: var(--clr); text-underline-offset: 3px; }
.d-page a:hover {color: rgb(var(--baseColor)); text-decoration: none;}

.design-left {background-color: var(--clr); width: 33vw; padding: 0 4.5vw; position: relative; left: -100%; transition: var(--transition);}
.design-left .design-title {font-family: var(--titleFont); font-size: clamp(4.375rem, 3.625rem + 3.75vw, 8.125rem); color: white; line-height: 0.9; opacity: 0; transition: var(--transition);}
.design-details {height: 100vh; width: 67vw; position: relative; right: -100%; transition: var(--transition); padding: 1rem 0;}
.design-details .content-area {padding-left: 9vw;}
.design-left .dot-pattern {position: absolute; right: 0; top: 0; transform: rotate(90deg);}

.back-btn {position: absolute; left: 15px; bottom: 15px; font-family: var(--titleFont); font-size: clamp(2rem, 1.8rem + 1vw, 3rem); color: #fff; letter-spacing: 0.06em; text-decoration: none; z-index: 1; padding: 0; line-height: normal;}
.back-btn:hover {color: #fff;}

.mcs-horizontal-example {overflow-x: auto; white-space: nowrap;}
.mCSB_horizontal.mCSB_inside>.mCSB_container {margin-bottom: 0;}
/* .mCSB_scrollTools.mCSB_scrollTools_horizontal {height: 25px;}
.mCSB_buttonLeft, .mCSB_buttonRight {background: none !important; background: red !important; opacity: 1 !important;}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {height: 100%; margin: 0;}
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {height: 100% !important;} */

.content-block {width: 500px; white-space: normal; flex-shrink: 0;}
.content-block h2.title {font-family: var(--titleFont); font-size: clamp(2.1875rem, 1.825rem + 1.8125vw, 4rem);}
.content-block p {font-size: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem); letter-spacing: 0.035rem;}
.pic {position: relative; background-color: #000; flex-shrink: 0;}
.pic.square {padding-top: 100%; width: 500px;}
.pic.rectangle {padding-top: 66%; width: 1685px; height: 100vh;}
.pic.portrait {padding-top: 150%;}
.pic img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.rectangle-pic {max-width: 318px;}
.max-height-636 {max-height: 636px;}
.max-height-636 .pic-wrapper img {max-height: 636px;}


/* Cursor design */
.cursor {width: 50px; height: 50px; border-radius: 100%; border: 1px solid black; transition: all 200ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; transform: translate(calc(-50% + 15px), -50%); z-index: 99; mix-blend-mode: multiply;}
.cursor2 {width: 20px; height: 20px; border-radius: 100%; background-color: black; opacity: .3; position: fixed; transform: translate(-50%, -50%); pointer-events: none; transition: width .3s, height .3s, opacity .3s; z-index: 99;}
.hover {background-color: currentColor; opacity: 0.5;}
.cursorinnerhover {width: 50px; height: 50px; opacity: .5;}

/* .content-wrapper {position: fixed; inset: 0; background-color: #ffcc00; width: 100%; height: 100%; z-index: 1; overflow-x: hidden; overflow-y: scroll;}
.content-wrapper .content-area {position: sticky; top: 0; width: 100%; display: grid; justify-content: start; grid-auto-flow: column; overflow: hidden; will-change: scroll-position;} */

.play-btn {color: rgb(var(--baseColor)); letter-spacing: 0.2rem;}
.play-btn span {width: 48px; height: 48px; display: block; border: 1px solid rgb(var(--baseColor)); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.play-btn span:before {content: ''; width: 0; height: 0; border-left: 10px solid rgb(var(--baseColor)); border-top: 8px solid transparent; border-bottom: 8px solid transparent;}

.next-project {background-color: var(--clr); width: 67vw; height: 100vh; position: relative;}
.next-project .project-title {font-family: var(--titleFont); font-size: clamp(3.125rem, 1.875rem + 6.25vw, 9.375rem); color: white; line-height: 0.9; padding: var(--padding); width: 100%; max-width: 1000px; margin: 0 auto; position: relative;}
.next-project .project-title small {font-family: var(--baseFont); font-size: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem); letter-spacing: 0.25rem;}
.next-project .project-title img {filter: brightness(0) invert(1); margin-left: 2rem;}
.next-project:before {content: ''; position: absolute; left: 25%; bottom: 25px; width: 370px; height: 220px; background: url('../images/dot-pattern.png') center center no-repeat;}

.about-page {min-height: 100vh; opacity: 0; visibility: hidden; transition: var(--transition); transition-delay: 0.5s;}
.page.target {opacity: 1; visibility: visible;}
.about-page .about-block {width: 100vw;}
.about-page .about-block .about-pattern {position: relative; top: 105px; margin-right: 150px;}
/* .about-page .about-block:before {content: ''; position: absolute; left: 17vw; bottom: 10vw; background: url('../images/dot-pattern1.png') left top / cover no-repeat; width: 220px; height: 370px;} */
.about-page .content-area {padding-left: 25vw;}
.about-page .content-area h1 {font-family: var(--titleFont); font-size: clamp(3.125rem, 2rem + 5.625vw, 8.75rem); color: white; line-height: 0.90; transition: var(--transition);}
.pic-wrapper .img-fluid {max-height: 99vh;}

.scroll {padding: 0.75rem 1rem; position: fixed; bottom: 2.6%; right: 0; background-color: var(--clr); color: #fff; text-transform: uppercase; letter-spacing: 0.02rem; display: flex; align-items: center; font-family: var(--baseFontBold); cursor: pointer; display: none;}
.scroll img {width: 38px; height: 38px; transform: rotate(90deg); margin-left: 1rem;}
.scroll span {width: 38px; height: 22px; border: 2px solid #fff; border-radius: 15px; position: relative; margin-left: 1rem;}
.scroll span:before {content: ''; width: 5px; height: 5px; background-color: #fff; border-radius: 50%; position: absolute; top: calc(50% - 2.5px); animation: animate 1s linear infinite; transition: 0.5s;}
@keyframes animate {
  0% {left: 3px;}
  15% {left: 10px;}
  50% {left: 15px;}
  100% {left: 25px; opacity: 0;}
}

#mouse-scroll {position: fixed; right: 2.60%; bottom: 2.60%; transform: translateX(-50%) rotate(-90deg); /*background-color: var(--clr); padding: 0.75rem;*/ border-radius: 4px;}
#mouse-scroll span {display: block; width: 9px; height: 9px; transform: rotate(45deg); border-right: 2px solid var(--clr); border-bottom: 2px solid var(--clr); margin: 0 0 3px 5px;}
#mouse-scroll .mouse {height: 30px; width: 18px; border-radius: 10px; transform: none; border: 2px solid var(--clr); top: 170px;}
#mouse-scroll .down-arrow-1 {margin-top: 6px;}
#mouse-scroll .down-arrow-1, #mouse-scroll .down-arrow-2, #mouse-scroll .down-arrow-3 {animation: mouse-scroll 1s infinite; animation-direction: alternate;}
#mouse-scroll .down-arrow-1 {animation-delay: .1s;}
#mouse-scroll .down-arrow-2 {animation-delay: .2s;}
#mouse-scroll .down-arrow-3 {animation-delay: .3s;}
#mouse-scroll .mouse-in {height: 5px; width: 2px; display: block;  margin: 5px auto; background: var(--clr); position: relative;}
#mouse-scroll .mouse-in {animation: animated-mouse 1.2s ease infinite;}

@keyframes animated-mouse {
  0% {opacity: 1; transform: translateY(0);}
  100% {opacity: 0; transform: translateY(6px);}
}
@keyframes mouse-scroll {
  0% {opacity: 0;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}