@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");
@font-face{font-family:'Teko';src:url('../media/Teko-VariableFont_wght.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'BlackFlag';src:url('../media/BlackFlag.ttf') format('truetype');font-display:swap;}
* {margin: 0;padding: 0;box-sizing: border-box;}
html,body {background: #000;color: #fff;width: 100vw;height: 500vh;font-family: 'Teko', "Inter", sans-serif;overflow: hidden !important; user-select: none; -webkit-user-select: none;/* Safari */ -moz-user-select: none;/* Firefox */ -ms-user-select: none;/* IE/Edge */ -webkit-user-drag: none; /* Prevent drag on WebKit browsers */}
svg {position: absolute; top: 0; left: 0;}
img { width: 100%; height: 100%; object-fit: cover; }
section{position:relative;width:100vw; min-height:100vh; overflow-x: hidden !important;}

.section-1{height:4vh;width:100vw;color:#000;background-color:#fff;position:absolute;display:flex;align-items:center;top:1vh;z-index:2;overflow:hidden;}
.section-2{height:4vh;width:100vw;color:#000;background-color:#fff;position:absolute;display:flex;align-items:center;bottom:1vh;z-index:2;overflow:hidden;}
.team-copy{height:50vh;margin-top:25vh;margin-bottom:25vh;margin-right:0;margin-left:0;overflow:hidden;}
.team-copy0{display:flex;white-space:nowrap;overflow:hidden;}
.team-copy0-wrap{font-size:1.5rem;letter-spacing:10px;line-height:15vh;padding-right:0.3em;margin:-0.3rem 0;animation:subLoop0 5s linear infinite;}
.team-copy0-wrap span{display:flex;align-items:center;gap:2px;text-align:center;}
.fa-sun,.fa-solid{font-size:1rem;position:relative;right:2%;}
@keyframes subLoop0{from{transform:translateX(0);}to{transform:translateX(-100%);}}

.hov-bg{position:absolute;inset:0;z-index:1;filter:url(#minFilter);pointer-events:none;}
.hov-bg::before,.hov-bg::after{content:'';position:absolute;top:50%;left:50%;width:40px;height:20px;background-color:#000;box-shadow:10px 0 #000, -10px 0 #000,0 0 10px #000;border:2px solid #000;transform:translate(-50%,-50%) rotate(var(--angle)) scaleX(0);transform-origin:center;transition:transform 0.25s ease-in-out;z-index:2;}
.hov-bg::before{--angle:45deg;}
.hov-bg::after{--angle:-45deg;}

.inversion-lens{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:99vw; height: 88vh; object-fit:cover;overflow:hidden;border:4px solid transparent;box-shadow:0 0 0 2px #fff;backdrop-filter:blur(8px);border-radius:0px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none;}
.inversion-lens img{display:none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.story { font-size: 4.8rem; line-height: 1.3; text-align: center; filter:url(#minFilter); color: #000; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

@media (orientation: portrait) {.rotate-on-portrait {transform: rotate(90deg); transform-origin: center center;}}
@media screen and (max-width:1920px){ .chaos { font-size: 4.8rem; line-height: 1.1; } }
@media screen and (max-width:1280px){ .chaos { font-size: 4.8rem; line-height: .6; } }
@media screen and (max-width:500px){ .chaos { font-size: 3rem; line-height: .6; } }
@media (max-width: 500px) and (max-height: 800px) { .chaos { font-size: 2.5rem; line-height: .6; } }

h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center;font-size:5vw;font-weight:lighter;line-height:100%;}
.card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20vw;aspect-ratio: 1/1;height:auto;perspective:1000px;}
.card p{color:#000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:70px;font-weight:500;filter:url(#minFilter);}
.card-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;animation:floating 3s infinite ease-in-out;}
#card-1 .card-wrapper{animation-delay:0;}
#card-2 .card-wrapper{animation-delay:.2s;}
#card-3 .card-wrapper{animation-delay:.4s;}
#card-4 .card-wrapper{animation-delay:.6s;}
.flip-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;}
.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border:1px solid #fff;border-radius:0em;overflow:hidden;}
.flip-card-front img{pointer-events:none;}
.flip-card-back{background-color:#000;transform:rotateY(180deg);overflow:hidden;}
.fcbttl {position:absolute;width:96%;height:88%;top:46%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:1em;}
.flip-card-back span {color:#fff;text-align: left;font-size: 1.5rem;letter-spacing: 2px;text-transform: uppercase; position:absolute;width:96%;height:10%;top:95%;left:50%;transform:translate(-50%,-50%);}
@keyframes floating{0%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,-60%);}100%{transform:translate(-50%,-50%);}}

html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}

.LPBGII{width:100vw;height:100vh;position:fixed;top:0;left:0;mix-blend-mode:screen; pointer-events: none; opacity: 1;}
.LPBGII video{width:100%;height:auto;}

.pics {position: relative;overflow: hidden;height: 100vh;width: 100vw;}
.pics::before{animation:grain 8s steps(10) infinite;background-image:url(../media/noiseWII.png);content:'';height:300%;left:-50%;opacity:1;position:fixed;top:-100%;width:300%;z-index: 999;pointer-events: none;mix-blend-mode: difference;}
.item {position: absolute;padding: 0.2em 0.2em 2em 0.2em;width: 200px;height: 200px;overflow: hidden;background: #000;border: 1px solid #fff;}
.item img {width: 100%;height: 100%;object-fit: cover;filter: grayscale(100%);}
.item span {position: absolute;bottom: 0.25em;left: 0.5em;font-size: 18px;color: #fff;pointer-events: none;}
@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%);}}
.signa {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;color:#000;font-family: 'BlackFlag','Teko', "Inter", sans-serif;font-size:200px;font-weight:lighter;letter-spacing:-20px;text-shadow:1px 0 #fff, -1px 0 #fff,0 0 10px #fff;filter:url(#minFilter);}

.bottom-menu {position: fixed;bottom: 0;left: 50%;transform: translate(-50%, 100%);z-index: 2;display: flex;justify-content: center;align-items: center;transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.bottom-menu.is-open {transform: translate(-50%, 0%);}
#menu-trigger {position: absolute;display: flex;justify-content: center;align-items: center;bottom: 17vh;left: 50%;transform: translateX(-50%);z-index: 3;width: 100px;height: 100px;background: #fff;border: 3px solid #000;box-shadow: 0 0 10px #fff, 0 0 30px #fff, 0 0 50px #fff;border-radius: 50%;font-family: 'Teko', sans-serif;font-size: 2rem;letter-spacing: 0px;font-weight: bolder;text-align: center;cursor: pointer;will-change: transform;transition: background 0.3s ease, color 0.3s ease;}
.menu-hov-bg{position:absolute;inset:0;z-index:1;filter:url(#minFilter);pointer-events:none;}
.menu-hov-bg::before,.menu-hov-bg::after{content:'';position:absolute;top:50%;left:50%;width:30px;height:15px;background-color:#000;box-shadow:10px 0 #000, -10px 0 #000,0 0 10px #000;border:2px solid #000;transform:translate(-50%,-50%) rotate(var(--angle)) scaleX(0);transform-origin:center;transition:transform 0.25s ease-in-out;z-index:2;}
.menu-hov-bg::before{--angle:45deg;}
.menu-hov-bg::after{--angle:-45deg;}
#menu-trigger:hover .menu-hov-bg::before,#menu-trigger:hover .menu-hov-bg::after{transform:translate(-50%,-50%) rotate(var(--angle)) scaleX(1);}
.menu-container {display: flex;justify-content: space-around;align-items: center;width: 100vw;height: 10vh;background: #fff;padding: 10px 30px;border: 3px solid #000;border-radius: 0px;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 50px #fff;}
.menu-item {color: #000;text-decoration: none;font-family: 'Teko', sans-serif;font-size: 3rem;font-weight: bolder;letter-spacing: 3px;position: relative;transition: all 0.3s ease;padding: 5px 10px;}
.menu-item:hover .hov-bg::before,.menu-item:hover .hov-bg::after{transform:translate(-50%,-50%) rotate(var(--angle)) scaleX(1);}
.X{position:absolute;inset:0;z-index:1;filter:url(#minFilter);pointer-events:none;}
.X::before,.X::after{content:'';position:absolute;top:50%;left:50%;width:50px;height:15px;background-color:#fff;box-shadow:0 0 2px #fff,0 0 5px #fff,0 0 10px #fff;border:2px solid #fff;transform:translate(-50%,-50%) rotate(var(--angle)) scaleX(1);transform-origin:center;transition:transform 0.25s ease-in-out;z-index:2;}
.X::before{--angle:45deg;}
.X::after{--angle:-45deg;}

/* Custom Scrollbar Container */
.custom-scrollbar { position: fixed; right: 100px; /* Adjust spacing from edge */ top: 50%; transform: translateY(-50%); width: 10px; height: 60vh; /* Length of the scrollbar track */ z-index: 99; mix-blend-mode: difference; /* Ensures it's visible on any background */ display: flex; justify-content: center; display: none; }
/* The Track */
.scroll-track { position: relative; width: 10px; height: 100%; background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
/* The Handle (Thumb) */
.scroll-thumb { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; /* Grabbable area */ height: 30px; /* Size of the handle */ border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; }
/* Inner visual part of the thumb to match your "KABOOS" style */
.thumb-inner { width: 30px; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; filter: url(#minFilter); /* Using your SVG filter */ transition: width 0.3s ease; }
.scroll-thumb:active .thumb-inner { width: 10px; /* Grows when clicked/touched */ }
/* Hide native scrollbar but keep functionality */
body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }
@media (orientation: portrait) { .custom-scrollbar { right: 20px; height: 50vh; /* Smaller on mobile */ display: inline; } }

.loadinger{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#fff;opacity:0;transition:0.5s;}
.before-load .loadinger{opacity:1;}
.progress-text { position: absolute; bottom: 10px; left: 100px; font-family: 'BlackFlag','Teko', "Inter", sans-serif; font-size: 5rem; z-index: 10; color: #000; }
@media (orientation: portrait) { .progress-text {font-size: 2rem; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);} }

@media screen and (max-width:768px){ 
  .menu-container {flex-direction: column; height: 33vh;}
  #menu-trigger {bottom: 40vh;} 
}

@media (orientation: portrait) {
  /*video {display: none;}*/
  .story { font-size: 2rem; }
  .signa {font-size: 50px; letter-spacing: 0px;}
  .item {width: 200px;height: 200px;}
  /*
  .cards {display: none;}
  .footer {display: none;}
  */
  .card {aspect-ratio: 1/5;}
  .card p {font-size: 40px;}
}

@media (max-width: 500px) and (max-height: 800px) { 
  .story { font-size: 1.5rem; }
  #menu-trigger { width: 80px; height: 80px; font-size: 1.5rem; } 
}

@media (orientation: portrait) {
  .LPBGII {
    width: 100vw;
    height: 100dvh; /* Dynamic height for mobile browsers */
    overflow: hidden;
  }

  .LPBGII video {
    /* 1. Swap dimensions so it fills the screen after rotation */
    width: 100vh; 
    height: 100vw;

    /* 2. Rotate and use object-fit to crop any edges */
    object-fit: cover;
    transform: rotate(90deg);

    /* 3. Center it: Use fixed positioning to keep it in the middle */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}