* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

#stageWrap{
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}

#stage{
  position:relative;
  width:100vw;
  height:56.25vw;
  max-height:100vh;
  max-width:177.78vh;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#000;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.bg { z-index: 1; }

.right-curtain {
  z-index: 2;
  transition: transform 1.8s ease-in-out;
}

.left-curtain {
  z-index: 3;
  transition: transform 1.8s ease-in-out;
}

.overlay { z-index: 4; }

#stage.open .left-curtain {
  transform: translateX(-100%);
}

#stage.open .right-curtain {
  transform: translateX(100%);
}

#enterBtn {
  position: absolute;
  z-index: 30;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 26px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 16px;
  letter-spacing: .5px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

#enterBtn:hover {
  background: rgba(120,0,0,.75);
}

/* SIGN */
#pageSign{
  position:absolute;
  z-index:3;
  width:13%;
  max-width:none;
  top:-35%;
  left:30%;
  transform:translateX(-50%);
  transition: top 1.8s ease-in-out;
  pointer-events:none;
}

/* HOME INTRO */
#introText{
  position:absolute;
  z-index:4;
  top:17%;
  left:43%;
  width:22%;
  max-width:none;
  padding:1.2% 1.5%;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(3px);
  border:1px solid rgba(255,215,140,.15);
  border-radius:12px;
  color:#f3d48a;
  font-size:1rem;
  line-height:1.6;
  letter-spacing:.3px;
  text-shadow:0 0 10px rgba(0,0,0,.8);
  opacity:0;
  transition: opacity 1.5s ease;
  pointer-events:none;
}

/* MENU HOTSPOTS */
#menuLinks{
  position:absolute;
  inset:0;
  z-index:25;
  transform:translate(10.3%, -13.2%);
  pointer-events:none;
}

.menuLink{
  position:absolute;
  display:block;
  width:6.5%;
  height:3.3%;
  cursor:pointer;
  pointer-events:auto;

}

.bio{ left:11%; top:42.2%; }
.videos{ left:11%; top:46.3%; }
.albums{ left:11%; top:50.6%; }
.photos{ left:11%; top:54.3%; }
.contact{ left:11%; top:58.2%; }

/* SOCIAL HOTSPOTS */
#socialLinks{
  position:absolute;
  inset:0;
  z-index:26;
  transform:translate(-11.7%, -13%);
  pointer-events:none;
}

.socialLink{
  position:absolute;
  display:block;
  width:3%;
  height:5%;
  cursor:pointer;
  pointer-events:auto;

}

.instagram{ right:11%; top:36%; }
.threads{ right:11%; top:42.5%; }
.facebook{ right:11%; top:48.8%; }
.twitter{ right:11%; top:54.9%; }
.tiktok{ right:11%; top:60.7%; }
.youtube{ right:11%; top:67.3%; }

/* SNOWED IN BUTTON */
#snowedinBtn{
  position:absolute;
  z-index:27;
  top:5.5%;
  right:1.5%;
  width:4.2%;
  min-width:70px;
  max-width:95px;
  display:block;
  transition: transform .3s ease, opacity .3s ease;
}

#snowedinBtn img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  box-shadow:0 0 25px rgba(0,0,0,.45);
}

#snowedinBtn:hover{
  transform:scale(1.05);
  opacity:.9;
}

/* FOOTER */
#footerLeft,
#footerRight{
  position:absolute;
  z-index:28;
  bottom:2.4%;
  color:rgba(255,255,255,.65);
  font-size:.75rem;
  letter-spacing:.4px;
  text-shadow:0 0 10px rgba(0,0,0,.8);
}

#footerLeft{ left:1.5%; }
#footerRight{ right:1.5%; }

#footerRight a{
  color:#d8b36a;
  text-decoration:none;
  transition: color .3s ease;
}

#footerRight a:hover{ color:#fff2c7; }

/* BIO PAGE */
#bioText{
  position:absolute;
  z-index:4;
  top:13%;
  left:40%;
  width:34%;
  max-width:none;
  max-height:48%;
  overflow-y:auto;
  padding:1.5% 1.8%;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,215,140,.18);
  border-radius:14px;
  color:#f3d48a;
  font-size:.88rem;
  line-height:1.55;
  letter-spacing:.2px;
  text-shadow:0 0 10px rgba(0,0,0,.9);
  opacity:0;
  transition:opacity 1.5s ease;
  pointer-events:auto;
}

#bioText h1{
  margin:0 0 12px 0;
  font-size:1.35rem;
  letter-spacing:1px;
  color:#fff0b8;
}

#bioText p{
  margin:0 0 14px 0;
}

/* ALBUMS PAGE */
#albumLinks{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}

.album{
  position:absolute;
  display:block;
  width:8%;
  pointer-events:auto;
  transition: transform .35s ease, filter .35s ease;
}

.album img{
  width:100%;
  display:block;
  border-radius:10px;
  box-shadow:
    0 0 35px rgba(255,190,80,.25),
    0 0 60px rgba(0,0,0,.6);
}

.album:hover{
  transform:scale(1.08) rotate(-2deg);
  filter:brightness(1.08);
}

.album1{
  right:40%;
  top:15%;
  transform:rotate(-7deg);
}

.album2{
  right:28%;
  top:24%;
  transform:rotate(6deg);
}

.album3{
  right:30%;
  top:44%;
  transform:rotate(2deg);
}

/* VIDEOS PAGE */
#projectorTop{
  position:absolute;
  z-index:2;
  width:30%;
  max-width:none;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
}

#projectorScreen{
  position:absolute;
  z-index:1;
  width:28%;
  max-width:none;
  top:-420%;
  left:50%;
  transform:translateX(-50%);
  transition:top 2.2s ease-in-out;
  pointer-events:none;
}

#videoFrame{
  position:absolute;
  z-index:16;
  width:25.5%;
  aspect-ratio:16 / 9;
  top:18.4%;
  left:50%;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity 1s ease;
  background:#000;
}

#videoFrame iframe{
  width:100%;
  height:100%;
  display:block;
}

/* PHOTOS PAGE */
#photosText{
  position:absolute;
  z-index:10;
  top:17%;
  left:50%;
  transform:translateX(-50%);
  width:26%;
  max-width:380px;
  min-height:23%;
  padding:2.2% 1.8%;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(4px);
  border-radius:16px;
  border:1px solid rgba(255,215,140,.18);
  color:#f3d48a;
  font-size:1.05rem;
  line-height:1.7;
  text-align:center;
  text-shadow:0 0 10px rgba(0,0,0,.9);
  opacity:0;
  transition:opacity 1.5s ease;
  pointer-events:none;
}

#photosText p{
  margin:0 0 12% 0;
}

.photoSocialButtons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  margin-top:10%;
}

.photoSocialButtons a{
  display:block;
  width:22%;
  pointer-events:auto;
  transition: transform .35s ease, filter .35s ease;
}

.photoSocialButtons a:hover{
  transform:scale(1.08);
  filter:brightness(1.12);
}

.photoSocialButtons img{
  width:100%;
  display:block;
  filter:drop-shadow(0 0 20px rgba(255,210,100,.35));
}

/* CONTACT PAGE */
#contactText{
  position:absolute;
  z-index:10;
  top:17%;
  left:55%;
  transform:translateX(-50%);
  width:26%;
  max-width:380px;
  min-height:23%;
  padding:2.2% 1.8%;
  background:rgba(0,0,0,.50);
  backdrop-filter:blur(4px);
  border-radius:16px;
  border:1px solid rgba(255,215,140,.18);
  color:#f3d48a;
  font-size:1.05rem;
  line-height:1.7;
  text-align:center;
  text-shadow:0 0 10px rgba(0,0,0,.9);
  opacity:0;
  transition:opacity 1.5s ease;
  pointer-events:none;
}

#contactText p{
  margin:0 0 12% 0;
}

.contactSocialButton{
  display:flex;
  justify-content:center;
  align-items:center;
}

.contactSocialButton a{
  display:block;
  width:22%;
  pointer-events:auto;
  transition: transform .35s ease, filter .35s ease;
}

.contactSocialButton a:hover{
  transform:scale(1.08);
  filter:brightness(1.12);
}

.contactSocialButton img{
  width:100%;
  display:block;
  filter:drop-shadow(0 0 20px rgba(255,210,100,.35));
}


#exitLink{
  position:absolute;
  z-index:26;

  left:3.2%;
  top:3%;

  width:3.5%;
  height:5%;

  cursor:pointer;

  /* TEMP DEBUG 
  background:rgba(255,0,255,.35);
  border:1px solid magenta;
  */
}


.stageDust{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,220,150,.35) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 2px);
  background-size:70px 70px, 110px 110px;
  animation:dustMove 18s linear infinite;
  opacity:.28;
}

@keyframes dustMove{
  from{ background-position:0 0, 0 0; }
  to{ background-position:160px -220px, -180px 160px; }
}

.stageLight{
  position:absolute;
  z-index:1;
  pointer-events:none;

  width:3%;
  height:70%;

  top:16.5%;

  opacity:.11;

  background:linear-gradient(
    180deg,
    rgba(255,220,120,.75),
    rgba(255,220,120,.14) 38%,
    transparent 100%
  );

  filter:blur(12px);
  transform-origin:top center;

  animation:lightFlicker 1.8s steps(1) infinite;
}

.lightOne{
  left:33%;
  transform:rotate(8deg);
}

.lightTwo{
  right:33%;
  top:16.5%;
  transform:rotate(-18deg);
  animation-delay:.7s;
}

@keyframes lightFlicker{
  0%{ opacity:.08; }
  8%{ opacity:.18; }
  10%{ opacity:.04; }
  13%{ opacity:.16; }
  26%{ opacity:.10; }
  28%{ opacity:.22; }
  31%{ opacity:.06; }
  45%{ opacity:.14; }
  70%{ opacity:.09; }
  72%{ opacity:.20; }
  100%{ opacity:.12; }
}


.mobileOnly{
  display:none !important;
}

.desktopOnly{
  display:block !important;
}

@media (orientation:portrait){

  .desktopOnly{
    display:none !important;
  }

  .mobileOnly{
    display:block !important;
  }

}


@media (orientation:portrait){

  #stage{
    width:100vw;
    height:177.78vw;
    max-width:none;
    max-height:none;
  }
  
  
  .overlay.mobileOnly{
  width:100%;
  height:auto;
  left:0;
  top:0;
}

.mobileOnly.layer{
  width:100%;
  height:auto;
}

#pageSign{
  width:38%;
  left:50%;

}



}

@media (orientation:portrait){

  #stageWrap{
    align-items:flex-start;
  }

  #stage{
    margin-top:0;
    top:0;
  }

}

@media (orientation:portrait){

  #snowedinBtn{
    display:none;
  }

}

@media (orientation:portrait){

/*  .menuLink{
    background:rgba(255,0,0,.25);
    border:1px solid red;
  }
*/

#socialLinks{
  transform:none;
  z-index:40;
}

.socialLink{
  width:10%;
  height:5.5%;
}

/* INSTAGRAM */
.instagram{
  left:6%;
  top:89.5%;
}

/* THREADS */
.threads{
  left:21.5%;
  top:89.5%;
}

/* FACEBOOK */
.facebook{
  left:37.5%;
  top:89.5%;
}

/* X */
.twitter{
  left:53.5%;
  top:89.5%;
}

/* TIKTOK */
.tiktok{
  left:69%;
  top:89.5%;
}

/* YOUTUBE */
.youtube{
  left:85%;
  top:89.5%;
}

/*  .socialLink{
  background:rgba(0,255,255,.25);
  border:1px solid cyan;
} */

}

@media (orientation:portrait){

  #menuLinks{
    transform:none;
    z-index:40;
  }

  .menuLink{
    width:15%;
    height:3.5%;
  }

  .bio{
    left:2%;
    top:3.5%;
  }

  .videos{
    left:18%;
    top:3.5%;
  }

  .albums{
    left:38%;
    top:3.5%;
  }

  .photos{
    left:60%;
    top:3.5%;
  }

  .contact{
    left:80%;
    top:3.5%;
  }
  
  
  
  #introText{
  top:40%;
  left:70%;
  width:60%;
  font-size:.9rem;
  padding:16px 18px;
  transform:translateX(-50%);
}


#footerLeft,
#footerRight{
  bottom:1%;
  font-size:.58rem;
}


#enterBtn{
  bottom:50%;
  left:50%;
  transform:translateX(-50%);
}


#exitLink{
  position:absolute;
  z-index:999;

  left:2.5%;
  top:15.5%;

  width:12%;
  height:5%;

 /* background:rgba(255,0,255,.45);
  border:2px solid magenta; */
}



#snowedinBtn{
  display:none !important;
}

#snowedinMobileLink{
  display:block !important;

  position:absolute;
  z-index:999;

  left:39%;
  top:78%;

  width:22%;
  height:10%;

/*  background:rgba(0,255,0,.45);
  border:2px solid lime;  */
}



.stageLight{
  width:5%;
  height:55%;
  top:14%;
}

.lightOne{
  left:4%;
   transform:rotate(55deg);
}

.lightTwo{
  right:3%;
  transform:rotate(-55deg);
}



#bioText{
  top:28%;
  left:40%;
  width:60%;
  max-width:none;
  max-height:30%;
  padding:18px 20px;
  font-size:.78rem;
  line-height:1.45;
  transform:translateX(-50%);
}

#bioText h1{
  font-size:1rem;
}



#projectorScreen{
  width:78%;
  top:-47%;
  left:57%;
  transform:translateX(-50%);
}

#videoFrame{
  width:70%;
  height:24%;
  top:20.2% !important;
  left:57% !important;
  transform:translateX(-50%);
}

.mobileScreenFinal{
  top:2.8% !important;
}


}


#snowedinMobileLink{
  display:none;
}



@media (orientation:portrait){

  .album{
    width:18%;
  }

  .album1{
    right:6.6%;
    top:16%;
  }

  .album2{
    right:32%;
    top:27.5%;
  }

  .album3{
    right:8%;
    top:36%;
  }
  
  

  
  
  #photosText{
  top:30%;
  left:35%;
  width:65%;
  min-height:auto;
  padding:20px 18px;
  font-size:.9rem;
  line-height:1.5;
  transform:translateX(-50%);
}

#photosText p{
  margin:0 0 22px 0;
}

.photoSocialButtons{
  gap:22px;
  margin-top:18px;
}

.photoSocialButtons a{
  width:20%;
}



#contactText{
  top:28%;
  left:70%;
  width:50%;
  min-height:auto;

  padding:20px 18px;

  font-size:.9rem;
  line-height:1.5;

  transform:translateX(-50%);
}

#contactText p{
  margin:0 0 22px 0;
}

.contactSocialButtons{
  margin-top:18px;
}

.contactSocialButtons a{
  width:20%;
}

}

.album img{
  width:100%;
  display:block;

  border-radius:10px;

  box-shadow:
    0 0 18px rgba(255,210,90,.45),
    0 0 40px rgba(255,190,40,.18);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.album:hover img{
  transform:scale(1.06);

  box-shadow:
    0 0 22px rgba(255,220,110,.7),
    0 0 55px rgba(255,190,40,.35);
}


#albumLinkBar{
  position:absolute;
  left:50%;
  bottom:30%;

  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 18px;

  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,210,90,.22);
  border-radius:16px;

  z-index:25;

  color:#f3d37a;
  font-size:.95rem;
}

#albumLinkBar img{
  width:34px;
  height:auto;

  transition:transform .25s ease;
}

#albumLinkBar a:hover img{
  transform:scale(1.08);
}


@media (orientation:portrait){

  #albumLinkBar{
    width:75% !important;
    bottom:23% !important;
    left:50% !important;

    transform:translateX(-50%) !important;

    font-size:.72rem !important;
    text-align:center;

    gap:10px;
    padding:10px 14px;
  }

  #albumLinkBar img{
    width:28px !important;
  }
  
  
  #videoLinkBar{
  width:82%;
  bottom:23%;

  font-size:.62rem;
  text-align:center;

  gap:10px;
  padding:8px 12px;
}

#videoLinkBar img{
  width:35px;
}

}

#albumLinkBar{
  opacity:0;
  transition:
    opacity .8s ease,
    transform .35s ease;
}



#videoLinkBar{
  position:absolute;

  left:50%;
  bottom:29%;

  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 18px;

  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,210,90,.22);
  border-radius:16px;

  z-index:25;

  color:#f3d37a;
  font-size:.95rem;

  opacity:0;

  transition:
    opacity .8s ease,
    transform .35s ease;
}

#videoLinkBar img{
  width:34px;
  height:auto;

  transition:transform .25s ease;
}

#videoLinkBar a:hover img{
  transform:scale(1.08);
}


@media (orientation:portrait){

  #videoLinkBar{
    width:86% !important;
    bottom:25% !important;
    font-size:.58rem !important;
    padding:8px 12px !important;
  }

  #videoLinkBar img{
    width:28px !important;
  }

}


@media (orientation:portrait){

  body.videosPage #pageSign{
    display:none;
  }

}




@media (orientation:landscape) and (max-height:700px){

  #bioText{
    width:28%;
    font-size:.5rem;
    max-height:58%;
  }

  #photosText{
    width:22%;
    font-size:.7rem;
  }

  #contactText{
    width:22%;
    font-size:.7rem;
  }
  
    #albumLinkBar{
    width:45%;
    font-size:.7rem;
    bottom: 10%;
  }
  
      #videoLinkBar{
    width:45%;
    font-size:.7rem;
    bottom: 10%;
  }

  #introText{
    width:26%;
    font-size:.5rem;
  }
  
  #bioText h1{
  font-size:1rem;
  line-height:1.1;
   margin-bottom:10px;
}

}