@font-face {
  font-family: "AlphaSmoke";
  src: url("https://res.cloudinary.com/daz8so5gl/raw/upload/v1772455924/AlphaSmoke_oysfhk.TTF")
       format("truetype");
  font-weight: normal;
  font-style: normal;
}

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

/* ==============================
   NEW PAGE (UNDERNEATH)
============================== */

.main-page{
  position: relative;
  height: 100vh;
  background: black;
  overflow: hidden;

  filter:contrast(1.2) saturate(1.1) brightness(1.1);

  transform: translateZ(0);
}


.scene{
  position:absolute;
  width:1920px;
  height:1080px;
  left:50%;
  top:50%;
  transform-origin:center;
  transform:translate(-50%,-50%);
}


.scene-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}



@media (max-width:768px){
  .scene{
    position:absolute;
    width:1920px;
    height:1080px;
    left:50%;
    top:50%;
    transform-origin:center;
    transform:translate(-50%,-50%);
  }
}




.scene-bg-wrap{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}

.scene-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  
  object-fit:contain;
  pointer-events:none;
}
/* ==============================
   MOBILE BACKGROUND (POST-INTRO)
============================== */



/* ==============================
   INTRO (ON TOP)
============================== */

.intro{
  position: fixed;
  inset: 0;

  width:100vw;
  height:100dvh;

  background: #602996;
  z-index: 2;
  overflow: hidden;
  opacity: 1;
}

@media (max-width:768px){
  .intro{
    background: #521f88;
  }
}

/* ==============================
   INTRO VIDEO
============================== */

.intro-video{
  position: fixed;   /* IMPORTANT */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 99999;    /* ABOVE EVERYTHING */
  pointer-events: none;
}

.overlay-video{
  position: absolute;
  bottom: 260px;   /* 🔥 was 160px → move up */
  left: 50%;
  transform: translateX(-55%);
  width: 70vw;
  max-width: 1000px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: contrast(1.25) saturate(1.2) brightness(1.01);
}

@media (max-width:768px){
  .overlay-video{
    bottom: 58dvh;
    transform: translateX(-50%) translateY(50%);
    width: 115vw;
    max-width: none;
  }
}

/* ==============================
   SMOKE LOADING TEXT
============================== */

.smoke-loading{
  position: absolute;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);

  font-family: "AlphaSmoke", serif;
  font-size: 42px;              /* smaller for long text */
  letter-spacing: 0.08em;       /* MUCH tighter */
  text-transform: none;         /* allow normal sentence */
  color: #ffffff;

  z-index: 10;
  pointer-events: none;

  text-align: center;
  max-width: 90vw;              /* prevent overflow */
  line-height: 1.3;

  animation: smokeBreath 8s linear infinite;
}

@media (max-width:768px){
  .smoke-loading{
    bottom: 18dvh;
    font-size: 24px;        /* slightly bigger */
    letter-spacing: 0.07em; /* a bit more air */
    line-height: 1.35;

    max-width: 95vw;        /* 🔥 KEY: allow more width */
    width: 95vw;

    text-align: center;
  }
}


.smoke-loading .dots::after{
  content: '';
  animation: dotAnim 1.6s steps(3,end) infinite;
}

@keyframes smokeBreath{
  0%{
    opacity: 0;
    filter: blur(6px);
    transform: translateX(-50%) translateY(6px);
  }

  5%{
    opacity: 1;
    filter: blur(0px);
    transform: translateX(-50%) translateY(0px);
  }

  96%{
    opacity: 1;
    filter: blur(0px);
    transform: translateX(-50%) translateY(0px);
  }

  100%{
    opacity: 0;
    filter: blur(8px);
    transform: translateX(-50%) translateY(-6px);
  }
}

/* ==============================
   DESKTOP SVG LINKS
============================== */

.desk-link{
  position: absolute;
  z-index: 10;
  display: inline-block;
  text-decoration: none;
}

.desk-link img{
  display: block;
  width: 160px;
  height: auto;
  max-width: none;
 transition: transform 0.2s ease, filter 0.25s ease;
}

@media (hover: hover) and (pointer: fine){

  #pizzaLink:hover ~ #dominosText img{
    transform: translateY(-8px);
  }

  #pizzaLink:hover ~ #dominosText2 img{
    transform: translateY(-8px) rotate(0deg);
  }

  #photoLink:hover ~ #furieTweet img{
    transform: translateY(-8px);
  }

}

  @media (hover: hover) and (pointer: fine){

#photoLink:hover img,
#monitorLink:hover img{
  transform: none;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.8))
          drop-shadow(0 0 20px rgba(255,255,255,0.6));
}

}

  /* radio hover glow */
@media (hover: hover) and (pointer: fine){

  #radioLink:hover img{
    transform: none;
    filter:
      drop-shadow(0 0 10px rgba(255,255,255,0.9))
      drop-shadow(0 0 22px rgba(255,255,255,0.7));
  }

}



/* starting positions */
#dexJar{
  position: absolute;
  top: 426px;
  left: 1712px;
  z-index: 10;
}

#dexJar img{
  width: 130px;
  height: auto;
  
}

#instaJar{
  position: absolute;
  top: 433px;
  left: 1578px;
  z-index: 10;
}

#instaJar img{
  width: 120px;
  height: auto;
 
}

#xJar{
  position: absolute;
  top: 439px;
  left: 1457px;
  z-index: 10;
}

#xJar img{
  width: 110px;
  height: auto;
 
}

#tgJar{
  position: absolute;
  top: 446px;
  left: 1344px;
  z-index: 10;
}

#tgJar img{
  width: 100px;
  height: auto;
 
}

#radioLink{
  position: absolute;
  top: 696px;
  left: 304px;
  z-index: 10;
}

#radioLink img{
  width: 265px;
  height: auto;
  transform: none;
}

#monitorLink{
  position: absolute;
  top: 383px;
  left: 512px;
  z-index: 9999;
}

#monitorLink img{
  width: 225px;
  height: auto;
  transform: none;
}

#notepadLink{
  position: absolute;
  top: 393px;
  left: 114px;
  z-index: 10;
}

#notepadLink img{
  width: 110px;
  height: auto;
}

#pizzaLink{
  position: absolute;
  top: 731px;
  left: 1315px;
  z-index: 10;
}

#pizzaLink img{
  width: 305px;
  height: auto;
  transform: translateY(0);
}

#photoLink{
  position: absolute;
  top: 640px;
  left: 24px;
  z-index: 20;
}

#photoLink img{
  width: 200px;
  height: auto;
  transform: rotate(0deg);
}

#dominosText{
  position: absolute;
  top: 750px;
  left: 1498px;
  z-index: 10;
}

#dominosText img{
  width: 80px;
  height: auto;
}

#dominosText2{
  position: absolute;
  top: 692px;
  left: 1240px;
  z-index: 10;
}

#dominosText2 img{
  width: 465px;
  height: auto;
  transform: rotate(0deg);
}

/* FIX: allow hover to pass through */
#dominosText,
#dominosText2{
  pointer-events: none;
}

#furieTweet{
  position: absolute;
  top: 673px;
  left: 46px;
  z-index: 10;
}

#furieTweet img{
  width: 145px;
  height: auto;
  transform: none;
}



#furieTweet img{
  transform: none !important;
  filter: none !important;
}

#zeusLink{
  position: absolute;
  top: 777px;
  left: 1631px;
  z-index: 10;
}

#zeusLink img{
  width: 280px;
  height: auto;
  transform: rotate(-18deg);
}

#bigbudNote{
  position: absolute;
  top: 400px;
  left: 365px;
  z-index: 10;
}



#bigbudNote img{
  width:105px;
  height:auto;
transform: rotate(-2deg);
  filter: contrast(0.83) saturate(0.91) brightness(0.91);
}



#smokeGif{
  position:absolute;
  top:563px;
  left:443px;
  width:430px;
  height:auto;
  z-index:99999;
  pointer-events:none;
}

/* ==============================
   MOBILE BIGBUD CHARACTER
============================== */

#mobileBud{
  display: none !important;
}

/* ==============================
   INTRO VERSION SWITCH
============================== */

.mobile-intro{
  display:none;
}

@media (max-width:768px){
  .desktop-intro{
    display:none;
  }

  .mobile-intro{
    display:block;
  }
}



#nowPlaying{
  position: absolute;
  bottom: 0px;
  left: 40px;
  z-index: 9999;



  font-family: "AlphaSmoke", serif;
  font-size: 32px;
  line-height: 1.3;

  color: white;
  pointer-events: none;

  transform: translateZ(0);
  will-change: transform;
}


.radioHelp{
  display:block;
bottom: 1px;

  font-family: "AlphaSmoke", serif;

  font-size:22px;
  opacity:0.8;
}

/* desktop hover lift only */
@media (hover: hover) and (pointer: fine){

  .desk-link:hover img{
    transform: translateY(-8px);
  }

  /* ensure pizza always lifts */
  #pizzaLink:hover img{
    transform: translateY(-8px);
  }

}





@media (max-width:768px){

  .scene-bg{
  transform:scale(1.1);
  transform-origin:center;
}

#smokeGif{
  top:505px;
  left:675px;
  width:260px;
  z-index: 99999
}



#dexJar{
    top: 416px;
  left: 1197px;
}
#dexJar img{ width:80px; }

#instaJar{
   top: 421px;
  left: 1122px;
}
#instaJar img{ width:70px; }

#xJar{
    top: 429px;
  left: 1057px;
}
#xJar img{ width:60px; }

#tgJar{
  top: 431px;
  left: 995px;
}
#tgJar img{ width:55px; }

#monitorLink{
    top: 403px;
  left: 730px;
}
#monitorLink img{ width:132px; }

#notepadLink{
    top: 395px;
  left: 660px;
}
#notepadLink img{ width:45px; }

#radioLink{
    top: 636px;
  left: 698px;
}
#radioLink img{ width:125px; }

#pizzaLink{
   top: 624px;
  left: 1061px;
}
#pizzaLink img{ width:160px; }

#photoLink{
 
  top: 551px;
  left: 653px;
  z-index: 20;
}

#photoLink img{
  width: 90px;
}

#furieTweet{
  
  top: 567px;
  left: 663px;
  z-index: 10;
}
#furieTweet img{ width:65px; }


/* ✅ NOW THESE ARE MOBILE ONLY */

#dominosText{
 
  top: 633px;
  left: 1154px;
  z-index: 10;
}

#dominosText img{
  width: 47px;
}

#dominosText2{
 
  top: 605px;
  left: 1025px;
  z-index: 10;
}

#dominosText2 img{
  width: 240px;
  transform: rotate(0deg);
}


#zeusLink{
  top: 823px;
  left: 861px;
}

#zeusLink img{
  width: 200px;
}

#bigbudNote{
  top:343px;
  left:779px;
}

#bigbudNote img{
  width:55px;
}


}   /* ✅ MOBILE BLOCK ENDS HERE */

.desk-link{
  -webkit-tap-highlight-color: transparent;
}


@media (max-width:768px){

  .desk-link{
    touch-action: manipulation;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
  }

}


@media (hover: none) {

  .desk-link:hover img{
    transform: none !important;
  }

}

#sizePlus,
#sizeMinus{
  font-size:18px;
  width:36px;
  height:36px;
  border:none;
  border-radius:6px;
  background:#222;
  color:white;
  margin-right:6px;
}

.social-section{
  position:relative;
  background:#602996;
  padding:40px 40px 55px;
}

.social-title{
  text-align:center;
  color:white;
  font-family:"AlphaSmoke", serif;
  font-size:64px;
  margin-bottom:80px;

  text-shadow: 0 6px 20px rgba(0,0,0,0.7); /* ✅ ADD THIS */
}

.social-grid{
  max-width:1200px;
  margin:auto;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.social-box{
  background:black;
  border-radius:16px;
  height:160px;
  border:2px solid #a3e900;

  display:flex;
  align-items:center;
  justify-content:center;
}

.social-box img{
  max-width:70%;
  max-height:70%;
  object-fit:contain;
}

.social-box a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.dex-tools{
  max-width:90%;
}

@media (max-width:768px){

.social-box img[src*="7.webp"]{
  max-width:120%;
  max-height:120%;
}

}


@media (max-width:768px){


  
.social-grid{
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.social-box{
  height:110px;
}

.social-title{
  font-size:44px;
}

}

.ticker{
  width:100%;
  background:black;
  overflow:hidden;
  padding:16px 0;   /* thinner strip */
  display:flex;
  align-items:center;
}

.ticker-track{
  display:flex;
  gap:120px;
  width:max-content;
animation:tickerMove 28s linear infinite;
}

@keyframes tickerMove{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

.ticker-track span{
  font-family:"Space Grotesk", sans-serif;
  font-size:38px;
  font-weight:600;
  color:white;
  white-space:nowrap;
  letter-spacing:0.08em;
}

@keyframes scrollTicker{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

body.intro-lock{
  overflow:hidden;
}
@media (hover: hover) and (pointer: fine){

  #bigbudNote:hover img{
    transform: translateY(-8px) rotate(-2deg);
  }

}

/* ==============================
   SMOKE OVERLAY
============================== */
#introSmoke{
 position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 99999;

  display: none;
  pointer-events: none;
}

/* ==============================
   ABOUT PAGE
============================== */
.about-page{
  position: fixed;
  inset: 0;
  background: #602996;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;

  z-index: 10;
  transition: opacity 0.6s ease;
}

.about-page.active{
  opacity: 1;
  pointer-events: auto;
}

.about-inner{
  max-width: 800px;
  padding: 40px;

  text-align: center;

  font-family: "Space Grotesk", sans-serif;
  color: white;
}

.about-bud{
     animation: budFloat 2s ease-in-out infinite;
}

.about-inner h1{
  font-family: "AlphaSmoke", serif;
  font-size: 78px;
  margin-bottom: 30px;
  color: #fff;
}

.about-inner p{
  font-size: 28px;
  line-height: 1.6;
}

.about-inner p{
  font-size: 22px;
  line-height: 1.6;
}

.back-btn{
  position:absolute;
  top:40px;
  left:40px;
  z-index:10;

  font-family:"AlphaSmoke", serif;
  font-size:22px;

  background:black;
  color:white;
  border:2px solid #a3e900;
  padding:10px 16px;
  border-radius:8px;

  cursor:pointer;
}

.back-btn:hover{
  background:#111;
}

#aboutPage h1 {
  font-family: "AlphaSmoke", serif !important;

  font-size: 64px;
  color: #fff;
}

#aboutPage {
  font-size: 22px;
}

#aboutPage p {
  font-size: 22px;
}
/* FORCE BIGGER ABOUT TEXT */
#aboutPage .about-inner h1{
  font-size: 96px !important;
  text-shadow: 0 6px 20px rgba(0,0,0,0.7);
}

#aboutPage .about-inner p{
  font-size: 30px !important;
}

@media (max-width:768px){
  #aboutPage .about-inner h1{
    font-size: 48px !important;
    text-shadow: 0 4px 12px rgba(0,0,0,0.7);
  }


  #aboutPage .about-inner p{
    font-size: 20px !important;
  }

}

@media (min-width:769px){

  #aboutPage .about-inner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 150px;
    max-width: 1400px;
  }

  .about-bud{
    width: 450px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.65));
  
  }

  /* ✅ NOW INSIDE MEDIA QUERY */
  .about-text{
    display: flex;
    flex-direction: column;
  } 

  .about-text h1{
    margin-bottom: 20px;
    text-align: left;
  }

  .about-text p{
    text-align: left;
  }

}

@keyframes budFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}

@media (max-width:768px){

  #aboutPage .about-inner{
    padding: 18px 16px;
    max-width: 92vw;
  }

  #aboutPage .about-inner h1{
    font-size: 34px !important;   /* ⬅️ smaller */
    margin-bottom: 14px;
  }

  #aboutPage .about-inner p{
    font-size: 16px !important;   /* ⬅️ key fix */
    line-height: 1.45;
  }

}



#aboutPage .back-btn{
  position: fixed;   /* instead of absolute */
  top: 40px;
  left: 40px;
  transform: none !important;
}

@media (max-width:768px){

  .about-bud{
    width: 140px !important;   /* 👈 smaller */
    height: auto;
    display: block;
   margin: 80px auto 0px;
  }

}

@media (min-width:769px){
  #aboutPage .about-inner{
    transform: translateX(-80px); /* adjust this */
  }
}

body.about-lock{
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

@media (min-width:769px){
  #aboutPage .back-btn{
    font-size: 28px;
    padding: 14px 22px;
  }
}
#aboutBudImage{
  display:none;
}

@media (max-width:768px){
  #aboutBudVideo{ display:none; }
  #aboutBudImage{ display:block; }
}

/* mobile = show image only */
.desktop-bud { display: none; }
.mobile-bud { display: block; }

/* desktop = show video only */
@media (min-width: 769px){
  .desktop-bud { display: block; }
  .mobile-bud { display: none; }
}
.about-bud {
   filter: drop-shadow(0 8px 18px rgba(0,0,0,0.65));
}
#radioLink{
  pointer-events: none;
}

#radioLink img{
  transform: none !important;
  filter: none !important;
}

#radioLink:hover img{
  transform: none !important;
  filter: none !important;
}