:root {
  --bg-: #140e14;
  --bg-muted-: rgba(20, 14, 20, 0.9);
  --text-: rgba(255, 215, 92, 0.9);
  --muted-: rgba(217, 209, 190, 0.9);
  --link-: rgba(255, 215, 92, 1);
}

/*__________________________KEYFRAMES*/
@keyframes FadeIn{0% {opacity: 0;} 100% {opacity: 1;}}
	
	
	/*__________________________FONTS*/
@font-face {font-family: 'caviar_dreamsregular'; src: url('fonts/caviardreams-subset.woff2') format('woff2'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'OpenSans'; font-style: normal; font-display: swap; font-weight: 300; src: url('fonts/opensans-subset.woff2') format('woff2');}


/*__________________________GLOBAL*/
body {position:relative; margin: 0; background-color: var(--bg-); overflow-x: hidden;}
.circle {border-radius:50%;}
.video-pending {opacity: 0; visibility: hidden;}
div.space {height:5vh;}
.padding-top {padding-top:2.6rem;}
section {margin-block: 4rem;}


/* __________________________ PAGE LOADER */
html.is-loading {overflow: hidden;}
.page-loader {position: fixed; inset: 0; z-index: 100000; background: var(--bg-); opacity: 1; visibility: visible; transition: opacity 0.8s ease, visibility 0s;}
.page-loader.is-hidden {opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.8s ease, visibility 0s linear 0.8s;}


/* __________________________ LOADER ANIMATION */
.loader {position: fixed; top: 50%; left: 50%; width: 50vmin; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);}
.loader:before, .loader:after {content: ''; border-radius: 50%; position: absolute; inset: 0;}
.loader:after {box-shadow: 0 10px 0 #ffd75c inset; animation: rotate 1s linear infinite paused;}
.page-loader:not(.is-hidden) .loader:after {animation-play-state: running;}
@keyframes rotate { 0% {transform: rotate(0);} 100% {transform: rotate(1080deg);}}


/*__________________________ANIMATIONS */
.reveal-animation-1 {opacity: 0; transition: opacity 2s ease-in-out; will-change: opacity;}
.reveal-animation-2 {opacity: 0; transform: translate3d(-80px, 0, 0); transform-origin: center center; transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform;}
.reveal-animation-3 {opacity: 0; transform: translate3d(80px, 0, 0); transform-origin: center center; transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform;}
.reveal-animation-4 {opacity: 0; transform: scale(0.5); transform-origin: center center; transition: opacity 2s cubic-bezier(.4,.93,.9,.98), transform 2s cubic-bezier(.4,.93,.9,.98); will-change: opacity, transform;}
.reveal-animation-5 {opacity: 0; visibility: hidden; transform: translateY(10vh) scale(0.2); transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.6s ease-out; will-change: opacity, transform, visibility;}
.reveal-animation-6 {transform: scale(1.8) translateY(9%); transition: transform 5s ease-in-out; transition-delay: 200ms; will-change: transform;}
.is-visible         {opacity: 1; visibility: visible; transform: scale(1) translate3d(0, 0, 0);}


/*__________________________HEADER*/
.header {display: block; position: relative; width: 100%; height: auto; text-align: center; margin: 0; padding: 0;}
.header h1 {font-size: min(12vh, 12vw); font-family:'caviar_dreamsregular'; color: var(--text-); display: block; font-weight: normal; margin: 0 auto; letter-spacing: 0.25em; padding-left: 0.25em; padding-top: 0.1em;}
.header h1.main {font-size: min(15vh, 15vw); letter-spacing: 0.25em; padding-left: 0.25em;}
.header h2 {font-size: min(6vh, 6vw); font-family:'caviar_dreamsregular'; color: var(--text-); display: block; font-weight: normal; margin: 0 auto; letter-spacing: 0.20em; padding-left: 0.20em; padding-bottom:0.1em;}

.header h1.animate, .header h2.animate, .luminae-video.animate {opacity: 1;}

/* __________________________ SITE MENU */
.site-menu-toggle {position: fixed; top: 12px; right: calc(12px + var(--menu-scrollbar-width, 0px)); z-index: 10002; display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; padding: 0; border: 0; background: transparent; opacity: 0.9; cursor: pointer;}
.site-menu-toggle img {display: block; width: 100%; height: 100%; object-fit: contain;}

.site-menu {position: fixed; top: 80px; right: calc(80px + var(--menu-scrollbar-width, 0px)); z-index: 10001; box-sizing: border-box; width: 280px; padding: 0.5rem 1rem; border: 1px solid var(--text-); background: #140e14; text-align: left; backdrop-filter: blur(8px);}
.site-menu[hidden] {display: none !important;}
.site-menu a {display: block; padding: 0.8rem 0; font-family: 'OpenSans'; font-size: 1.4rem; letter-spacing: 0.14em; color: #fff; text-decoration: none;}
.site-menu a + a {border-top: 1px solid rgba(255, 215, 92, 0.18);}
.site-menu a:hover {color: var(--link-);}

@media (max-width: 1000px) {
  :root {--menu-bar-height: 44px;}
  .header {padding-top: var(--menu-bar-height);}
  .site-menu-toggle {top: 0; left: 0; right: 0; width: 100%; height: var(--menu-bar-height); background: var(--bg-muted-); opacity: 0.8;}
  .site-menu-toggle img {width: auto; height: 23px;}
  .site-menu {top: var(--menu-bar-height); left: 0; right: 0; width: 100%; border-width: 1px 0; background: var(--bg-muted-);}
}


/*__________________________CONTENT*/
.content {max-width: 1400px; margin: 0 auto; text-align: center; position: relative;}
.content.afterintro {margin-top:15vh;}
.content img, .content video {max-width: 100%;}
.content p {font-family: 'OpenSans';              font-weight: 100; font-size: 1.7em; letter-spacing: 0.08em; color: var(--muted-); line-height: 140%; text-align:left; margin: 1rem 0;}
.content p.centered {text-align:center;}
.content.formal p{font-size:1.25em; color: var(--muted-);}

.content a  {font-family: 'OpenSans';             font-weight: 100; font-size: 1.8em; letter-spacing: 0.1em; text-decoration:none; color: var(--link-); margin:1rem 0;}

.content h1 {font-family: 'caviar_dreamsregular'; font-weight: 100; font-size: 4.8em; letter-spacing: 0.25em; padding-left:0.25em; color: rgba(255, 215, 92, 0.9);  margin:2.6rem 0 0 0; line-height:135%;}
.content h2 {font-family: 'caviar_dreamsregular'; font-weight: 100; font-size: 3.6em; letter-spacing: 0.15em; padding-left:0.15em; color: rgba(255, 215, 92, 0.9);  margin:2.6rem 0 0 0; line-height:135%;}
.content h3 {font-family: 'caviar_dreamsregular'; font-weight: 100; font-size: 2.8em; letter-spacing: 0.12em; padding-left:0.12em; color: rgba(255, 215, 92, 0.85); margin:2.6rem 0 0 0; line-height:135%;}
.content h4 {font-family: 'caviar_dreamsregular'; font-weight: 100; font-size: 2.7em; letter-spacing: 0.14em; padding-left:0.14em; color: rgba(255, 215, 92, 0.85); margin:2.6rem 0 0 0; line-height:135%;}

.content .nowrap {white-space: nowrap;}
.hr {margin: 0.2em 0; border: 0; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--text-) 50%, rgba(0, 0, 0, 0) 100%);}

.overlay.animate {animation-name: FadeIn; animation-duration: 1s; animation-timing-function: ease-in; animation-fill-mode: forwards;}




/*__________________________BUTTON*/
a.button {display:inline-block; padding:0.3em 0.7em; border-top:1px solid #ffd75c; border-bottom:1px solid #ffd75c; background: linear-gradient(to bottom, #ffd75c, #fcc82d); transition: all 0.6s; color: var(--bg-);}
a.button:hover {color:#ffd75c; background: none; border-radius: 0;}


/*__________________________ON-OFF BUTTON*/
.toggle {position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; width: 120px; height: 36px; padding: 0; border: 2px solid #ffd75b; border-radius: 999px; background:var(--bg-); color:var(--text-); overflow: hidden; cursor: pointer; margin-top:10px;}

.toggle-label {position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; transition: color 0.8s ease;}
.toggle-bg {position: absolute; z-index: 1; top: 2px; left: 2px; width: calc(50% - 2px); height: calc(100% - 4px); background:var(--text-); border-radius: 999px; transform: translateX(0); transition: transform 0.8s ease;}

.toggle[aria-pressed="false"] .toggle-off {color: var(--bg-);}
.toggle[aria-pressed="false"] .toggle-on {color: var(--text-);}
.toggle[aria-pressed="true"] .toggle-off {color: var(--text-);}
.toggle[aria-pressed="true"] .toggle-on {color: var(--bg-);}
.toggle[aria-pressed="true"] .toggle-bg {transform: translateX(100%);}


/*__________________________IMAGE POP-UP*/
.parallax-wrapper {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; margin:5em 0 2em 0;}


/*__________________________FADE-IN LETTERS*/
.js-fade-title .char {display: inline-block; opacity: 0;}
.js-fade-title .char.is-visible {animation-name: FadeIn; animation-timing-function: ease; animation-fill-mode: forwards;}


/*__________________________SPLIT*/
.split {padding:0; display: flex; gap:0.8em; flex-wrap: wrap; flex-direction: row; align-items: center; width: 100%; box-sizing: border-box;}
.split h2 {line-height: 150%; margin:0; padding:0 0.5em;}
.split div {display: block; flex: 1 0; align-self: auto; text-align: center; position: relative; margin: 0 auto;}
.split img, .split video {width: 100%; display: inline; position: relative;}
.split video {transition: opacity 1.2s ease-in-out;}
.split img:not(:first-child) {position: absolute; top: 0; left: 0; z-index: 10; opacity: 0; transition: opacity ease-out 1.3s;}


/*__________________________SINGLE IMAGE OVERLAY */
.img-overlay {position: relative; width: 100%; height: 100%; display: flex;justify-content: center; align-items: center;}
.img-overlay img:first-child {position: relative; display: block; max-width: 100%; max-height: 100%;}
.img-overlay .overlay {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; z-index: 2; opacity: 0; transition: opacity 2.5s ease;}
.img-overlay .overlay.animate {animation-name: FadeIn; animation-duration: 2.5s; animation-timing-function: ease-in; animation-fill-mode: forwards;}


/*__________________________MULTI IMAGE OVERLAY */
div.multi-img-overlay {position: relative; width: 100%; margin: 1.5em 0;}
div.multi-img-overlay img.base {width: 100%; position: relative; display: block;}
div.multi-img-overlay img.overlay {z-index: 100; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; display: block; animation-delay: var(--delay, 0ms);}
div.multi-img-overlay img.overlay.animate {animation-name: FadeIn; animation-duration: 1s; animation-timing-function: ease-in; animation-fill-mode: forwards;}
.multi-img-overlay .overlay {animation-delay: var(--delay, 0ms);}


/*__________________________GALLERY */
#gallery {position: relative; width: 100%; margin: 5rem 0 0 0;}
.gallery-viewport {width: 100%; aspect-ratio: 16 / 10; overflow: hidden;}
.gallery-track {display: flex; width: 100%; height: 100%; transition: transform 0.7s ease;}
.gallery-track img {flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block;}
.gallery-arrow {position: absolute; top: 0; height: 100%; width: 15%; z-index: 10; border: none; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; font-size: 75px; font-weight: 200; line-height: 1; opacity: 0.8; transition: opacity 0.25s ease;}
.gallery-prev {left: 0; justify-content: flex-start; padding-left: 18px;}
.gallery-next {right: 0; justify-content: flex-end; padding-right: 18px;}
.gallery-prev:hover {background: linear-gradient(to right, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 100%); opacity: 1;}
.gallery-next:hover {background: linear-gradient(to left,  rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 100%); opacity: 1;}
.gallery-arrow:focus-visible {outline: none;}
@media (hover: none) and (pointer: coarse) {.gallery-arrow {display: none;}}


/*__________________________FRAME */
#FrameStickyZone{height: 200vh; display:block; position:relative;}
.frame {display:block; width:100%; height:auto; position: -webkit-sticky; position: sticky; top:5vh;}
.frame-wrapper {position: relative; max-height:90vh; margin: 0 auto; aspect-ratio:1/1;}
.frame-wrapper img.switch {position:absolute; z-index:0; width:100%; max-height:100%; aspect-ratio:1/1; z-index:100; opacity:0; transition: opacity ease 1.5s;}
.frame-wrapper img.bg {position:absolute; z-index:0; width:100%; max-height:100%; z-index:2; aspect-ratio:1/1;}    
.frame-wrapper img.overlay {position:absolute; top:20.8%; left:20.8%; max-width:58.4%; z-index:6; opacity:0; aspect-ratio:1/1; transition: opacity ease 2s, transform linear 100ms;}   



/*__________________________CONTACT FORM*/
.contact-honeypot {position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important;}
.form-feedback {max-width: 48rem; margin: 1.5rem auto; line-height: 1.6; text-align: center; overflow-wrap: anywhere;}
.form-feedback[hidden] {display: none !important;}
.form-feedback--success {color: rgba(255, 215, 92, 0.95);}
.form-feedback--error {color: #ffaaa5;}

#contactform {margin:0; display: flow-root;}
#contactform input, #contactform textarea {font-family: 'OpenSans'; color: var(--text-); font-size: 1.2em; padding: 0.7em; line-height: 150%; letter-spacing: 0.2em; background-color: var(--bg-); border: 1px solid var(--text-); float: left;}
#contactform input {width: 50%; margin-bottom: 1em;}
#contactform textarea {float: left; overflow: auto; resize: none; width: calc(100% - 6px - 1.4em); min-height: 25vh; margin-bottom: 1em;}
#contactform input.send {font-family: 'OpenSans'; color: var(--text-); font-size: 1.2em; line-height: 150%; letter-spacing: 0.2em; background-color: var(--bg-); border: 1px solid var(--text-); float: left; width: auto; margin-bottom: 2em;}
#contact-feedback {clear: both;}


/*__________________________FOOTER*/
.footer {display: flex; position: relative; width: 100%; background-color: var(--bg-); padding: 2vh 0; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; border-top: 1px solid var(--text-);}
.flexbox-item {flex: 1 0 auto; text-align: center;}
.flexbox-item:nth-child(1) {flex-grow: 1; flex-shrink: 0; flex-basis: auto;}
.flexbox-item:nth-child(2) {flex-grow: 1; flex-shrink: 0; flex-basis: auto;}
.flexbox-item:nth-child(3) {flex-grow: 1; flex-shrink: 0; flex-basis: auto;}
.footer p {font-family: 'OpenSans'; color: var(--text-); font-size: 1.2em; line-height: 150%; letter-spacing: 0.2em; margin: 0; padding: 0;}
.footer a {font-family: 'OpenSans'; color: var(--text-); font-size: 1.2em; line-height: 160%; letter-spacing: 0.2em; margin: 0; padding: 0; text-decoration: none;}
.footer a img {opacity:0.9;}
.footer a:hover {color: #fff;}


/*__________________________SCROLL HINT*/
#scroll-hint {position: fixed; right: 3vw; bottom: 3vh; width: 18px; height: 18px; border-right: 2px solid #ffd75c; border-bottom: 2px solid #ffd75c; transform: translateY(-4px) rotate(45deg); opacity: 0; pointer-events: none; z-index: 9999;}
#scroll-hint.visible {animation: scroll-hint-in 0.8s ease-out forwards;}
@keyframes scroll-hint-in {from {opacity: 0; transform: translateY(-54px) rotate(45deg);} to {opacity: 1; transform: translateY(-4px) rotate(45deg);}}


	@media (max-aspect-ratio: 2/3) {
	.content.afterintro {margin-top:0;}
}

	
@media all and (max-width: 1400px) {
	.content {padding: 0 1.5%;}
  .content p {font-size: 1.5em;} 
  h2.FadeInText {font-size: 5.6vw;}
  .content .split h2 {font-size: 4.4w;} 
  .content h2 {font-size: 5vw;} 
  .content h3 {font-size: 3.2vw;} 	
}


@media all and (max-width: 1000px) {
	.header h1.main {font-size: min(14vh, 14vw);}
  .livingroom-img {height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center;}
  .content p {font-size: 1.25em;}
  .header h1.main {font-size: min(16vh, 16vw); padding-top: 0em;}
  .header h1 {font-size: min(16vh, 16vw); padding-top: 0em;}
  .header h2 {font-size: min(9vh, 9vw);}
}

 

@media all and (max-width: 800px) {
	.footer p, .footer a {font-size: 2.4vw;}
}

@media all and (max-width: 700px) {
	.content {padding: 0 2%;}
	
	div.split {padding:0;}
	.split > div {flex: none; width:100%;}
	
	.content p {font-size: 1.1em;} 
	.content a.button {font-size: 5vw;} 
	.content h2 {font-size: 1.5em; margin: 1rem 0;} 
  h2.FadeInText {font-size: 2.2em;}
  .content h3, .content h4 {font-size: 1.3em;} 	
  
  .content h1, .content h2, .content h3 {line-height:150%;}

	.toggle {width: 100px; height: 30px;}
	
	.gallery-viewport{aspect-ratio:5/6;}

  .intro-screen:has(.luminae-video) {height: auto; min-height: 0;}
  .intro-screen:has(.luminae-video) > #intro {flex: 0 0 auto; height: auto; padding-top:2.6rem;}		
  
  .parallax-wrapper {width: 98%; margin:0 auto;}
  .split.swap-order-on-resize {flex-direction: column-reverse;}
  
   #contactform input {width: calc(100% - 6px - 1.4em);}
   section {margin-block: 4rem;}
}