* {box-sizing: border-box; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent;}

@font-face {
  font-family: 'LEMONMILK-Regular';
  src: url('../../assets/LEMONMILK-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'LEMONMILK-Bold';
  src: url('../../assets/LEMONMILK-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'American';
  src: url('../../assets/American Captain.otf') format('opentype');
}
@font-face {
  font-family: 'Heisenberg';
  src: url('../../assets/Heisenberg.otf') format('opentype');
}

#grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.noise-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: -1;
}

/* HEADER */
.header {background-color: transparent; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100vw; height: 300px; border-bottom: 2px solid transparent; transition: height 0.3s ease; overflow: hidden;}
.header {position: absolute; top: 0; z-index: 100;}
.header.active {height: 150px; border-bottom: 2px solid #000;}

.skull {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.skullcen {position: absolute;top:50%;left:50%;transform:translate(-50%, -50%); width: 90%; height: auto; z-index: 3;}
.VMwrap {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none;}
.VMcen {width: 140%; height: auto;}

.menu {background-color: #CE1F26; display: flex; justify-content: space-around; align-items: center; width: 100%; height: 100%; z-index: 5; overflow: hidden; opacity: 0; transition: transform .5s ease-in-out, opacity .5s ease;}
/*
.menu::before {content: ''; position: absolute; top: -100%; left: -50%; width: 300%; height: 300%; background-image: url(../../assets/noiseII.png); opacity: 1; animation: grain 3s steps(10) infinite; z-index: -1;}
@keyframes grain {0%,100% {transform: translate(0,0);} 10% {transform: translate(-5%,-10%);} 20% {transform: translate(-15%,5%);} 30% {transform: translate(7%,-25%);} 40% {transform: translate(-5%,25%);} 50% {transform: translate(-15%,10%);} 60% {transform: translate(15%,0%);} 70% {transform: translate(0%,15%);} 80% {transform: translate(3%,35%);} 90% {transform: translate(-10%,10%);}}
*/
.header.active .menu {opacity: 1;}
.logo {position: relative; font-family: 'LEMONMILK-Regular', 'American', sans-serif; font-size: 2rem; font-weight: bolder; color: #fff; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px  2px 0 black, 2px  2px 0 black; letter-spacing: 0px; text-decoration: none; transition: 0.3s;}
.logo:hover {color: #000; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white;}
.logo {position: relative; z-index: 1;}
.logo::before {content: ''; position: absolute; z-index: -1; top: 33%; bottom: 33%; left: -0.25em; right: -0.25em; background-color: #000; transform-origin: center right; transform: scaleX(0); transition: transform 0.2s ease-in-out;}
.logo:hover::before {transform: scaleX(1); transform-origin: center left;}
.current {color: #000; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white; pointer-events: none; text-decoration: line-through;}
.ozero {opacity: 0;}
.mob-menu {display: none !important;}
.mb {visibility: hidden !important;}

/* ------------------ MOBILE HEADER ------------------ */
@media (max-width: 1920px) {
  .header.active {height: 150px;}
  .skull { width: 150px; height: 150px;}
  .logo { font-size: 1.5rem; }
}
@media (max-width: 1280px) {
  .header.active {height: 100px;}
  .skull { width: 100px; height: 100px;}
  .logo { font-size: 1rem; }
}
@media (max-width: 768px) {
  .cursor {display: none !important;}
  .header {position: sticky; height: 200px;}
  .header.active {height: 150px; border-bottom: 2px solid transparent;}
  .skull {width: 100px; height: 100px;}
  .menu {display: none !important;}
  .current {-webkit-text-stroke: 0px transparent;}
}

/* ------------------ MOBILE MENU ------------------ */
.mb {color: #fff; background-color: #000; display: flex; justify-content: center; align-items: center;  text-align: center; position: fixed; top: 50%; right: -1%; transform: translateY(-50%); width: 10%; height: 10%; z-index:101; overflow: hidden; transition: transform 1s ease-in-out;}
.mb span {transform: rotate(-90deg);}
.mb span::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: white; transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease-in-out; } 
.mb.open span::after { transform: scaleX(1); }
.mob-menu {background-color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center;  text-align: center; position: fixed; top: 50%; left: 100%; transform: translateY(-50%); width: 80%; height: 60%; z-index:102; overflow: hidden; border: 4px solid black; transition: transform .5s ease-in-out;}
.mob-menu::before {content: ''; position: absolute; top: -100%; left: -50%; width: 300%; height: 300%; background-image: url(../../assets/noiseII.png); opacity: 1; animation: grain 3s steps(10) infinite; z-index: -1;}
@keyframes grain {0%,100% {transform: translate(0,0);} 10% {transform: translate(-5%,-10%);} 20% {transform: translate(-15%,5%);} 30% {transform: translate(7%,-25%);} 40% {transform: translate(-5%,25%);} 50% {transform: translate(-15%,10%);} 60% {transform: translate(15%,0%);} 70% {transform: translate(0%,15%);} 80% {transform: translate(3%,35%);} 90% {transform: translate(-10%,10%);}}
.mob-menu-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; /* fills mob-menu container */ }
.mob-logo {position: relative; font-family: 'LEMONMILK-Regular', 'American', sans-serif; font-size: 2rem; font-weight: bolder; color: #fff; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px  2px 0 black, 2px  2px 0 black; letter-spacing: 2px; text-decoration: none; transition: 0.3s;}
.mob-logo:hover {color: #000; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white;}
.mob-logo {position: relative; z-index: 1;}
@keyframes floatLinks { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mob-logo::before {content: ''; position: absolute; z-index: -1; top: 33%; bottom: 33%; left: -0.25em; right: -0.25em; background-color: #000; transform-origin: center right; transform: scaleX(0); transition: transform 0.2s ease-in-out;}
.mob-logo:hover::before {transform: scaleX(1); transform-origin: center left;}
.crnt {color: #000; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px  1px 0 white, 1px  1px 0 white; pointer-events: none; text-decoration: line-through;}
@media (max-width: 768px) {
  .mob-menu {display: block !important;}
  .mb {visibility: visible !important;}
}
@media (max-width: 768px) and (max-height: 800px) {
  .mob-logo { font-size: 1.5rem; }
}

section{position:relative;width:100vw; min-height:100vh; overflow-x: hidden !important;}

/* S 03 */

/* Filters */
.max-txt-trial, .min-txt-trial {position: absolute; left: 0; bottom: 0; width: 100vw; height: 100vh; }
.max-txt-trial text {font-family: 'LEMONMILK-Regular', 'Roboto', sans-serif; font-size: 8rem; letter-spacing: 0px; user-select: none; -webkit-user-select: none;/* Safari */ -moz-user-select: none;/* Firefox */ -ms-user-select: none;/* IE/Edge */}
.min-txt-trial text {font-family: 'Heisenberg', 'LEMONMILK-Regular', 'Roboto', sans-serif; font-size: 8rem; letter-spacing: 0px; text-transform: initial; user-select: none; -webkit-user-select: none;/* Safari */ -moz-user-select: none;/* Firefox */ -ms-user-select: none;/* IE/Edge */}

/* Trial */
.trail-container {position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.trail-img { position: absolute; width: 200px; height: 150px; max-width: 200px; max-height: 200px; object-fit: cover; border: 4px solid transparent; box-shadow: 0 0 0 2px #000; backdrop-filter: blur(8px); border-radius: 0px; transform-origin: center; pointer-events: none; will-change: transform; /*filter: url(#minFilter);*/}
.trail-img img{ width:auto; height:100%; object-fit: cover; will-change: transform; }

/* marquee */
.trail-container:hover .marquee-trial {transform: translateY(0em);}
.trail-container:hover .marquee-trial-II {transform: translateY(0em);}
.marquee-trial { position: absolute; bottom: 0%; width: 100%; margin: 0 auto; padding: 0.2em 0; white-space: nowrap; overflow: hidden; z-index: 3; background: #111; display: flex; align-items: center; transform: translateY(10em); transition: transform 0.5s ease-in-out;}
.marquee-trial-content { display: inline-block; white-space: nowrap; animation: marqueeAnim 60s linear infinite; }
.marquee-trial-content span { font-family: 'American', 'LEMONMILK-Regular', 'Roboto', sans-serif; text-transform: uppercase; font-weight: 300; color: #eee; font-size: 4em; display: inline-block; padding-right: 2rem; filter: url(#minFilter); user-select: none; -webkit-user-select: none;/* Safari */ -moz-user-select: none;/* Firefox */ -ms-user-select: none;/* IE/Edge */} 
.marquee-trial-II { position: absolute; top: 0%; width: 100%; margin: 0 auto; padding: 0.2em 0; white-space: nowrap; overflow: hidden; z-index: 3; background: #111; display: flex; align-items: center; transform: translateY(-10em); transition: transform 0.5s ease-in-out;}
.marquee-trial-content-II { display: inline-block; white-space: nowrap; animation: marqueeAnimII 60s linear infinite; }
.marquee-trial-content-II span { font-family: 'American', 'LEMONMILK-Regular', 'Roboto', sans-serif; text-transform: uppercase; font-weight: 300; color: #eee; font-size: 4em; display: inline-block; padding-right: 2rem; filter: url(#minFilter); user-select: none; -webkit-user-select: none;/* Safari */ -moz-user-select: none;/* Firefox */ -ms-user-select: none;/* IE/Edge */}
@keyframes marqueeAnim { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
@keyframes marqueeAnimII { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }

@media (orientation: portrait) {
  .rotate-on-portrait {
    transform: rotate(90deg);
    transform-origin: center center; /* Optional: adjust rotation pivot */
  }
}

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

  body{width: 100vw; overflow-x: hidden !important;}

  .main{width:80vw; top:5%; right:10vw; transform:translate(10%,0%); transform-origin: center; }
  /*.menu {opacity: 1;}*/
  .menu__item {font-size: 2rem;}
  .menu__item::before{top:40%;bottom:40%;}
  .content__title{font-size: 2.5rem;}
  .content__text{font-size: 1rem; top: 33%;}

  .max-txt-trial text {font-size: 80vw; letter-spacing: -20px;}
  .min-txt-trial text {font-size: 33vw; letter-spacing: 20px;}
  .trial-img { width: 100px; height: 100px; max-width: 100px; max-height: 100px; }

  .menu__item::before {visibility: hidden;}

}

@media (max-width: 500px) and (max-height: 800px) {
    .main { height: 33vh;}
    .menu__item { font-size: 1.5rem; }
    .menu__item:nth-child(even) { font-weight: 100; color: #eee;}
    .content__text { font-size: .75rem; }
}

/* Loader CSS */
.loading{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:110;background:#000;opacity:0;transition:0.5s;}
/*.loading::before {content: ''; position: absolute; top: -100%; left: -50%; width: 300%; height: 300%; background-image: url(../assets/noiseII.png); opacity: 1; animation: grain 3s steps(10) infinite; z-index: -1;}*/
.before-load .loading{opacity:1;}
.load-skull {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: none;}
.load-skullcen {position: absolute; width: 90%; height: auto; z-index: 3;}
.load-VMwrap {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none;}
.load-VMcen {width: 140%; height: auto;}
.load-VMwrap { animation: spin 5s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media(max-width: 1300px) { .load-skullcen {width: 90%;} }