/* BēnreaDesignStudio */

/* Main */
body {
   background: var(--color-background-primary-inverse);
}

header {
   height: 100vh;
   opacity: 0;
   transform: translate(0, 7%);
}
header.start {
   opacity: 1;
   transform: translate(0, 0);
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
header.end {
   height: var(--height-header);
   opacity: 1;
   pointer-events: fill;
   transition: all var(--time-lazy) ease;
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
#logo {
   display: none;
   height: 9.25dvw;
   transform: translate(0, 7%);
   opacity: 0;
}
#logo.start {
   opacity: 1;
   transform: translate(0, 0);
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
#logo.end {
   /* margin: 0 auto; */
   height: var(--height-logo);
   opacity: 0.925;
   transition: all var(--time-slow) ease-out !important;
}
#logo img {
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
header .left, header .right {
   display: none;
   opacity: 0;
   transition: all var(--time-normal) ease-out;
}
header .left.visible, header .right.visible {
   opacity: 1;
}
#header-back {
   display: none !important;
}

main.visible {
   opacity: 1;
}

#button-start {
   display: none;
   position: absolute;
   width: fit-content;
   height: fit-content;
   text-decoration: none;
   text-rendering: geometricPrecision;
   left: 50%;
   bottom: var(--spacer-xl);
   font-family: "sans-serif-variable-font";
   font-variation-settings: var(--font-variation-bold);
   font-size: 0.875rem;
   letter-spacing: -0.005rem;
   line-height: 100%;
   color: var(--color-text-primary-inverse);
   padding: 14px 17px;
   background: none;
   border: var(--border-normal) solid var(--color-text-primary-inverse);
   border-radius: 50px;
   cursor: pointer;
   transform: translate(-50%, 5%);
   transition: all var(--time-normal) ease-out;
   z-index: 51;
}
#button-start.visible {
   opacity: 1;
   transform: translate(-50%, 0);
}
#button-start:hover {
   background: var(--color-brand-accent);
   border: var(--border-normal) solid var(--color-brand-accent);
   transition: all var(--time-normal) ease;

   color: var(--color-text-primary);
   background: var(--color-background-primary);
   border: var(--border-normal) solid var(--color-background-primary);
}

#hero {
   display: none;
   position: fixed;
   height: 100vh;
   z-index: 2;
   background-color: var(--color-background-primary-inverse);
   opacity: 0;
   overflow: hidden;
   /* transition: all var(--time-slow) ease; */
}
#hero.visible {
   background-color: var(--color-brand-primary);
   opacity: 1;
   transition: opacity var(--time-lazy) ease, background-color 5s ease;
}
#hero.end {
   transition: all var(--time-lazy) ease;
   background-color: #eee2db !important;
}
#hero-follow {
   display: none;
   width: 4000px;
   height: 4000px;
   position: absolute;
   background: radial-gradient(circle, rgba(0, 0, 0, 0), black);
   z-index: 12;
}
#hero-gradient {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* background: radial-gradient(#eabb9215, #eabb92); */
   background: radial-gradient(#0231ca41, #023ecae6);
   mix-blend-mode: lighten;
   opacity: 0;
   z-index: 11;
   transition: all var(--time-slow) ease;
   pointer-events: none;
}
#hero-gradient.visible {
   opacity: 1;
   transition: all 5s ease;
}
#hero-vignette {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
   mix-blend-mode: darken;
   z-index: 10;
   pointer-events: none;
   opacity: 0;
}
#hero-vignette.visible {
   opacity: 1;
   transition: all 5s ease;
}
#exterior-image, #interior-image { 
   display: none;
   object-fit: cover;
   width: 100%;
   height: 100dvh;
   /* filter: saturate(1.25) contrast(1.075) brightness(0.275); */
   filter: saturate(1.25) contrast(1.075) brightness(1.075);
   transform: scale(1.15);
   transition: all var(--time-lazy) ease-out;
   opacity: 0;
}
#exterior-image {
   position: relative;
   filter: saturate(1.25) contrast(1.075) brightness(1.075);
}
#interior-image {
   position: absolute;
   margin: 0 auto;
   transform: scale(1.5) translate(0, -2%);
}
#exterior-image.visible, #interior-image.visible {
   opacity: 1 !important;
   transform: scale(1.45) !important;
   transition: all 5s var(--cubic-bezier-ease-in-out-quart) !important;
}
#points {
   display: none;
   position: fixed;
   margin: 0;
   top: 0;
   left: 50%;
   bottom: 0;
   width: 100vh;
   transform: translate(-50%, 0);
   z-index: 13;
   opacity: 0;
   transition: all var(--time-normal) ease-out;
}
#points.visible {
   opacity: 1;
}
#points a {
   display: flex;
   position: absolute;
   flex-direction: row;
   align-items: center;
   align-content: center;
   width: fit-content;
   height: fit-content;
   text-decoration: none;
   background: none;
   border: none;
   gap: 4px;
   cursor: pointer;
}
#points a div {
   display: flex;
   position: relative;
   width: 18px;
   height: 18px;
   background: var(--color-brand-primary);
   border-radius: 100%;
   box-shadow: rgba(0, 0, 0, 0.35) 0 0 8px;
   transition: all var(--time-fast) ease-out;
}
#points a:hover div {
   background: var(--color-brand-accent);
}
#points a h5 {
   line-height: 100%;
   color: var(--color-text-primary-inverse);
   padding: 14px 17px;
   background: rgba(0, 0, 0, 0.75);
   border-radius: 50px;
   backdrop-filter: blur(20px);
   opacity: 0;
   transform: translate(-8px, 0);
   transition: all var(--time-normal) ease-out;
}
#points a:hover h5 {
   opacity: 1;
   transform: translate(0);
}
#point-1 {
   top: 61%;
   left: 50%;
}
#point-2 {
   top: 27.5%;
   left: 37%;
}
#point-3 {
   top: 43.5%;
   left: 23.5%;
}
#point-4 {
   top: 41%;
   left: 42.5%;
}
#point-5 {
   top: 34%;
   left: 69%;
}

/* Catalogue */
#bottom {
   display: none;
   flex-direction: column;
   position: absolute;
   margin: calc(100dvh - var(--spacer-xl)) 0 0 0;
   height: fit-content;
   padding: var(--spacer-xl) 0 0 0;
   gap: var(--spacer-xxl);
   background: rgba(255, 255, 255, 0.75);
   backdrop-filter: blur(60px);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   box-shadow: 0 0 var(--margin-body) rgba(0, 0, 0, 0.05);
   opacity: 0;
   z-index: 49;
   pointer-events: fill;
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
#bottom.visible {
   opacity: 1;
}
#bottom h1 {
   margin: 0 var(--margin-body) 0 var(--margin-body);
}

#entrance {
   display: none;
   position: relative;
   flex-direction: column;
   margin: 0;
   left: 0;
   right: 0;
   height: fit-content;
   gap: var(--margin-body);
   opacity: 0;
   transform: translate(0, var(--spacer-xxl));
   transition: all var(--time-lazy) ease-out;
}
#entrance.visible {
   opacity: 1;
   transform: translate(0, 0);
}
#entrance h1 {
   margin: 0 25vw;
   text-align: center;
}
#entrance a {
   display: flex;
   position: relative;
   margin: var(--margin-body) var(--spacer-xxxl);
   left: 0;
   right: 0;
   /* width: fit-content; */
   height: fit-content;
   text-align: center;
   text-decoration: none;
   color: var(--color-text-primary-inverse);
   background: var(--color-background-primary-inverse);
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
   overflow: hidden;
   transition: all var(--time-normal) ease-out;
   -moz-transition: all var(--time-normal) ease-out;
}
#entrance a img {
   display: flex;
   position: relative;
   margin: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: fit-content;
   object-fit: cover;
   transition: all var(--time-very-slow) var(--cubic-bezier-ease-in-out-quart);
}
#entrance a:hover img {
   transform: scale(1.075);
}
#entrance a h1 {
   display: none;
   position: absolute;
   top: var(--margin-body);
   left: var(--margin-body);
   right: var(--margin-body);
   margin: unset;
   text-align: center;
   color: var(--color-text-primary-inverse);
   opacity: 0;
}
#entrance a h1.visible {
   opacity: 1;
}
#entrance a h4 {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin: unset;
   padding: var(--spacer-md) var(--margin-body) var(--spacer-lg) var(--margin-body);
   text-align: center;
   color: var(--color-text-primary-inverse);
   background: var(--color-brand-primary);
   transition: all var(--time-normal) ease-out;
   -moz-transition: all var(--time-normal) ease-out;
}
#entrance a:hover h4 {
   color: var(--color-text-primary);
   background: var(--color-brand-accent);
}
#entrance h2 {
   margin: 0 auto;
   text-align: center;
   width: calc(50% + (var(--margin-body) * 2));
}
#entrance p {
   margin: 0 auto;
   text-align: center;
   width: calc(50% + (var(--margin-body) * 2));
}

#catalogue {
   display: none;
   position: relative;
   flex-direction: column;
   margin: 0 var(--margin-body);
   left: 0;
   right: 0;
   height: fit-content;
   opacity: 0;
   transform: translate(0, var(--spacer-xl));
   transition: all var(--time-slow) var(--cubic-bezier-ease-in-out-quart);
}
#catalogue.visible {
   opacity: 1;
   transform: translate(0, 0);
}
#catalogue .gallery {
   display: grid;
   position: relative;
   margin: 0;
   left: 0;
   right: 0;
   height: fit-content;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   grid-auto-rows: auto;
   gap: var(--margin-body);
}
#catalogue a {
   display: flex;
   position: relative;
   flex-direction: column;
   text-decoration: none;
   margin: 0;
   width: 100%;
   height: fit-content;
   color: var(--color-text-primary);
   overflow: hidden;
   cursor: pointer;
}
#catalogue a div {
   display: flex;
   position: relative;
   margin: 0;
   left: 0;
   right: 0;
   height: 400px;
   margin: 0;
   border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, 0.5);
   border: var(--border-small) solid rgba(255, 255, 255, 0.5);
   overflow: hidden;
}
#catalogue img {
   display: flex;
   position: relative;
   height: fit-content;
   object-fit: contain;
   margin: auto;
   /* filter: grayscale(1); */
   transition: 0.25s ease-out;
   -moz-transition: 0.25s ease-out;
}
#catalogue a:hover img {
   transform: scale(1.035);
}
/* #catalogue img:hover {
    filter: unset;
} */
#catalogue a:nth-child(1) img {
   /* width: 80%; */
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: saturate(0.35);
}
#catalogue a:nth-child(2) img {
   margin: 5% 0 0 -25%;
   width: 150%;
   filter: saturate(0.5) contrast(0.85) brightness(1.05);
}
#catalogue a:nth-child(3) img {
   width: 110%;
}
#catalogue a:nth-child(4) img {
   width: 80%;
   filter: saturate(0.85);
}
#catalogue a:nth-child(5) img {
   /* width: 45%; */
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: contrast(0.75);
}
#catalogue h3 {
   margin: 20px 0 8px 0;
   text-decoration: none;
   /* text-transform: uppercase; */
}

#about {
   display: none;
   position: relative;
   flex-direction: row;
   margin: 0 var(--margin-body);
   left: 0;
   right: 0;
   height: fit-content;
   gap: var(--margin-body);
   opacity: 0;
   transform: translate(0, var(--spacer-xl));
   transition: all var(--time-slow) var(--cubic-bezier-ease-in-out-quart);
}
#about.visible {
   opacity: 1;
   transform: translate(0, 0);
}
#about video {
   display: flex;
   position: relative;
   margin: 0;
   left: 0;
   right: 0;
   width: 70%;
   height: fit-content;
   background: var(--color-grey-light);
   border-radius: var(--radius-sm);
   background: var(--color-background-primary-inverse);
   /* filter: saturate(0); */
}
#about .paragraph {
   display: block;
   position: relative;
   margin: 0 calc(var(--margin-body) / 2) 0 0;
   left: 0;
   right: 0;
   width: 30%;
   height: fit-content;
   gap: 24px;
}
#about .paragraph p {
   margin: 0 0 20px 0;
}

#team {
   display: none;
   position: relative;
   flex-direction: row;
   margin: 0 var(--margin-body);
   left: 0;
   right: 0;
   height: fit-content;
   gap: var(--margin-body);
   opacity: 0;
   transform: translate(0, var(--spacer-xl));
   transition: all var(--time-slow) var(--cubic-bezier-ease-in-out-quart);
}
#team.visible {
   opacity: 1;
   transform: translate(0, 0);
}
#team img {
   display: flex;
   position: relative;
   margin: 0;
   left: 0;
   right: 0;
   width: 65%;
   height: fit-content;
   object-fit: cover;
   border-radius: var(--radius-sm);
   background: var(--color-grey-light);
}
#team .paragraph {
   display: block;
   position: relative;
   margin: 0 calc(var(--margin-body) / 2) 0 0;
   left: 0;
   right: 0;
   width: 35%;
   height: fit-content;
   gap: 24px;
}
#team .paragraph p {
   margin: 0 0 20px 0;
}


/* Responsiveness */
@media screen and (max-width: 1024px) {

   /* Points */
   #points a div {
      width: 18px;
      height: 18px;
   }
   #points a p {
      font-size: 0.875rem;
      letter-spacing: 0.005rem;
      padding: 11px 15px;
      opacity: 1;
      transform: unset;
   }
   #points a:hover p {
      opacity: 1;
      transform: unset;
   }
}

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

   /* Animation */
   #logo {
      height: 17dvw;
   }

   #button-start {
      bottom: var(--spacer-xxl);
   }

   /* Main */
   /* #hero {
      overflow-x: scroll;
   }
   #hero::-webkit-scrollbar {
      display: none;
   } */
   #exterior-image, #interior-image { 
      filter: saturate(1.25) contrast(1) brightness(1);
      transform: scale(1);
   }
   #exterior-image.visible, #interior-image.visible {
      transform: scale(1.25);
   }
   #points a {
      gap: 4px;
   }
   #points a div {
      width: 16px;
      height: 16px;
   }
   #points a h5 {
      padding: 14px 17px;
      opacity: 1;
      transform: translate(0);
   }

   #bottom {
      margin: calc(100dvh - var(--spacer-xxl)) 0 0 0;
      padding: var(--spacer-xxl) 0 0 0;
   }

   /* Entrance */
   #entrance {
      gap: var(--spacer-xl);
   }
   #entrance h1 {
      margin: 0 var(--margin-body);
      width: unset;
      left: 0;
      right: 0;
   }
   #entrance a {
      margin: var(--margin-body);
   }
   #entrance a img {
      min-height: calc(100dvw * 2 / 3);
   }
   #entrance h2 {
      margin: 0 var(--margin-body);
      width: unset;
      left: 0;
      right: 0;
   }
   #entrance p {
      margin: 0 var(--margin-body);
      width: unset;
      left: 0;
      right: 0;
   }

   #catalogue .gallery {
      grid-template-columns: 1fr;
      gap: calc((var(--margin-body) * 2) - 3px);
   }
   #catalogue a {
      margin: 0;
      width: unset;
      left: 0;
      right: 0;
   }
   #catalogue a div {
      margin: 0;
      left: 0;
      right: 0;
      height: calc(100vw - (var(--margin-body) * 2));
      margin: 0;
   }
   #catalogue img {
      display: flex;
      position: relative;
      width: fit-content;
      /* height: fit-content; */
      object-fit: contain;
      margin: auto;
      /* filter: grayscale(1);
        transition: all var(--time-normal) ease-out;
        -moz-transition: all var(--time-normal) ease-out; */
   }
   /* #catalogue img:hover {
        filter: unset;
    } */
   #catalogue a:nth-child(1) img {
      height: 90vw;
   }
   #catalogue a:nth-child(2) img {
      height: 65vw;
   }
   #catalogue a:nth-child(3) img {
      height: 60vw;
   }
   #catalogue a:nth-child(4) img {
      height: 80vw;
   }
   #catalogue a:nth-child(5) img {
      height: 60vw;
   }
   #catalogue h3 {
      margin: calc(var(--margin-body) - 3px) 0 6px 0;
   }

   #about {
      flex-direction: column;
      gap: calc(var(--margin-body) * 2);
   }
   #about video {
      width: unset;
   }
   #about .paragraph {
      margin: 0;
      width: unset;
      gap: 24px;
   }
   #about .paragraph p {
      margin: 0 0 20px 0;
   }

   #team {
      flex-direction: column;
      gap: calc(var(--margin-body) * 2);
   }
   #team img {
      width: unset;
      height: fit-content;
   }
   #team .paragraph {
      margin: 0;
      width: unset;
      gap: 24px;
   }
   #team .paragraph p {
      margin: 0 0 20px 0;
   }
}