*{
  margin: 0;
  box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    background-color:#fdfefe;

  }

/* Small-screen warning -------------------------------------------------------------------------*/





#small-screen-warning{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;pointer-events:none}
#small-screen-warning .warning-inner{display:inline-flex;align-items:center;justify-content:center;max-width:80vw;background:rgba(255,255,255,0.92);color:#111;font-size:18px;font-weight:600;text-align:center;padding:12px 18px;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,0.12);pointer-events:none}

@media (max-width: 1414px), (max-height: 189px){
  #small-screen-warning{display:block}
}






  /* PAGE 1- Home Page Portfolio -----------------------------------------------------------------------------*/

  
  
  
  
  
  .HomePage {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    min-height: 100vh;
    box-sizing: border-box;
  }
  
  .PortfolioTitle {
    position: absolute;
    left: 80px;
    top: 550px;
    width: 1300px;
    z-index: 2;
  }



 
 
 
 
 
 /* Nav Bar-------------------------------------------------------------------------------------------------*/
 
 
 
 
 
 nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
  }

 
  .nav-left,
  .nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .nav-left {
    justify-content: flex-start;
  }

  .nav-right {
    justify-content: flex-end;
    margin-left: auto; /
  }

  .NavBarImage {
    height: 60px; 
    margin: 0 20px; 
    cursor: pointer;
    transition: transform 0.3s ease;
  }

 

  .NavBarImage:not(.NavLogo) {
    height: 28px;
    margin: 0 10px;
  }

  .NavAbout {
  
    position: absolute;
    left: 47%;
    top: 60%;
    --nav-x: -420px; 
    --nav-y: -50%;   
    transform: translateX(var(--nav-x)) translateY(var(--nav-y));
    will-change: transform;
    transition: transform 200ms cubic-bezier(.2,.9,.3,1), box-shadow 160ms ease;
    z-index: 6;
    pointer-events: auto;
  }


 
  .NavWork {

    position: absolute;
    left: 50%;
    top: 60%; 
    --nav-x: 350px; 
    --nav-y: -50%;
    transform: translateX(var(--nav-x)) translateY(var(--nav-y));
    will-change: transform;
    transition: transform 200ms cubic-bezier(.2,.9,.3,1), box-shadow 160ms ease;
    z-index: 6;
    pointer-events: auto;
  }


.NavBarImage.NavAbout:hover,
.NavBarImage.NavAbout:focus-visible {
  transform: translateX(var(--nav-x)) translateY(calc(var(--nav-y) - 4px)) scale(1.06);
  box-shadow: none;
  z-index: 8; 
}

.NavBarImage.NavWork:hover,
.NavBarImage.NavWork:focus-visible {
  transform: translateX(var(--nav-x)) translateY(calc(var(--nav-y) - 4px)) scale(1.06);
  box-shadow: none;
  z-index: 8; 
}


.NavBarImage.NavAbout:focus-visible,
.NavBarImage.NavWork:focus-visible {

  outline: none;
  box-shadow: none;
}


.NavLogo {
  box-shadow: none !important;
}


  .NavLogo {
    position: absolute;
    left: 50%;
    top: calc(50% + 12px); 
    transform: translate(-50%, -50%);
    margin: 0;
    height: 60px; 
    pointer-events: none; 
    z-index: 5; 
    transition: transform 180ms ease;
  }
 

 



/* About me page ----------------------------------------------------------------------------------*/

  





.AboutPage {
        position: relative;
        width: 1400px;
        height: 1000px;
        
    }
    
   .AboutMeTitle {
        position : absolute ;
        left : 120px;
        top : 1200px;
        width : 700px;
        z-index: 2;
    
    } 

    .AboutMeImage {
        position : absolute ;
        left : 1000px;
        top : 1020px;
        width : 400px;
        z-index: 2;
        font-family: 'Arial', sans-serif;
        font-size: 18px;
        line-height: 1.6;
        color: #333333;
   
    scroll-margin-top: 96px; 
    
    }

.AboutMeText {
        position : absolute ;
        left : 120px;
        top : 1050px;
        width : 400px;
        z-index: 2;
    
    } 

/* Reveal animation for AboutMeText: slide in from left ----------------------------------------*/




.AboutMeText,
.AboutMeTitle{
  transform: translateX(-40px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.2,.9,.3,1), opacity 420ms ease;
}
.AboutMeText.in-view,
.AboutMeTitle.in-view{
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .AboutMeText, .AboutMeText.in-view, .AboutMeTitle, .AboutMeTitle.in-view{ transition: none; transform: none; opacity: 1; }
}


.AboutMeImage{
  transform: translateX(40px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.2,.9,.3,1), opacity 420ms ease;
}


.no-focus-outline:focus{ outline: none !important; box-shadow: none !important; }
.AboutMeImage.in-view{
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .AboutMeImage, .AboutMeImage.in-view{ transition: none; transform: none; opacity: 1; }
}



/* Digital Product Page------------------------------------------------------------------*/

/* Static positioning for Brief, Solution, Audience and Problem (no animations) ------------------------------------------------------------------*/

.BriefDescription{
  position: absolute;
  left: 823px;
  top: 1375px;
  width: 560px;
  z-index: 2;
}


.ProblemStatement{
  position: absolute;
  left: 85px;
  top: 1375px;
  width: 600px;
  z-index: 2;
}

.TheBrief{
  position: absolute;
  left: 820px;
  top: 1175px;
  width: 340px;
  z-index: 2;
}



.TheProblem{
  position: absolute;
  left: 90px;
  top: 1180px;
  width: 530px;
  z-index: 2;
}

.TheSolution{
  position: absolute;
  left: 85px;
  top: 1800px;
  width: 600px;
  z-index: 2;
}

.SolutionSentence{
  position: absolute;
  left: 85px;
  top: 1600px;
  width: 500px;
  z-index: 2;
}

.IntendedAudience{
  position: absolute;
  left: 820px;
  top: 1600px;
  width: 500px;
  z-index: 2;
}

.AudienceSentence{
  position: absolute;
  left: 820px;
  top: 1800px;
  width: 600px;
  z-index: 2;
}





/* Project Page --------------------------------------------------------------------------*/

.ProjectPage {
    position: relative;
    width: 1400px;
    height: 1000px;
    
  }
  
 .DigitalProductBlack {
      position : absolute ;
      left : 70px;
      top : 1700px;
      width : 400px;
      z-index: 2;
  
  } 


/* Project Animation --------------------------*/





.DigitalProductBlack,
.FilmDesign,
.DSK,
.GameDesign,
.NoSurprises,
.TitleSequence {
  filter: grayscale(100%);
  transition: filter 220ms ease;
  cursor: pointer;
  pointer-events: auto; 
}


.colour-link{ display: none; }


.DigitalProductBlack:hover,
.FilmDesign:hover,
.DSK:hover,
.GameDesign:hover,
.NoSurprises:hover,
.TitleSequence:hover,
.DigitalProductBlack:focus-visible,
.FilmDesign:focus-visible,
.DSK:focus-visible,
.GameDesign:focus-visible,
.NoSurprises:focus-visible,
.TitleSequence:focus-visible {
  filter: none; 
  z-index: 10; 
}



/* Project Images --------------------------*/


  .FilmDesign {
    position : absolute ;
    left : 560px;
    top : 1700px;
    width : 400px;
    z-index: 2;

}

.DSK {
    position : absolute ;
    left : 1050px;
    top : 1700px;
    width : 400px;
    z-index: 2;

}

.GameDesign {
    position : absolute ;
    left : 70px;
    top : 2300px;
    width : 400px;
    z-index: 2;

}

.NoSurprises {
    position : absolute ;
    left : 560px;
    top : 2300px;
    width : 400px;
    z-index: 2;

}

.TitleSequence {
    position : absolute ;
    left : 1050px;
    top : 2300px;
    width : 400px;
    z-index: 2;

}

.PreviousProjects {
    position : absolute ;
    left : 100px;
    top : 1570px;
    width : 600px;
    z-index: 2;
  scroll-margin-top: 96px;

}

.PreviousWork {
    position : absolute ;
    left : 960px;
    top : 1560px;
    width : 370px;
    z-index: 2;

}

/* Animation for Project and Work Headings */




.PreviousProjects{
  transform: translateX(-40px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.2,.9,.3,1), opacity 420ms ease;
}
.PreviousProjects.in-view{ transform: translateX(0); opacity: 1; }

.PreviousWork{
  transform: translateX(40px);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.2,.9,.3,1), opacity 420ms ease;
}
.PreviousWork.in-view{ transform: translateX(0); opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .PreviousProjects, .PreviousProjects.in-view, .PreviousWork, .PreviousWork.in-view{ transition: none; transform: none; opacity: 1; }
}


.site-frame{
 
  width: 1440px;      
  max-width: 1440px;
  margin: 0 auto;     
  position: relative; 
}

@media (min-width: 1600px){

  body{
    display: block;
    
  }
  .site-frame{ 
    transform: none;
  }
}


html, body {
  min-width: 1440px;
}



.projects-strip{
  position: absolute;
  left: 0;
  right: 0;
  top: 1700px;
  max-width: 1450px;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 0; 
  box-sizing: border-box;
  z-index: 2;
}
.projects-track{
  display: flex;
  gap: 6px; 
  align-items: center;
  padding: 10px 0; 
}
.project-card{
  flex: 0 0 33.333%;
  max-width: 520px;
  height: 360px; 
  scroll-snap-align: start; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; 
  border-radius: 0;
  box-shadow: none;
}
.project-card img{ width: 100%; height: 100%; object-fit: contain; display:block; border-radius: 0; background: transparent; }

/* Hover & focus interactions for project cards */
@media (hover: hover) and (pointer: fine) {
  .project-card{
    transition: transform 260ms cubic-bezier(.2,.9,.3,1), box-shadow 200ms ease;
    will-change: transform, box-shadow;
  }
  .project-card:hover,
  .project-card:active{
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 14px 30px rgba(2,6,23,0.12);
    z-index: 8;
  }
}

/* Keyboard focus accessibility */
.project-card:focus-visible{
  outline: 3px solid rgba(14,165,164,0.18);
  outline-offset: 6px;
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 24px rgba(2,6,23,0.12);
  z-index: 8;
}

/* Thin custom scrollbar for desktop */
.projects-strip{ padding: 0; }
.projects-strip::-webkit-scrollbar{ height: 12px; }
.projects-strip::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.22); border-radius: 8px; }
.projects-strip::-webkit-scrollbar-track{ background: rgba(255,255,255,0.6); }



/* Digital Product Project ----------------------------------------------------------------*/







.DigitalProductProject {
   position: relative;
    width: 1400px;
    height: 1000px;
}

.DigitalProductTitle {
  position: absolute;
  left: 350px;
  top: 183px; 
  width: 900px;
  z-index: 2;
}

.DigitalProductImage {
  position: absolute;
  left: 200px;
  top: 165px;
  width: 150px;
  z-index: 2;
} 



 



















  .TheLine{
    position : absolute ;
    left : 750px;
    top : 1130px;
    width : 2px;
    height: 1000px;
    z-index: 2;
  }









  .TheProcess {
    position : absolute ;
    left : 85px;
    top : 2300px;
    width : 700px;
    z-index: 2;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 520ms cubic-bezier(.2,.9,.3,1), transform 520ms cubic-bezier(.2,.9,.3,1);
  }

.TheProcess.in-view{
  opacity: 1;
  transform: translateY(0);
}




  .TheApp{
    position : absolute ;
    left : 85px;
    top : 5027px;
    width: 200px;
    height: auto;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .TheApp.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* App video positioned to the right of the static TheApp image */
  .TheAppVideo{
    position: absolute;
    left: 400px; 
    top: 5100px; 
    width: 800px;
    height: auto;
    z-index: 2;
    background: #000; 
    object-fit: contain;
    display: block;
  }







  /* Small-screen: stack video under image and scale down */
  @media (max-width: 800px){
    .TheAppVideo{ position: relative; left: auto; top: auto; width: 100%; margin-top: 12px; }
  }


  .TheBrand{
    position : absolute ;
    left : 85px;
    top : 13600px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .TheBrand.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .LogoIcon{
    position : absolute ;
    left : 85px;
    top : 13800px;
    width : 1300px;
    z-index: 2;
  }

  .Logo{
    position : absolute ;
    left : 200px;
    top : 14000px;
    width : 400px;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .Logo:hover {
    transform: scale(1.05);
  }

  .Line{
    position : absolute ;
    left : 760px;
    top : 13950px;
    width : 2px;
    height: 200px;
    z-index: 2;
  }

  .Icon{
    position : absolute ;
    left : 1050px;
    top : 14000px;
    width : 100px;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .Icon:hover {
    transform: scale(1.1);
  }

  .FontColour{
    position : absolute ;
    left : 85px;
    top : 14250px;
    width : 1300px;
    z-index: 2;
  }

  

.Font{
    position : absolute ;
    left : 200px;
    top : 14460px;
    width : 400px;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .Font:hover {
    transform: scale(1.05);
  }

  .Colour{
    position : absolute ;
    left : 1000px;
    top : 14450px;
    width : 200px;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .Colour:hover {
    transform: scale(1.08);
  }

  .LineTwo{
    position : absolute ;
    left : 760px;
    top : 14380px;
    width : 2px;
    height: 200px;
    z-index: 2;
  }





  .FirstDesignOld {
    position : absolute ;
    left : 200px;
    top : 2530px;
    width : 500px;
    z-index: 2;

  }

  /* Animation container for FirstDesignOld */
  .first-design-container {
    position: absolute;
    left: 200px;
    top: 2530px;
    width: 500px;
    height: 400px; /* Extra height for animated text */
    z-index: 2;
  }

  .first-design-container .FirstDesignOld {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  /* Animated text elements */
  .animated-text {
    position: absolute;
    color: black;
    font-family: 'Arial', sans-serif;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.8);
    z-index: 3;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.3);
  }

  /* Initial positions (centered on image) */
  .text-1, .text-2, .text-3, .text-4 {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
  }

  /* Animation keyframes for semi-circular movement */
  @keyframes textFlyOut1 {
    to {
      transform: translate(-50%, -50%) translate(-260px, -110px) scale(1);
      opacity: 1;
    }
  }

  @keyframes textFlyOut2 {
    to {
      transform: translate(-50%, -50%) translate(-100px, -210px) scale(1);
      opacity: 1;
    }
  }

  @keyframes textFlyOut3 {
    to {
      transform: translate(-50%, -50%) translate(100px, -210px) scale(1);
      opacity: 1;
    }
  }

  @keyframes textFlyOut4 {
    to {
      transform: translate(-50%, -50%) translate(230px, -110px) scale(1);
      opacity: 1;
    }
  }

  /* Triggered animation classes */
  .first-design-container.animate .text-1 {
    animation: textFlyOut1 0.8s ease-out 0.1s forwards;
  }

  .first-design-container.animate .text-2 {
    animation: textFlyOut2 0.8s ease-out 0.3s forwards;
  }

  .first-design-container.animate .text-3 {
    animation: textFlyOut3 0.8s ease-out 0.5s forwards;
  }

  .first-design-container.animate .text-4 {
    animation: textFlyOut4 0.8s ease-out 0.7s forwards;
  }

  /* Responsive adjustments */
  @media (max-width: 1200px) {
    .first-design-container {
      left: 80px;
      width: 400px;
    }
    
    .animated-text {
      font-size: clamp(16px, 2.2vw, 22px);
    }
    
    @keyframes textFlyOut1 {
      to {
        transform: translate(-50%, -50%) translate(-200px, -90px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes textFlyOut2 {
      to {
        transform: translate(-50%, -50%) translate(-85px, -170px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes textFlyOut3 {
      to {
        transform: translate(-50%, -50%) translate(85px, -170px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes textFlyOut4 {
      to {
        transform: translate(-50%, -50%) translate(180px, -90px) scale(1);
        opacity: 1;
      }
    }
  }

  @media (max-width: 800px) {
    .first-design-container {
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      margin: 12px auto 0;
      height: 350px;
    }
    
    .animated-text {
      font-size: clamp(14px, 2.8vw, 18px);
    }
    
    @keyframes textFlyOut1 {
      to {
        transform: translate(-50%, -50%) translate(-160px, -75px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes textFlyOut2 {
      to {
        transform: translate(-50%, -50%) translate(-60px, -140px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes textFlyOut3 {
      to {
        transform: translate(-50%, -50%) translate(60px, -140px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes textFlyOut4 {
      to {
        transform: translate(-50%, -50%) translate(140px, -75px) scale(1);
        opacity: 1;
      }
    }
  }

  .SideView {
    position : absolute ;
    left : 950px;
    top : 2563px;
    width : 230px;
    z-index: 2;

  }

  /* Animation container for SideView */
  .side-view-container {
    position: absolute;
    left: 950px;
    top: 2563px;
    width: 230px;
    height: 200px; /* Extra height for animated elements */
    z-index: 2;
  }

  .side-view-container .SideView {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  /* Animated text and arrow elements */
  .side-animated-text, .side-animated-arrow {
    position: absolute;
    color: black;
    font-family: 'Arial', sans-serif;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.8);
    z-index: 3;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.3);
  }

  .side-animated-text {
    font-size: clamp(24px, 3vw, 32px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
  }

  .side-animated-arrow {
    font-size: clamp(24px, 3vw, 32px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.8);
  }

  /* Animation keyframes for SideView */
  @keyframes sideTextFlyOut {
    to {
      transform: translate(-50%, -50%) translate(180px, -40px) scale(1);
      opacity: 1;
    }
  }

  @keyframes sideArrowFlyOut {
    to {
      transform: translate(-50%, -50%) translate(90px, -20px) scale(1);
      opacity: 1;
    }
  }

  /* Triggered animation classes */
  .side-view-container.animate .side-animated-text {
    animation: sideTextFlyOut 0.8s ease-out 0.2s forwards;
  }

  .side-view-container.animate .side-animated-arrow {
    animation: sideArrowFlyOut 0.8s ease-out 0.4s forwards;
  }

  /* Responsive adjustments for SideView */
  @media (max-width: 1200px) {
    .side-view-container {
      left: 750px;
      width: 200px;
    }
    
    .side-animated-text {
      font-size: clamp(20px, 2.8vw, 26px);
    }
    
    .side-animated-arrow {
      font-size: clamp(20px, 2.8vw, 26px);
    }
    
    @keyframes sideTextFlyOut {
      to {
        transform: translate(-50%, -50%) translate(150px, -35px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes sideArrowFlyOut {
      to {
        transform: translate(-50%, -50%) translate(75px, -15px) scale(1);
        opacity: 1;
      }
    }
  }

  @media (max-width: 800px) {
    .side-view-container {
      position: relative;
      left: auto;
      top: auto;
      width: 100%;
      margin: 12px auto 0;
      height: 180px;
    }
    
    .side-animated-text {
      font-size: clamp(18px, 3.5vw, 22px);
    }
    
    .side-animated-arrow {
      font-size: clamp(18px, 3.5vw, 22px);
    }
    
    @keyframes sideTextFlyOut {
      to {
        transform: translate(-50%, -50%) translate(120px, -30px) scale(1);
        opacity: 1;
      }
    }
    
    @keyframes sideArrowFlyOut {
      to {
        transform: translate(-50%, -50%) translate(60px, -10px) scale(1);
        opacity: 1;
      }
    }
  }



  



  .TheBody{
    position : absolute ;
    left : 300px;
    top : 3100px;
    width : 400px;
    z-index: 2;
  }

  .LettuceGrey{
    position : absolute ;
    left : 300px;
    top : 3300px;
    width : 400px;
    z-index: 2;
  }

  .Wheels{
    position : absolute ;
    left : 900px;
    top : 3100px;
    width : 210px;
    z-index: 2;
  }

  .GreenLettuce{
    position : absolute ;
    left : 1160px;
    top : 3100px;
    width : 192px;
    z-index: 2;
  }

  .GreyTomato{
    position : absolute ;
    left : 900px;
    top : 3335px;
    width : 210px;
    z-index: 2;
  }

  .RedTomato{
    position : absolute ;
    left : 1160px;
    top : 3335px;
    width : 194px;
    height: 200px;
    z-index: 2;
  }

  .FrontViewNew{
    position : absolute ;
    left : 300px;
    top : 3850px;
    width : 250px;
    z-index: 1;
  }

  .SideViewNew{
    position : absolute ;
    left : 580px;
    top : 3850px;
    width : 218px;
    z-index: 1;
  }

  .WheelsNew{
    position : absolute ;
    left : 825px;
    top : 3850px;
    width : 250px;
    height: 263px;
    z-index: 1;
  }

  .Screen{
    position : absolute ;
    left : 1100px;
    top : 3850px;
    width : 254px;
    z-index: 1;
  }




















  /* Parallax Effect Styles */
.parallax-container {
  position: absolute;
  top: 3950px;
  left: 0;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

/* Base styles for parallax images */
.FrontViewNew,
.SideViewNew, 
.WheelsNew,
.Screen {
  position: absolute !important;
  top: 3950px !important;
  width: 250px !important;
  height: 250px !important;
  object-fit: cover !important;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
  z-index: 1;
  cursor: pointer;
}

/* Layered positioning with different speeds */
.WheelsNew {
  /* First image - leftmost */
  left: calc(50% - 625px) !important;
  z-index: 1 !important;
}

.SideViewNew {
  /* Second image - center left */
  left: calc(50% - 265px) !important;
  z-index: 2 !important;
}

.Screen {
  /* Third image - center right */
  left: calc(50% + 95px) !important;
  z-index: 1 !important;
}

.FrontViewNew {
  /* Fourth image - rightmost */
  left: calc(50% + 455px) !important;
  z-index: 2 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Fade in effect */
.parallax-visible {
  opacity: 1 !important;
}

/* Hover effects - only active after fade-in animation */
.parallax-visible:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  z-index: 10 !important;
}

/* Smooth transition for non-hovered state */
.parallax-visible {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
              opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Responsive scaling */
@media (max-width: 1200px) {
  .FrontViewNew,
  .SideViewNew,
  .Screen,
  .WheelsNew { 
    width: 250px !important; 
    height: 250px !important;
  }
  
  /* Adjust spacing for smaller screens */
  .WheelsNew { left: calc(50% - 410px) !important; }
  .SideViewNew { left: calc(50% - 210px) !important; }
  .Screen { left: calc(50% - 10px) !important; }
  .FrontViewNew { left: calc(50% + 190px) !important; }
}

@media (max-width: 800px) {
  .parallax-container {
    height: 120vh;
    margin: 100px 0;
  }
  
  .FrontViewNew,
  .SideViewNew,
  .Screen,
  .WheelsNew { 
    width: 250px !important; 
    height: 250px !important;
  }
  
  /* Stack images vertically on tablets/mobile */
  .WheelsNew { 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    top: 3950px !important;
  }
  .SideViewNew { 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    top: 4200px !important;
  }
  .Screen { 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    top: 4450px !important;
  }
  .FrontViewNew { 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    top: 4700px !important;
  }
}

@media (max-width: 600px) {
  .FrontViewNew,
  .SideViewNew,
  .Screen,
  .WheelsNew { 
    width: 250px !important; 
    height: 250px !important;
  }
}












 /* The Process------------------------------------------------------------ */




  .FirstDesign{
    position : absolute ;
    left : 900px;
    top : 3850px;
    width : 400px;
    z-index: 2;
  }



  .Slogan{
    position : absolute ;
    left : 880px;
    top : 13500px;
    width : 400px;
    z-index: 2;
  }

  .WhiteBlock{
    position : absolute ;
    left : 0px;
    top : 2100px;
    width : 100px;
    height: 100px;
    z-index: 1;
    background-color: #ffffff;
  }

  .WhiteBlockTwo{
    position : absolute ;
    left : 0px;
    top : 6300px;
    width : 100px;
    height: 100px;
    z-index: 1;
    background-color: #ffffff;
  }

.thebeginning-container {
    position: absolute;
    left: 800px;
    top: 2450px;
    width: 450px;
    height: auto;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.thebeginning-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.TheBeginning {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 2;
   
}

.Modelling {
    position : absolute ;
    left : 380px;
    top : 3050px;
    width : 700px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

.Modelling.visible {
    opacity: 1;
    transform: translateY(0);
}

.FinalDesignTwo {
    position: absolute;
    left: 450px;
    top: 3800px;
    width: 600px;
    z-index: 1;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.FinalDesignTwo.visible {
    opacity: 1;
    transform: translateY(0);
}

.ThePlanning{
    position : absolute ;
    left : 555px;
    top : 4500px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.ThePlanning.visible {
    opacity: 1;
    transform: translateY(0);
}

.AppNavigation{
    position : absolute ;
    left : 390px;
    top : 4650px;
    width : 750px;
    z-index: 2;
}


.AccompanyingApp{
    position : absolute ;
    left : 300px;
    top : 4350px;
    width : 900px;
    z-index: 2;
}


.SignUp{
    position : absolute ;
    left : 100px;
    top : 5700px;
    width : 600px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.SignUp.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Page1{
    position : absolute ;
    left : 120px;
    top : 5900px;
    width : 250px;
    z-index: 2;
}

.Page2{
    position : absolute ;
    left : 420px;
    top : 5900px;
    width : 250px;
    z-index: 2;
}

.Page3{
    position : absolute ;
    left : 720px;
    top : 5900px;
    width : 250px;
    z-index: 2;
}

.Page4{
    position : absolute ;
    left : 1020px;
    top : 5900px;
    width : 250px;
    z-index: 2;
}


.Onboarding{
    position : absolute ;
    left : 190px;
    top : 6450px;
    width : 120px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Onboarding.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.SignUpDetails{
    position : absolute ;
    left : 475px;
    top : 6450px;
    width : 140px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.SignUpDetails.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.CharacterChoice{
    position : absolute ;
    left : 770px;
    top : 6450px;
    width : 160px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.CharacterChoice.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.LoadingPage{
    position : absolute ;
    left : 1080px;
    top : 6450px;
    width : 125px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.LoadingPage.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}











.SignIn{
    position : absolute ;
    left : 230px;
    top : 6575px;
    width : 300px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.SignIn.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Page1_1{
    position : absolute ;
    left : 120px;
    top : 6700px;
    width : 250px;
    z-index: 2;
}

.Page1_2{
    position : absolute ;
    left : 420px;
    top : 6700px;
    width : 250px;
    z-index: 2;
}




.AppHome{
    position : absolute ;
    left : 880px;
    top : 6575px;
    width : 456px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.AppHome.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.Page1_3{
    position : absolute ;
    left : 980px;
    top : 6700px;
    width : 250px;
    z-index: 2;
}


.LogInPages{
    position : absolute ;
    left : 180px;
    top : 7250px;
    width : 135px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.LogInPages.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.Loading_2{
    position : absolute ;
    left : 475px;
    top : 7250px;
    width : 135px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Loading_2.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.HomePageHeading{
    position : absolute ;
    left : 1085px;
    top : 7240px;
    width : 63px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.HomePageHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.HarvestHeading{
    position : absolute ;
    left : 575px;
    top : 7380px;
    width : 300px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.HarvestHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.Harvest_Page1{
    position : absolute ;
    left : 145px;
    top : 7520px;
    width : 250px;
    z-index: 2;
}


.Harvest_Page2{
    position : absolute ;
    left : 435px;
    top : 7520px;
    width : 250px;
    z-index: 2;
}

.Harvest_Page3{
    position : absolute ;
    left : 730px;
    top : 7520px;
    width : 250px;
    z-index: 2;
}

.Harvest_Page4{
    position : absolute ;
    left : 1030px;
    top : 7520px;
    width : 250px;
    z-index: 2;
}


.HarvestStrip{
    position : absolute ;
    left : 230px;
    top : 8070px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.HarvestStrip.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Tomato_Harvest{
    position : absolute ;
    left : 515px;
    top : 8070px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Tomato_Harvest.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.Carrot_Harvest{
    position : absolute ;
    left : 815px;
    top : 8070px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Carrot_Harvest.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}



.Onions_Harvest{
    position : absolute ;
    left : 1120px;
    top : 8070px;
    width : 75px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Onions_Harvest.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}



.MonitorHeading{
    position : absolute ;
    left : 550px;
    top : 8200px;
    width : 350px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.MonitorHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.MonitorHome{
    position : absolute ;
    left : 140px;
    top : 8350px;
    width : 250px;
    z-index: 2;
   
}


.MonitorLandingPage{
    position : absolute ;
    left : 440px;
    top : 8350px;
    width : 250px;
    z-index: 2;
   
}


.MonitorWaterPage{
    position : absolute ;
    left : 740px;
    top : 8350px;
    width : 250px;
    z-index: 2;
   
} 


.MonitorNutrientPage{
    position : absolute ;
    left : 1040px;
    top : 8350px;
    width : 250px;
    z-index: 2;
   
}


.MonitorStrip{
    position : absolute ;
    left : 225px;
    top : 8900px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.MonitorStrip.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.MonitorLanding{
    position : absolute ;
    left : 525px;
    top : 8900px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.MonitorLanding.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}




.MonitorWater{
    position : absolute ;
    left : 825px;
    top : 8900px;
    width : 75px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.MonitorWater.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.MonitorNutrients{
    position : absolute ;
    left : 1125px;
    top : 8900px;
    width : 100px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.MonitorNutrients.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}



.EducationHeading{
    position : absolute ;
    left : 550px;
    top : 9050px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.EducationHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}



.Education_Home{
    position : absolute ;
    left : 130px;
    top : 9200px;
    width : 250px;
    z-index: 2;
   
}


.Education_Landing{
    position : absolute ;
    left : 430px;
    top : 9200px;
    width : 250px;
    z-index: 2;
   
}

.Education_Tomato{
    position : absolute ;
    left : 730px;
    top : 9200px;
    width : 250px;
    z-index: 2;
   
}

.Education_Carrot{
    position : absolute ;
    left : 1030px;
    top : 9200px;
    width : 250px;
    z-index: 2;

}

.Education_Education{
    position : absolute ;
    left : 200px;
    top : 9745px;
    width : 105px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Education_Education.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Education_LandingPage{
    position : absolute ;
    left : 510px;
    top : 9745px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Education_LandingPage.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Education_Tomato_1{
    position : absolute ;
    left : 830px;
    top : 9745px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Education_Tomato_1.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Education_Carrot_1{
    position : absolute ;
    left : 1120px;
    top : 9745px;
    width : 65px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Education_Carrot_1.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Education_Education_1{
    position : absolute ;
    left : 1330px;
    top : 9200px;
    width : 250px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Education_Education_1.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Education_LandingPage_1{
    position : absolute ;
    left : 1630px;
    top : 9200px;
    width : 250px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Education_LandingPage_1.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.ShopHeading{
    position : absolute ;
    left : 150px;
    top : 9900px;
    width : 220px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ShopHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.ShopPage{
    position : absolute ;
    left : 140px;
    top : 10050px;
    width : 240px;
    z-index: 2;
}

.TheShop{
    position : absolute ;
    left : 210px;
    top : 10580px;
    width : 85px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.TheShop.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.RecipeHeading{
    position : absolute ;
    left : 890px;
    top : 9900px;
    width : 300px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.RecipeHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.Page1_recipe{
    position : absolute ;
    left : 750px;
    top : 10050px;
    width : 245px;
    z-index: 2;
   
}

.Page2_recipe{
    position : absolute ;
    left : 1050px;
    top : 10050px;
    width : 245px;
    z-index: 2;
   
}

.TomatoRecipe{
    position : absolute ;
    left : 800px;
    top : 10580px;
    width : 150px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.TomatoRecipe.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.Tomato3{
    position : absolute ;
    left : 1140px;
    top : 10580px;
    width : 80px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.Tomato3.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.MaintenanceHeading{
    position : absolute ;
    left : 100px;
    top : 10700px;
    width : 500px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.MaintenanceHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.MaintenancePhoto{
    position : absolute ;
    left : 265px;
    top : 11430px;
    width : 120px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.MaintenancePhoto.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}


.Page1_8{
    position : absolute ;
    left : 200px;
    top : 10900px;
    width : 240px;
    z-index: 2;
}


.SettingsHeading{
    position : absolute ;
    left : 870px;
    top : 10700px;
    width : 300px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.SettingsHeading.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.SettingsPhoto{
    position : absolute ;
    left : 980px;
    top : 11430px;
    width : 90px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.SettingsPhoto.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}



.Page1_5{
    position : absolute ;
    left : 900px;
    top : 10900px;
    width : 245px;
    z-index: 2;
}


.Personas{
    position : absolute ;
    left : 450px;
    top : 11550px;
    width : 500px;
    z-index: 2;
}





.PrimaryPersona{
    position : absolute ;
    left : 200px;
    top : 11690px;
    width : 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.PrimaryPersona.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.SecondaryPersona{
    position : absolute ;
    left : 200px;
    top : 12350px;
    width : 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.SecondaryPersona.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}

.TertiaryPersona{
    position : absolute ;
    left : 200px;
    top : 12950px;
    width : 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.TertiaryPersona.reveal-animate {
    opacity: 1;
    transform: translateY(0);
}
















/* Typewriter reveal animation for image */
.thebeginning-container {
    width: 0;
    transition: none;
}

.thebeginning-container.animate {
    animation: imageTypewriter 3s ease-out forwards;
}

@keyframes imageTypewriter {
    from { 
        width: 0;
    }
    to { 
        width: 450px;
    }
}

/* Responsive styles for TheBeginning typewriter */
@media (max-width: 1200px) {
    .thebeginning-container {
        left: 600px;
        width: 350px;
    }
    
    .thebeginning-container.animate {
        animation: imageTypewriterTablet 3s ease-out forwards;
    }
    
    @keyframes imageTypewriterTablet {
        from { width: 0; }
        to { width: 350px; }
    }
}

@media (max-width: 800px) {
    .thebeginning-container {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 20px auto;
    }
    
    .thebeginning-container.animate {
        animation: imageTypewriterMobile 3s ease-out forwards;
    }
    
    @keyframes imageTypewriterMobile {
        from { width: 0; }
        to { width: 100%; }
    }
}





















/* Interactive Polaroid Stack */
.polaroid-section {
    position: absolute;
    left: 50px;
    top: 3300px;
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.polaroid-stack {
    position: relative;
    width: 1000px;
    height: 500px;
    perspective: 1000px;
    margin: 0 auto;
}

.polaroid {
    position: absolute;
    width: 300px;
    height: 400px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center bottom;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -200px;
}

.polaroid-photo {
    width: 250px;
    height: 280px;
    margin: 25px auto 15px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

.polaroid-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.polaroid-caption {
    display: none;
}

/* Stacked Animation States */
.polaroid.stacked-0 {
    z-index: 6 !important;
    transform: translate(-150px, -200px) rotate(-8deg) !important;
}

.polaroid.stacked-1 {
    z-index: 5 !important;
    transform: translate(-150px, -200px) rotate(12deg) translateY(20px) !important;
}

.polaroid.stacked-2 {
    z-index: 4 !important;
    transform: translate(-150px, -200px) rotate(-3deg) translateY(40px) !important;
}

.polaroid.stacked-3 {
    z-index: 3 !important;
    transform: translate(-150px, -200px) rotate(7deg) translateY(60px) !important;
}

.polaroid.stacked-4 {
    z-index: 2 !important;
    transform: translate(-150px, -200px) rotate(-12deg) translateY(80px) !important;
}

.polaroid.stacked-5 {
    z-index: 1 !important;
    transform: translate(-150px, -200px) rotate(5deg) translateY(100px) !important;
}

/* Spread-out Animation States */
.polaroid.spread-0 {
    z-index: 6 !important;
    transform: translate(-400px, -200px) rotate(-5deg) scale(0.9) !important;
}

.polaroid.spread-1 {
    z-index: 6 !important;
    transform: translate(-250px, -200px) rotate(2deg) scale(0.95) !important;
}

.polaroid.spread-2 {
    z-index: 6 !important;
    transform: translate(-100px, -200px) rotate(-1deg) scale(1) !important;
}

.polaroid.spread-3 {
    z-index: 6 !important;
    transform: translate(50px, -200px) rotate(3deg) scale(1) !important;
}

.polaroid.spread-4 {
    z-index: 6 !important;
    transform: translate(200px, -200px) rotate(-2deg) scale(0.95) !important;
}

.polaroid.spread-5 {
    z-index: 6 !important;
    transform: translate(350px, -200px) rotate(4deg) scale(0.9) !important;
}

/* Hover Effects */
.polaroid:hover {
    z-index: 1000 !important;
    transform: translate(-150px, -220px) rotate(0deg) scale(1.1) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Hover effects for stacked polaroids */
.polaroid.stacked-0:hover,
.polaroid.stacked-1:hover,
.polaroid.stacked-2:hover,
.polaroid.stacked-3:hover,
.polaroid.stacked-4:hover,
.polaroid.stacked-5:hover {
    z-index: 1000 !important;
    transform: translate(-150px, -220px) rotate(0deg) scale(1.1) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

/* Hover effects for spread polaroids */
.polaroid.spread-0:hover {
    z-index: 1000 !important;
    transform: translate(-400px, -220px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.polaroid.spread-1:hover {
    z-index: 1000 !important;
    transform: translate(-250px, -220px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.polaroid.spread-2:hover {
    z-index: 1000 !important;
    transform: translate(-100px, -220px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.polaroid.spread-3:hover {
    z-index: 1000 !important;
    transform: translate(50px, -220px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.polaroid.spread-4:hover {
    z-index: 1000 !important;
    transform: translate(200px, -220px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.polaroid.spread-5:hover {
    z-index: 1000 !important;
    transform: translate(350px, -220px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

/* Shuffle animation on load */
@keyframes shuffle {
    0% {
        transform: translate(-120px, -160px) rotate(0deg);
    }
    25% {
        transform: translate(-120px, -160px) rotate(8deg) translateX(15px);
    }
    50% {
        transform: translate(-120px, -160px) rotate(-5deg) translateX(-10px);
    }
    75% {
        transform: translate(-120px, -160px) rotate(3deg) translateX(5px);
    }
    100% {
        transform: translate(-120px, -160px) rotate(0deg);
    }
}

.polaroid.shuffle {
    animation: shuffle 2s ease-in-out;
}

/* Loading stack arrangement */
.polaroid:nth-child(1) { z-index: 10; transform: translate(-120px, -160px) rotate(-2deg); }
.polaroid:nth-child(2) { z-index: 9; transform: translate(-120px, -160px) rotate(5deg) translateY(20px) scale(0.95); }
.polaroid:nth-child(3) { z-index: 8; transform: translate(-120px, -160px) rotate(-8deg) translateY(40px) scale(0.9); }
.polaroid:nth-child(4) { z-index: 7; transform: translate(-120px, -160px) rotate(3deg) translateY(60px) scale(0.85); }
.polaroid:nth-child(5) { z-index: 6; transform: translate(-120px, -160px) rotate(-6deg) translateY(80px) scale(0.8); }
.polaroid:nth-child(6) { z-index: 5; transform: translate(-120px, -160px) rotate(4deg) translateY(100px) scale(0.75); }

/* Responsive design */
@media (max-width: 1200px) {
    .polaroid-section {
        height: 600px;
        width: 100%;
        overflow: visible;
    }
    
    .polaroid-stack {
        width: 600px;
        height: 350px;
        margin: 0 auto;
    }
    
    .polaroid {
        width: 200px;
        height: 270px;
        margin-left: -100px;
        margin-top: -135px;
    }
    
    .polaroid-photo {
        width: 160px;
        height: 180px;
        margin: 15px auto 8px;
    }
    
    .polaroid-caption {
        font-size: 12px;
    }
    
    /* Tablet stacked positions */
    .polaroid.stacked-0 { transform: translate(-100px, -135px) rotate(-8deg) !important; }
    .polaroid.stacked-1 { transform: translate(-100px, -135px) rotate(12deg) translateY(12px) !important; }
    .polaroid.stacked-2 { transform: translate(-100px, -135px) rotate(-3deg) translateY(24px) !important; }
    .polaroid.stacked-3 { transform: translate(-100px, -135px) rotate(7deg) translateY(36px) !important; }
    .polaroid.stacked-4 { transform: translate(-100px, -135px) rotate(-12deg) translateY(48px) !important; }
    .polaroid.stacked-5 { transform: translate(-100px, -135px) rotate(5deg) translateY(60px) !important; }
    
    /* Tablet spread positions */
    .polaroid.spread-0 { transform: translate(-200px, -135px) rotate(-5deg) scale(0.9) !important; }
    .polaroid.spread-1 { transform: translate(-120px, -135px) rotate(2deg) scale(0.95) !important; }
    .polaroid.spread-2 { transform: translate(-40px, -135px) rotate(-1deg) scale(1) !important; }
    .polaroid.spread-3 { transform: translate(40px, -135px) rotate(3deg) scale(1) !important; }
    .polaroid.spread-4 { transform: translate(120px, -135px) rotate(-2deg) scale(0.95) !important; }
    .polaroid.spread-5 { transform: translate(200px, -135px) rotate(4deg) scale(0.9) !important; }
    
    /* Tablet hover effects */
    .polaroid:hover {
        transform: translate(-100px, -160px) rotate(0deg) scale(1.08) !important;
    }
    
    .polaroid.spread-0:hover { transform: translate(-200px, -160px) rotate(0deg) scale(1.1) !important; }
    .polaroid.spread-1:hover { transform: translate(-120px, -160px) rotate(0deg) scale(1.1) !important; }
    .polaroid.spread-2:hover { transform: translate(-40px, -160px) rotate(0deg) scale(1.1) !important; }
    .polaroid.spread-3:hover { transform: translate(40px, -160px) rotate(0deg) scale(1.1) !important; }
    .polaroid.spread-4:hover { transform: translate(120px, -160px) rotate(0deg) scale(1.1) !important; }
    .polaroid.spread-5:hover { transform: translate(200px, -160px) rotate(0deg) scale(1.1) !important; }
}

@media (max-width: 800px) {
    .polaroid-section {
        height: 500px;
        overflow: visible;
    }
    
    .polaroid-stack {
        width: 320px;
        height: 400px;
        margin: 0 auto;
    }
    
    .polaroid {
        width: 160px;
        height: 220px;
        margin-left: -80px;
        margin-top: -110px;
    }
    
    .polaroid-photo {
        width: 130px;
        height: 140px;
        margin: 12px auto 6px;
    }
    
    .polaroid-caption {
        font-size: 11px;
        margin-top: 8px;
    }
    
    /* Mobile stacked positions */
    .polaroid.stacked-0 { transform: translate(-80px, -110px) rotate(-8deg) !important; }
    .polaroid.stacked-1 { transform: translate(-80px, -110px) rotate(12deg) translateY(10px) !important; }
    .polaroid.stacked-2 { transform: translate(-80px, -110px) rotate(-3deg) translateY(20px) !important; }
    .polaroid.stacked-3 { transform: translate(-80px, -110px) rotate(7deg) translateY(30px) !important; }
    .polaroid.stacked-4 { transform: translate(-80px, -110px) rotate(-12deg) translateY(40px) !important; }
    .polaroid.stacked-5 { transform: translate(-80px, -110px) rotate(5deg) translateY(50px) !important; }
    
    /* Mobile spread positions - vertical layout for small screens */
    .polaroid.spread-0 { transform: translate(-80px, -200px) rotate(-3deg) scale(0.85) !important; }
    .polaroid.spread-1 { transform: translate(-80px, -140px) rotate(2deg) scale(0.9) !important; }
    .polaroid.spread-2 { transform: translate(-80px, -80px) rotate(-1deg) scale(0.95) !important; }
    .polaroid.spread-3 { transform: translate(-80px, -20px) rotate(1deg) scale(0.95) !important; }
    .polaroid.spread-4 { transform: translate(-80px, 40px) rotate(-2deg) scale(0.9) !important; }
    .polaroid.spread-5 { transform: translate(-80px, 100px) rotate(3deg) scale(0.85) !important; }
    
    /* Mobile hover effects */
    .polaroid:hover {
        transform: translate(-80px, -130px) rotate(0deg) scale(1.05) !important;
    }
    
    .polaroid.spread-0:hover { transform: translate(-80px, -220px) rotate(0deg) scale(1.0) !important; }
    .polaroid.spread-1:hover { transform: translate(-80px, -160px) rotate(0deg) scale(1.0) !important; }
    .polaroid.spread-2:hover { transform: translate(-80px, -100px) rotate(0deg) scale(1.05) !important; }
    .polaroid.spread-3:hover { transform: translate(-80px, -40px) rotate(0deg) scale(1.05) !important; }
    .polaroid.spread-4:hover { transform: translate(-80px, 20px) rotate(0deg) scale(1.0) !important; }
    .polaroid.spread-5:hover { transform: translate(-80px, 80px) rotate(0deg) scale(1.0) !important; }
}
















/* Reveal Video - digital product */

@media (max-width: 800px){
  /* stack and make full width on small screens */
  .DigitalProductTitle{ position: relative; left: auto; top: auto; width: 100%; margin: 0 auto; }
  .DigitalProductImage{ position: relative; left: auto; top: auto; width: 100%; margin: 8px auto 0; }
  }

  /* Looping reveal video styles */
  .DigitalProductLoop{
    position: absolute;
    left: 260px;
    top: 450px;
    width: 3900px;
    max-width: calc(100% - 480px);
    height: auto;
    z-index: 2;
    background: #000;
    /* Hide until video has a usable first frame to avoid a black flash */
    opacity: 0;
    transition: opacity 240ms ease;
  }

.DigitalProductLoop.ready{ opacity: 1; }

  @media (max-width: 1200px){
    .DigitalProductLoop{ left: 80px; width: 560px; top: 340px; }
  }

  @media (max-width: 800px){
    .DigitalProductLoop{ position: relative; left: auto; top: auto; width: 100%; margin: 12px auto 0; }
  }

/* Showreel Video - Homepage */
.showreel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
  margin-bottom: 20px;
}

.showreel-video {
  width: 800px;
  height: auto;
}

.showreel-controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.play-showreel-btn,
.audio-toggle-btn {
  background: #000000;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.play-showreel-btn:hover,
.audio-toggle-btn:hover {
  background: #333333;
}





























/* Chat widget styles ------------------------------------------------------------- */
#chat-widget{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1001; /* above nav, marquee, and footer */
  font-family: Arial, Helvetica, sans-serif;
}

#chat-toggle{
  background: #050505; /* lighter grey */
  color: #fefefe; /* dark label for contrast */
  border: 1px solid #010101;
  padding: 12px 16px;
  border-radius: 28px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}

#chat-toggle:hover{
  background: #040404;
}

#chat-toggle:active{
  background: #020202;
}

#chat-panel{
  width: 320px;
  max-width: calc(100vw - 48px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.15);
  margin-top: 12px;
  /* header sits flush, content keeps padding */
  padding: 0 12px 12px;
  overflow: hidden;
}

.chat-header{
  background: #f8fafc; /* light top area */
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px solid #e6e9ee;
}

.chat-header .chat-logo{ height: 36px; display:block; }

#chat-panel label{ display:block; font-size:12px; margin-top:8px; color:#111827; }
#chat-panel input,#chat-panel textarea{ width:100%; padding:8px; margin-top:6px; border-radius:6px; border:1px solid #e5e7eb; box-sizing:border-box; }
#chat-panel textarea{ resize:vertical; }

.chat-actions{ display:flex; gap:8px; margin-top:10px; }
.chat-actions button{ flex:1; padding:8px 10px; border-radius:8px; border:none; cursor:pointer; }
.chat-actions button[type="submit"]{ background:#0ea5a4; color:#fff; }
.chat-actions button#chat-close{ background:#f3f4f6; }

#chat-status{ margin-top:8px; font-size:13px; color:#065f46; min-height:18px; }

/* Accessibility: visible focus ring */
#chat-toggle:focus, #chat-panel input:focus, #chat-panel textarea:focus, #chat-panel button:focus{ outline: 3px solid rgba(14,165,164,0.2); outline-offset: 2px; }

/* Social links inside the chat panel */
.chat-social{ display:flex; gap:10px; align-items:center; justify-content:flex-start; padding-bottom:8px; width:100%; }
.chat-social-link{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:8px; text-decoration:none; }
.chat-social-link svg{ width:22px; height:22px; display:block; }
.chat-social-link img{ display:block; }
.chat-social-link:focus{ box-shadow: 0 0 0 3px rgba(2,132,199,0.18); }

/* Footer logo pushed to the right */
.chat-logo-footer{ margin-left: auto; margin-right: 6px; width:48px; height:48px; }
.chat-logo-footer img{ width:40px; height:40px; }
.chat-logo-footer:hover{ transform: translateY(-2px); }

.chat-social-link img{ width:22px; height:22px; display:block; }

























/* Responsive sizing for projects strip */

@media (max-width: 1200px) {
  .projects-strip{
    max-width: 1000px;
    top: 1640px; /* slightly shift up to keep visual alignment */
  }
  .project-card{ flex: 0 0 33.333%; max-width: 420px; height: 315px; }
  .project-card img{ object-fit: contain; }
}

@media (max-width: 800px) {
  .projects-strip{
    max-width: calc(100% - 40px);
    left: 20px;
    right: 20px;
    top: 1600px; /* nudge to fit layout on small screens */
    scroll-snap-type: x mandatory; /* stronger snap for small screens */
  }
  .projects-track{ padding: 8px 0; gap: 10px; }
  .project-card{ flex: 0 0 70%; max-width: none; height: 225px; scroll-snap-align: center; }
  .projects-strip{ padding: 6px 0; }
}

/* Circular Orbit Animation */
.orbit-section {
    position: absolute;
    left: 0;
    top: 3800px;
    width: 100%;
    height: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.orbit-container {
    position: relative;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    margin: 0 auto;
}

/* Orbit styles for existing elements */
.FrontViewNew.orbit-active,
.SideViewNew.orbit-active,
.WheelsNew.orbit-active,
.Screen.orbit-active {
    position: absolute !important;
    width: 350px !important;
    height: 350px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    background: white !important;
    padding: 25px !important;
    animation: orbit 20s linear infinite !important;
    transform-origin: 300px 300px !important; /* Half of container size */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Initial positions for each element (12, 3, 6, 9 o'clock) */
.FrontViewNew.orbit-active {
    top: 0 !important;
    left: 125px !important; /* Center horizontally */
    animation-delay: 0s !important;
}

.SideViewNew.orbit-active {
    top: 125px !important; /* Center vertically */
    right: 0 !important;
    animation-delay: -5s !important; /* Quarter rotation behind */
}

.WheelsNew.orbit-active {
    top: 250px !important; /* Bottom position using top instead of bottom */
    left: 125px !important; /* Center horizontally */
    animation-delay: -10s !important; /* Half rotation behind */
}

.Screen.orbit-active {
    top: 125px !important; /* Center vertically */
    left: 0 !important;
    animation-delay: -15s !important; /* Three-quarter rotation behind */
}

/* Orbit animation keyframes */
@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(180px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(180px) rotate(-360deg);
    }
}

/* Hover effects for orbit items */
.FrontViewNew.orbit-active:hover,
.SideViewNew.orbit-active:hover,
.WheelsNew.orbit-active:hover,
.Screen.orbit-active:hover {
    animation-play-state: paused !important;
    z-index: 1000 !important;
    transform: rotate(0deg) translateX(180px) rotate(0deg) scale(1.2) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s ease !important;
}

/* Responsive design for orbit animation */
@media (max-width: 1200px) {
    .orbit-section {
        height: 700px;
    }
    
    .orbit-container {
        width: 350px;
        height: 350px;
    }
    
    .FrontViewNew.orbit-active,
    .SideViewNew.orbit-active,
    .WheelsNew.orbit-active,
    .Screen.orbit-active {
        width: 150px !important;
        height: 150px !important;
        transform-origin: 175px 175px !important;
    }
    
    .FrontViewNew.orbit-active {
        left: 100px !important;
    }
    
    .SideViewNew.orbit-active {
        top: 100px !important;
    }
    
    .WheelsNew.orbit-active {
        left: 100px !important;
    }
    
    .Screen.orbit-active {
        top: 100px !important;
    }
    
    @keyframes orbit {
        0% {
            transform: rotate(0deg) translateX(175px) rotate(0deg);
        }
        100% {
            transform: rotate(360deg) translateX(175px) rotate(-360deg);
        }
    }
}

@media (max-width: 800px) {
    .orbit-section {
        height: 600px;
    }
    
    .orbit-container {
        width: 300px;
        height: 300px;
    }
    
    .FrontViewNew.orbit-active,
    .SideViewNew.orbit-active,
    .WheelsNew.orbit-active,
    .Screen.orbit-active {
        width: 120px !important;
        height: 120px !important;
        transform-origin: 150px 150px !important;
        padding: 8px !important;
    }
    
    .FrontViewNew.orbit-active {
        left: 90px !important;
    }
    
    .SideViewNew.orbit-active {
        top: 90px !important;
    }
    
    .WheelsNew.orbit-active {
        left: 90px !important;
    }
    
    .Screen.orbit-active {
        top: 90px !important;
    }
    
    @keyframes orbit {
        0% {
            transform: rotate(0deg) translateX(150px) rotate(0deg);
        }
        100% {
            transform: rotate(360deg) translateX(150px) rotate(-360deg);
        }
    }
}

/* Scroll Indicator Styles */
.scroll-indicator {
    position: absolute;
    top: 2100px; /* Just below the projects-strip (1700px + strip height + scrollbar) */
    left: 85px;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.scroll-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 2px solid white;
    border-radius: 25px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    animation: flashPulse 2s ease-in-out infinite;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}



.scroll-arrow {
    font-size: 16px;
    animation: bounceRight 1.5s ease-in-out infinite;
}

@keyframes flashPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

@keyframes bounceRight {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(3px);
    }
    60% {
        transform: translateX(2px);
    }
}

/* Responsive adjustments for scroll indicator */
@media (max-width: 1200px) {
    .scroll-indicator {
        top: 1720px; /* Adjust to match projects-strip at 1640px + height + scrollbar */
    }
}

@media (max-width: 800px) {
    .scroll-indicator {
        top: 1680px; /* Adjust to match projects-strip at 1600px + height + scrollbar */
        left: 50%;
    }
    
    .scroll-button {
        padding: 10px 16px;
        font-size: 12px;
    }
    
    .scroll-arrow {
        font-size: 14px;
    }
}








/* Footer Styles - Full Width Responsive Footer */
.site-footer {
    position: absolute;
    top: 2200px;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 30px 20px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    z-index: 1000;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

.footer-text {
    margin: 0;
    line-height: 1.6;
    flex: 0 0 auto;
}

.footer-center-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    width: auto;
}

.footer-right-logo {
    height: 40px;
    width: auto;
    flex: 0 0 auto;
    margin-right: 100px;
}

/* Specific positioning for digital-product.html footer */
.digital-product-footer {
    top: 14700px;
}

/* Specific positioning for groupfilm.html footer */
.groupfilm-footer {
    top: 9600px;
}

/* Large screen media query for 2560px and above */
@media (min-width: 2560px) {
    .site-footer {
        padding: 40px 20px;
        font-size: 16px;
    }
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
    color: white;
}

.preloader-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    margin: 20px auto;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 18px;
    font-weight: 300;
    margin-top: 10px;
    animation: fade 1.5s ease-in-out infinite alternate;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes fade {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}











/* FILM DESIGN ----------------------------------------*/



/* title ----------------------------------------*/
.HomePageFilm{
 position: relative;
        width: 1400px;
        height: 1200px;
}

.FilmHeading{
    position : absolute ;
    left : 350px;
    top : 200px;
    width : 700px;
    z-index: 2;
}

/* Hanging Film Spotlights */
.film-spotlights {
    position: absolute;
    right: 60px;
    top: 0px;
    width: 300px;
    height: 400px;
    z-index: 3;
}

.spotlight {
    position: absolute;
    width: 80px;
}

.spotlight-1 {
    left: 0px;
    top: 0px;
}

.spotlight-2 {
    left: 100px;
    top: 50px;
}

.spotlight-3 {
    left: 200px;
    top: 20px;
}

/* Twisted cable */
.spotlight-cable {
    position: relative;
    width: 8px;
    height: 150px;
    margin: 0 auto;
    background: repeating-linear-gradient(
        45deg,
        #1a1a1a 0px,
        #1a1a1a 8px,
        #2a2a2a 8px,
        #2a2a2a 16px
    );
    border-radius: 4px;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

.spotlight-1 .spotlight-cable {
    height: 180px;
}

.spotlight-2 .spotlight-cable {
    height: 220px;
}

.spotlight-3 .spotlight-cable {
    height: 200px;
}

/* Spotlight body */
.spotlight-body {
    position: relative;
    width: 80px;
    height: 90px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border-radius: 8px 8px 15px 15px;
    margin: 0 auto;
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.5),
        inset -3px -3px 8px rgba(255, 255, 255, 0.1);
}

/* Top connector */
.spotlight-body::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 15px;
    background: #1a1a1a;
    border-radius: 50% 50% 0 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Front lens/light */
.spotlight-front {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 55px;
    background: radial-gradient(circle, #ffffff 0%, #f5f5f5 30%, #d0d0d0 60%, #404040 100%);
    border-radius: 50%;
    border: 3px solid #0a0a0a;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.6),
        inset 0 -5px 15px rgba(0, 0, 0, 0.3),
        inset 0 5px 10px rgba(255, 255, 255, 0.4);
}

/* Inner lens detail */
.spotlight-front::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 70%, transparent 100%);
    border-radius: 50%;
}

/* Reflection highlight */
.spotlight-front::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 12px;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
}

/* YouTube Video Container */
.video-container {
    position: absolute;
    left: 250px;
    top: 500px;
    width: 900px;
    padding-bottom: 506.25px; /* 16:9 ratio for 900px width */
    height: 0;
    overflow: hidden;
    background: #000;
    z-index: 5;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* CASE STUDY ----------------------------------------*/

.CaseStudy{
  position: relative;
          width: 1400px;
          height: 800px;
}

.ProblemSolution {
    position: absolute;
    left: 65px;
    top: 1190px;
    width: 610px;
    z-index: 2;
}

.vertical-divider {
    position: absolute;
    left: 700px;
    top: 1200px;
    width: 1px;
    height: 750px;
    background-color: black;
    z-index: 3;
}

.BriefAudience{
position: absolute;
left: 750px;
top:1190px;
width: 590px;
z-index: 2;
}





/* the film ----------------------------------------*/


.TheFilm{
    position: relative;
          width: 1400px;
          height: 800px;
}


.Run{
  position: absolute;
  left: 450px;
  top: 2150px;
  width: 500px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.Run.animate{
  opacity: 1;
  transform: translateY(0);
}


.ScriptImage{
  position: absolute;
  left: 950px;
  top: 5400px;
  width: 300px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.ScriptImage.animate {
  opacity: 1;
  transform: translateY(0);
}



.poster-container {
    position: absolute;
    left: 520px;
    top: 2300px;
    width: 350px;
    height: 500px;
    z-index: 1;
}

.Poster{
    position: relative;
    width: 350px;
    height: auto;
    z-index: 1;
}

/* Flyout Text Styles */
.flyout-text {
    position: absolute;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    z-index: 10;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Individual Flyout Positions and Animations */
.flyout-1 {
    top: 50px;
    left: -300px;
    transform: translateX(50px);
}

.flyout-2 {
    top: 150px;
    right: -300px;
    transform: translateX(-50px);
}

.flyout-3 {
    bottom: 150px;
    left: -350px;
    transform: translateX(50px);
}

.flyout-4 {
    bottom: 50px;
    right: -280px;
    transform: translateX(-50px);
}

/* Animate class to show flyouts */
.poster-container.show-flyouts .flyout-text {
    opacity: 1;
    transform: translateX(0);
}



.Roles{
  position: absolute;
  left: 85px;
  top: 5980px;
  width: 350px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.Roles.animate{
  opacity: 1;
  transform: translateY(0);
}


.Film1{
  position: absolute;
  left: 85px;
  top: 6150px;
  width: 600px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.Film1.animate{
  opacity: 1;
  transform: translateY(0);
}

.Film2{
  position: absolute;
  left: 790px;
  top: 6150px;
  width: 600px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.Film2.animate{
  opacity: 1;
  transform: translateY(0);
}

.Film3{
  position: absolute;
  left: 440px;
  top: 6450px;
  width: 600px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.Film3.animate{
  opacity: 1;
  transform: translateY(0);
}



.Film5{
  position: absolute;
  left: 350px;
  top: 6750px;
  width: 800px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.Film5.animate{
  opacity: 1;
  transform: translateY(0);
}

.Ticket{
  position: absolute;
  left: 790px;
  top: 6050px;
  width: 600px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.Ticket.animate{
  opacity: 1;
  transform: translateY(0);
}


.PropSetup{
  position: absolute;
  left: 150px;
  top: 7200px;
  width: 500px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.PropSetup.animate{
  opacity: 1;
  transform: translateY(0);
}


.PropImage{
  position: absolute;
  left: 150px;
  top: 7400px;
  width: 500px;
  z-index: 2;
 
}


.PosterDesign{
  position: absolute;
  left: 750px;
  top: 7200px;
  width: 600px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.PosterDesign.animate{
  opacity: 1;
  transform: translateY(0);
}

.PosterImage{
  position: absolute;
  left: 890px;
  top: 7400px;
  width: 300px;
  z-index: 2;
 
}


.Sponsor{
  position: absolute;
  left: 400px;
  top: 7900px;
  width: 600px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.Sponsor.animate{
  opacity: 1;
  transform: translateY(0);
}


.SponsorImages{
  position: absolute;
  left: 250px;
  top: 8060px;
  width: 900px;
  z-index: 2;
 
}

.Premiere3Heading{
  position: absolute;
  left: 300px;
  top: 8500px;
  width: 800px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.Premiere3Heading.animate{
  opacity: 1;
  transform: translateY(0);
}

/* Framed Photo */
.framed-photo {
  position: absolute;
  left: 420px;
  top: 8700px;
  z-index: 2;
  padding: 20px;
  background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
  border: 8px solid #3a3a3a;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.Premiere{
  width: 500px;
  display: block;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.Premiere.animate{
  opacity: 1;
  transform: translateY(0);
}

.Premiere{
  z-index: 2;

} 




/* My Role ----------------------------------------*/

.MyRole{
  position: relative;
  width: 1400px;
  height: 800px;
}

.TheWriter{
  position: absolute;
left: 85px;
top:5380px;
width: 620px;
z-index: 2;
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheWriter.animate{
  opacity: 1;
  transform: translateY(0);
}



.Script1{
    position: absolute;
    left: 85px;
    top: 5500px;
    width: 300px;
    z-index: 2;
    transition: all 0.4s ease;
    cursor: pointer;
}

.Script1:hover {
    transform: scale(1.3);
    z-index: 100;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}


.Script2{
    position: absolute;
    left: 400px;
    top: 5500px;
    width: 300px;
    z-index: 2;
    transition: all 0.4s ease;
    cursor: pointer;
}

.Script2:hover {
    transform: scale(1.3);
    z-index: 100;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.Script3{
    position: absolute;
    left: 715px;
    top: 5500px;
    width: 300px;
    z-index: 2;
    transition: all 0.4s ease;
    cursor: pointer;
}

.Script3:hover {
    transform: scale(1.3);
    z-index: 100;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}


.Script4{
    position: absolute;
    left: 1030px;
    top: 5500px;
    width: 300px;
    z-index: 2;
    transition: all 0.4s ease;
    cursor: pointer;
}

.Script4:hover {
    transform: scale(1.3);
    z-index: 100;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}






/* Cast and Crew */

.TheCast{
  position: absolute;
left: 520px;
top:2900px;
width: 350px;
z-index: 2;
opacity: 0;
transform: translateY(50px);
transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheCast.animate{
  opacity: 1;
  transform: translateY(0);
}


.TheCastImages{
  position: absolute;
  left: 120px;
  top: 3100px;
  width: 1200px;
  z-index: 2;
}


.ExecutiveProducer{ 
   position: absolute;
  left: 360px;
  top: 3700px;
  width: 700px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.ExecutiveProducer.visible {
  opacity: 1;
  transform: translateY(0);
}

.Wessie{    
  position: absolute;
  left: 500px;
  top: 3800px;
  width: 400px;
  z-index: 2;
}


.TheCrew{
    position: absolute;
  left: 500px;
  top: 4380px;
  width: 400px;
  z-index: 2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheCrew.visible {
  opacity: 1;
  transform: translateY(0);
}



.Abby{    
  position: absolute;
  left: 330px;
  top: 4550px;
  width: 180px;
  z-index: 2;
  transform: perspective(800px) rotateY(-15deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Abby:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}



.Abi{    
  position: absolute;
  left: 430px;
  top: 4550px;
  width: 190px;
  z-index: 3;
  transform: perspective(800px) rotateY(-8deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Abi:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}


.Braydon{    
  position: absolute;
  left: 255px;
  top: 4550px;
  width: 165px;
  z-index: 1;
  transform: perspective(800px) rotateY(-25deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Braydon:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Camryn{    
  position: absolute;
  left: 635px;
  top: 4550px;
  width: 210px;
  z-index: 5;
  transform: perspective(800px) rotateY(0deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Camryn:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}



.Dani{    
  position: absolute;
  left: 520px;
  top: 4550px;
  width: 200px;
  z-index: 4;
  transform: perspective(800px) rotateY(8deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Dani:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}




.Hannah{    
  position: absolute;
  left: 165px;
  top: 4550px;
  width: 150px;
  z-index: 0;
  transform: perspective(800px) rotateY(-35deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Hannah:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}



.LisaV{    
  position: absolute;
  left: 760px;
  top: 4550px;
  width: 180px;
  z-index: 4;
  transform: perspective(800px) rotateY(15deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.LisaV:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}



.Nic{    
  position: absolute;
  left: 850px;
  top: 4550px;
  width: 200px;
  z-index: 3;
  transform: perspective(800px) rotateY(25deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Nic:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}


.Ocean{    
  position: absolute;
  left: 950px;
  top: 4550px;
  width: 165px;
  z-index: 2;
  transform: perspective(800px) rotateY(35deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Ocean:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}



.Piper{    
  position: absolute;
  left: 1020px;
  top: 4550px;
  width: 140px;
  z-index: 1;
  transform: perspective(800px) rotateY(42deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Piper:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}





.Wiaan{    
  position: absolute;
  left: 1085px;
  top: 4550px;
  width: 150px;
  z-index: 0;
  transform: perspective(800px) rotateY(48deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Wiaan:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}


.Zara{    
  position: absolute;
  left: 1150px;
  top: 4550px;
  width: 150px;
  z-index: -1;
  transform: perspective(800px) rotateY(52deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.Zara:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}


/* Plan B Crew - Second Row */

.Aneme{    
  position: absolute;
  left: 330px;
  top: 4950px;
  width: 180px;
  z-index: 2;
  transform: perspective(800px) rotateY(-15deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Aneme:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Anke{    
  position: absolute;
  left: 760px;
  top: 4950px;
  width: 200px;
  z-index: 4;
  transform: perspective(800px) rotateY(15deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Anke:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.David{    
  position: absolute;
  left: 850px;
  top: 4950px;
  width: 210px;
  z-index: 3;
  transform: perspective(800px) rotateY(25deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.David:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Ghite{    
  position: absolute;
  left: 950px;
  top: 4950px;
  width: 195px;
  z-index: 2;
  transform: perspective(800px) rotateY(35deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Ghite:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Ilandre{    
  position: absolute;
  left: 520px;
  top: 4950px;
  width: 200px;
  z-index: 2;
  transform: perspective(800px) rotateY(8deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Ilandre:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Kati{    
  position: absolute;
  left: 225px;
  top: 4950px;
  width: 180px;
  z-index: 1;
  transform: perspective(800px) rotateY(-25deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Kati:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.LisaS{    
  position: absolute;
  left: 430px;
  top: 4950px;
  width: 200px;
  z-index: 3;
  transform: perspective(800px) rotateY(-8deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.LisaS:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Lumae{    
  position: absolute;
  left: 1075px;
  top: 4950px;
  width: 165px;
  z-index: 0;
  transform: perspective(800px) rotateY(48deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Lumae:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Micaela{    
  position: absolute;
  left: 1150px;
  top: 4950px;
  width: 160px;
  z-index: -1;
  transform: perspective(800px) rotateY(52deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Micaela:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Rachel{    
  position: absolute;
  left: 520px;
  top: 4950px;
  width: 190px;
  z-index: 4;
  transform: perspective(800px) rotateY(8deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Rachel:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Robyn{    
  position: absolute;
  left: 165px;
  top: 4950px;
  width: 150px;
  z-index: 0;
  transform: perspective(800px) rotateY(-35deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Robyn:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.Shani{    
  position: absolute;
  left: 635px;
  top: 4950px;
  width: 220px;
  z-index: 5;
  transform: perspective(800px) rotateY(0deg);
  transition: all 0.4s ease;
  cursor: pointer;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 8px solid white;
  background: white;
  padding: 8px;
}

.Shani:hover {
  transform: perspective(800px) rotateY(0deg) scale(1.2) translateY(-10px);
  z-index: 100;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}








































/* DSK PAGES ----------------------------------------*/



.DSKContent{
    position: relative;
          width: 1400px;
          height: 1200px;
}


.DSKTitleImage{
    position : absolute ;
    left : 300px;
    top : 150px;
    width : 800px;
    z-index: 2;
}

.DSKVideo{
    position: absolute;
    left: 300px;
    top: 500px;
    width: 800px;
    z-index: 2;
}

.DSKVideo2{
    position: absolute;
    left: 85px;
    top: 1200px;
    width: 600px;
    z-index: 2;
}

.DSKVideo3{
    position: absolute;
    left: 750px;
    top: 1650px;
    width: 600px;
    z-index: 2;
}

.SongTitle{
    position : absolute ;
    left : 800px;
    top : 1300px;
    width : 450px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.SongTitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.dsk-footer {
    top: 8300px;
}

.Artist{
    position : absolute ;
    left : 85px;
    top : 1760px;
    width : 500px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Artist.visible {
    opacity: 1;
    transform: translateY(0);
}

.ProblemSolutionDSK {
    position: absolute;
    left: 65px;
    top: 2200px;
    width: 560px;
    z-index: 2;
}

.DSK-divider-line {
    position: absolute;
    left: 702px;
    top: 2200px;
    width: 2px;
    height: 800px;
    background-color: black;
    z-index: 2;
}

.BriefAudienceDSK {
    position: absolute;
    left: 800px;
    top: 2192px;
    width: 610px;
    z-index: 2;
}

.DesignProcessDSK{
    position : absolute ;
    left : 350px;
    top : 3200px;
    width : 800px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.DesignProcessDSK.visible {
    opacity: 1;
    transform: translateY(0);
}

.DefinitionDSK{
    position : absolute ;
    left : 300px;
    top : 3300px;
    width : 900px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.DefinitionDSK.visible {
    opacity: 1;
    transform: translateY(0);
}

.TheScampsDSK{
    position : absolute ;
    left : 450px;
    top : 3500px;
    width : 500px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheScampsDSK.visible {
    opacity: 1;
    transform: translateY(0);
}


.TheLookDSK{
    position : absolute ;
    left : 500px;
    top : 4400px;
    width : 450px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheLookDSK.visible {
    opacity: 1;
    transform: translateY(0);
}

.Row1{
    position: absolute;
    left: 90px;
    top: 4600px;
    width: 1300px;
    z-index: 2;
}

.Row2{
    position: absolute;
    left: 90px;
    top: 5000px;
    width: 1300px;
    z-index: 2;
}



.Row3{
    position: absolute;
    left: 90px;
    top: 5400px;
    width: 1300px;
    z-index: 2;
}



.Text1{
    position: absolute;
    left: 220px;
    top: 4850px;
    width: 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Text1.visible {
    opacity: 1;
    transform: translateY(0);
}


.Text2{
    position: absolute;
    left: 200px;
    top: 5250px;
    width: 1100px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Text2.visible {
    opacity: 1;
    transform: translateY(0);
}


.Text3{
    position: absolute;
    left: 195px;
    top: 5650px;
    width: 1100px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Text3.visible {
    opacity: 1;
    transform: translateY(0);
}


.CharacterHeadingDSK{
    position : absolute ;
    left : 105px;
    top : 5900px;
    width : 900px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.CharacterHeadingDSK.visible {
    opacity: 1;
    transform: translateY(0);
}


.CharacterScampDSK{
    position: absolute;
    left: 180px;
    top: 6200px;
    width: 400px;
    z-index: 2;
}

.character-scamp-flyout {
    position: absolute;
    left: 250px;
    top: 6150px;
    color: black;
    padding: 0;
    font-size: 40px;
    font-weight: bold;
    z-index: 3;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.character-scamp-flyout.visible {
    opacity: 1;
    transform: translateY(0);
}



.CharacterPinkDSK{
    position: absolute;
    left: 800px;
    top: 6200px;
    width: 350px;
    z-index: 2;
}

.character-pink-flyout {
    position: absolute;
    color: black;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.character-pink-flyout.visible {
    opacity: 1;
}

/* EDGY CHARACTER - left side */
.character-pink-flyout-1 {
    left: 600px;
    top: 6350px;
    transform: translateX(-50px);
    transition-delay: 0s;
}

.character-pink-flyout-1.visible {
    transform: translateX(0);
}

/* GLASSES - left side, higher */
.character-pink-flyout-2 {
    left: 690px;
    top: 6180px;
    transform: translateX(-50px);
    transition-delay: 0.1s;
}

.character-pink-flyout-2.visible {
    transform: translateX(0);
}

/* LEATHER JACKET - top center */
.character-pink-flyout-3 {
    left: 870px;
    top: 6120px;
    transform: translateY(-50px);
    transition-delay: 0.2s;
}

.character-pink-flyout-3.visible {
    transform: translateY(0);
}

/* MESSY HAIR - right side, higher */
.character-pink-flyout-4 {
    left: 1120px;
    top: 6180px;
    transform: translateX(50px);
    transition-delay: 0.3s;
}

.character-pink-flyout-4.visible {
    transform: translateX(0);
}

/* BAD BOY VIBES - right side */
.character-pink-flyout-5 {
    left: 1140px;
    top: 6350px;
    transform: translateX(50px);
    transition-delay: 0.4s;
}

.character-pink-flyout-5.visible {
    transform: translateX(0);
}


.ColourPaletteHeadingDSK{
    position : absolute ;
    left : 340px;
    top : 6900px;
    width : 700px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.ColourPaletteHeadingDSK.visible {
    opacity: 1;
    transform: translateY(0);
}


.Colours{
    position: absolute;
    left: 400px;
    top: 7050px;
    width: 600px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Colours.visible {
    opacity: 1;
    transform: translateY(0);
}



.TheInspirationDSK{
    position : absolute ;
    left : 400px;
    top : 7500px;
    width : 600px;
    z-index: 2;
}


.Image1DSK{
    position: absolute;
    left: 180px;
    top: 7700px;
    width: 400px;
    z-index: 2;
}

.Image2DSK{
    position: absolute;
    left: 850px;
    top: 7700px;
    width: 350px;
    z-index: 2;
}

.inspiration-flyout {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: black;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.inspiration-flyout.visible {
    opacity: 1;
}

/* Neon Colours - top */
.inspiration-flyout-1 {
    top: 7800px;
    transform: translate(-50%, -50px);
    transition-delay: 0s;
}

.inspiration-flyout-1.visible {
    transform: translate(-50%, 0);
}

/* Bold */
.inspiration-flyout-2 {
    top: 7860px;
    transform: translate(-50%, -50px);
    transition-delay: 0.1s;
}

.inspiration-flyout-2.visible {
    transform: translate(-50%, 0);
}

/* Vibrant */
.inspiration-flyout-3 {
    top: 7920px;
    transform: translate(-50%, -50px);
    transition-delay: 0.2s;
}

.inspiration-flyout-3.visible {
    transform: translate(-50%, 0);
}

/* Gorillaz */
.inspiration-flyout-4 {
    top: 7980px;
    transform: translate(-50%, -50px);
    transition-delay: 0.3s;
}

.inspiration-flyout-4.visible {
    transform: translate(-50%, 0);
}

/* Pinks */
.inspiration-flyout-5 {
    top: 8040px;
    transform: translate(-50%, -50px);
    transition-delay: 0.4s;
}

.inspiration-flyout-5.visible {
    transform: translate(-50%, 0);
}



/* DSK Polaroid Stack */
.dsk-polaroid-section {
    position: absolute;
    left: 0;
    top: 3800px;
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.dsk-polaroid-stack {
    position: relative;
    width: 1000px;
    height: 500px;
    perspective: 1000px;
    margin: 0 auto;
}

.dsk-polaroid-stack .polaroid.stacked-0 {
    transform: translate(-150px, -200px) rotate(-5deg);
    z-index: 7;
}

.dsk-polaroid-stack .polaroid.stacked-1 {
    transform: translate(-150px, -200px) rotate(-3deg);
    z-index: 6;
}

.dsk-polaroid-stack .polaroid.stacked-2 {
    transform: translate(-150px, -200px) rotate(-1deg);
    z-index: 5;
}

.dsk-polaroid-stack .polaroid.stacked-3 {
    transform: translate(-150px, -200px) rotate(0deg);
    z-index: 4;
}

.dsk-polaroid-stack .polaroid.stacked-4 {
    transform: translate(-150px, -200px) rotate(1deg);
    z-index: 3;
}

.dsk-polaroid-stack .polaroid.stacked-5 {
    transform: translate(-150px, -200px) rotate(3deg);
    z-index: 2;
}

.dsk-polaroid-stack .polaroid.stacked-6 {
    transform: translate(-150px, -200px) rotate(5deg);
    z-index: 1;
}

/* DSK Spread positions */
.dsk-polaroid-stack .polaroid.spread-0 {
    transform: translate(-450px, -200px) rotate(-5deg) scale(0.85);
    z-index: 7;
}

.dsk-polaroid-stack .polaroid.spread-1 {
    transform: translate(-300px, -200px) rotate(-3deg) scale(0.85);
    z-index: 6;
}

.dsk-polaroid-stack .polaroid.spread-2 {
    transform: translate(-150px, -200px) rotate(-1deg) scale(0.85);
    z-index: 5;
}

.dsk-polaroid-stack .polaroid.spread-3 {
    transform: translate(0px, -200px) rotate(0deg) scale(0.85);
    z-index: 4;
}

.dsk-polaroid-stack .polaroid.spread-4 {
    transform: translate(150px, -200px) rotate(1deg) scale(0.85);
    z-index: 3;
}

.dsk-polaroid-stack .polaroid.spread-5 {
    transform: translate(300px, -200px) rotate(3deg) scale(0.85);
    z-index: 2;
}

.dsk-polaroid-stack .polaroid.spread-6 {
    transform: translate(450px, -200px) rotate(5deg) scale(0.85);
    z-index: 1;
}

/* Hover effects for DSK polaroids */
.dsk-polaroid-stack .polaroid:hover {
    z-index: 1000 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Hover effects for stacked DSK polaroids */
.dsk-polaroid-stack .polaroid.stacked-0:hover,
.dsk-polaroid-stack .polaroid.stacked-1:hover,
.dsk-polaroid-stack .polaroid.stacked-2:hover,
.dsk-polaroid-stack .polaroid.stacked-3:hover,
.dsk-polaroid-stack .polaroid.stacked-4:hover,
.dsk-polaroid-stack .polaroid.stacked-5:hover,
.dsk-polaroid-stack .polaroid.stacked-6:hover {
    z-index: 1000 !important;
    transform: translate(-150px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

/* Hover effects for spread DSK polaroids */
.dsk-polaroid-stack .polaroid.spread-0:hover {
    z-index: 1000 !important;
    transform: translate(-450px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.dsk-polaroid-stack .polaroid.spread-1:hover {
    z-index: 1000 !important;
    transform: translate(-300px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.dsk-polaroid-stack .polaroid.spread-2:hover {
    z-index: 1000 !important;
    transform: translate(-150px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.dsk-polaroid-stack .polaroid.spread-3:hover {
    z-index: 1000 !important;
    transform: translate(0px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.dsk-polaroid-stack .polaroid.spread-4:hover {
    z-index: 1000 !important;
    transform: translate(150px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.dsk-polaroid-stack .polaroid.spread-5:hover {
    z-index: 1000 !important;
    transform: translate(300px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}

.dsk-polaroid-stack .polaroid.spread-6:hover {
    z-index: 1000 !important;
    transform: translate(450px, -230px) rotate(0deg) scale(1.15) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
}


















/* GAME DESIGN SECTION  */


.GameDesignContent{
    position: relative;
          width: 1400px;
          height: 800px;
}

.gamedesign-footer {
    position: absolute;
    top: 16800px;
}



.GameDesignTitle{
    position : absolute ;
    left : 480px;
    top : 100px;
    width : 450px;
    z-index: 2;
  
}

.GameDesignTitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.wicked-explainer-video {
    position: absolute;
    left: 250px;
    top: 400px;
    width: 900px;
    z-index: 2;
    border-radius: 0;
    box-shadow: none;
}

.ProblemSolutionGame {
    position: absolute;
    left: 65px;
    top: 985px;
    width: 560px;
    z-index: 2;
}

.game-divider-line {
    position: absolute;
    left: 702px;
    top: 1000px;
    width: 2px;
    height: 750px;
    background-color: black;
    z-index: 2;
}

.BriefAudienceGame {
    position: absolute;
    left: 800px;
    top: 992px;
    width: 610px;
    z-index: 2;
}


.TheStorylineGame{
    position : absolute ;
    left : 350px;
    top : 1900px;
    width : 700px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheStorylineGame.visible {
    opacity: 1;
    transform: translateY(0);
}

.WickedDescriptionGame{
    position : absolute ;
    left : 270px;
    top : 2000px;
    width : 900px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.WickedDescriptionGame.visible {
    opacity: 1;
    transform: translateY(0);
}

.TheGamePlay{
    position : absolute ;
    left : 400px;
    top : 2220px;
    width : 600px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheGamePlay.visible {
    opacity: 1;
    transform: translateY(0);
}




.Line1Game{
    position: absolute;
    left: 200px;
    top: 2350px;
    width: 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Line1Game.visible {
    opacity: 1;
    transform: translateY(0);
}

.Line1_1Game{
    position: absolute;
    left: 490px;
    top: 2550px;
    width: 420px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Line1_1Game.visible {
    opacity: 1;
    transform: translateY(0);
}

.Line2Game{
    position: absolute;
    left: 200px;
    top: 2620px;
    width: 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Line2Game.visible {
    opacity: 1;
    transform: translateY(0);
}

.Line2_1Game{
    position: absolute;
    left: 470px;
    top: 2790px;
    width: 450px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Line2_1Game.visible {
    opacity: 1;
    transform: translateY(0);
}

.Line3Game{
    position: absolute;
    left: 200px;
    top: 2860px;
    width: 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Line3Game.visible {
    opacity: 1;
    transform: translateY(0);
}


.Line3_1Game{
    position: absolute;
    left: 520px;
    top: 3030px;
    width: 350px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Line3_1Game.visible {
    opacity: 1;
    transform: translateY(0);
}

.Line4Game{
    position: absolute;
    left: 200px;
    top: 3100px;
    width: 1000px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Line4Game.visible {
    opacity: 1;
    transform: translateY(0);
}








.ScampProcessGame{
    position : absolute ;
    left : 350px;
    top : 3300px;
    width : 700px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.ScampProcessGame.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Game Polaroid Stack */
.game-polaroid-section {
    position: absolute;
    top: 3400px;
    left: -100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.game-polaroid-stack {
    position: relative;
    width: 1000px;
    height: 600px;
    cursor: pointer;
}

.game-polaroid {
    position: absolute;
    width: 450px;
    background: white;
    padding: 18px;
    padding-bottom: 70px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.game-polaroid img {
    width: 100%;
    height: auto;
    display: block;
}

/* Stacked positions (default) */
.game-polaroid[data-index="1"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); z-index: 9; }
.game-polaroid[data-index="2"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(2deg); z-index: 8; }
.game-polaroid[data-index="3"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1deg); z-index: 7; }
.game-polaroid[data-index="4"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(4deg); z-index: 6; }
.game-polaroid[data-index="5"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg); z-index: 5; }
.game-polaroid[data-index="6"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(1deg); z-index: 4; }
.game-polaroid[data-index="7"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); z-index: 3; }
.game-polaroid[data-index="8"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(3deg); z-index: 2; }
.game-polaroid[data-index="9"] { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1deg); z-index: 1; }

/* Spread positions (fanned out) - tighter arrangement */
.game-polaroid.spread-0 {
    transform: translate(-400px, -150px) rotate(-6deg) scale(0.75);
    z-index: 9;
}

.game-polaroid.spread-1 {
    transform: translate(-300px, -150px) rotate(-4deg) scale(0.75);
    z-index: 8;
}

.game-polaroid.spread-2 {
    transform: translate(-200px, -150px) rotate(-2deg) scale(0.75);
    z-index: 7;
}

.game-polaroid.spread-3 {
    transform: translate(-100px, -150px) rotate(-1deg) scale(0.75);
    z-index: 6;
}

.game-polaroid.spread-4 {
    transform: translate(0px, -150px) rotate(0deg) scale(0.75);
    z-index: 5;
}

.game-polaroid.spread-5 {
    transform: translate(150px, -200px) rotate(2deg) scale(0.85);
    z-index: 4;
}

.game-polaroid.spread-5 {
    transform: translate(100px, -150px) rotate(1deg) scale(0.75);
    z-index: 4;
}

.game-polaroid.spread-6 {
    transform: translate(200px, -150px) rotate(2deg) scale(0.75);
    z-index: 3;
}

.game-polaroid.spread-7 {
    transform: translate(300px, -150px) rotate(4deg) scale(0.75);
    z-index: 2;
}

.game-polaroid.spread-8 {
    transform: translate(400px, -150px) rotate(6deg) scale(0.75);
    z-index: 1;
}

/* Hover effect - individual polaroid in stacked state */
.game-polaroid:hover {
    transform: translate(-50%, -280px) scale(1.15) !important;
    z-index: 1000 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Hover effects for spread polaroids */
.game-polaroid.spread-0:hover {
    transform: translate(-400px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-1:hover {
    transform: translate(-300px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-2:hover {
    transform: translate(-200px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-3:hover {
    transform: translate(-100px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-4:hover {
    transform: translate(0px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-5:hover {
    transform: translate(100px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-6:hover {
    transform: translate(200px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-7:hover {
    transform: translate(300px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}

.game-polaroid.spread-8:hover {
    transform: translate(400px, -180px) rotate(0deg) scale(1.0) !important;
    z-index: 1000 !important;
}




.Scamp1Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}

.Scamp2Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}


.Scamp3Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}


.Scamp4Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}


.Scamp5Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}

.Scamp6Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}



.Scamp7Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}



.Scamp8Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}



.Scamp9Game{
    position: absolute;
    left: 150px;
    top: 3500px;
    width: 400px;
    z-index: 2;
}







/* CHARACTER STYLES */

.Characters{
     position: relative;
          width: 1400px;
          height: 800px;
}

.TheHero{
    position : absolute ;
    left : 200px;
    top : 4100px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheHero.visible {
    opacity: 1;
    transform: translateY(0);
}

.GlindaTitle{
    position : absolute ;
    left : 900px;
    top : 4100px;
    width : 300px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.GlindaTitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.Glinda{
    position : absolute ;
    left : 220px;
    top : 4250px;
    width : 1000px;
    z-index: 2;
}

.DieCycleTitle{
    position : absolute ;
    left : 140px;
    top : 4880px;
    width : 300px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.DieCycleTitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.DieCycle{
    position : absolute ;
    left : 140px;
    top : 4980px;
    width : 300px;
    z-index: 2;
}


.BubbleShield{
    position : absolute ;
    left : 820px;
    top : 4880px;
    width : 450px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.BubbleShield.visible {
    opacity: 1;
    transform: translateY(0);
}

.Bubble{
    position : absolute ;
    left : 700px;
    top : 5050px;
    width : 700px;
    z-index: 2;
}

.JumpTitle{
    position : absolute ;
    left : 520px;
    top : 5400px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.JumpTitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.JumpCycle{
    position : absolute ;
    left : 340px;
    top : 5550px;
    width : 800px;
    z-index: 2;
}

/* munchkinland */


.Munchkinland{
     position: relative;
          width: 1400px;
          height: 800px;
}


.Level1Title{
    position : absolute ;
    left : 400px;
    top : 6100px;
    width : 700px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Level1Title.visible {
    opacity: 1;
    transform: translateY(0);
}

.MunchkinlandGame{
    position : absolute ;
    left : 20px;
    top : 6250px;
    width : 1400px;
    z-index: 2;
}


.Obstacles{
    position : absolute ;
    left : 85px;
    top : 6580px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Obstacles.visible {
    opacity: 1;
    transform: translateY(0);
}

.Cloud1Game{
    position: absolute;
    left: 85px;
    top: 6750px;
    width: 400px;
    z-index: 2;
}


.LogGame{
    position: absolute;
    left: 85px;
    top: 7100px;
    width: 400px;
    z-index: 2;
}




.Wheelbarrow1Game{
    position: absolute;
    left: 600px;
    top: 6800px;
    width: 350px;
    z-index: 2;
}


.Mushroom1Game{
    position: absolute;
    left: 1100px;
    top: 6750px;
    width: 200px;
    z-index: 2;
}



.TreeStumpGame{
    position: absolute;
    left: 1080px;
    top: 7060px;
    width: 250px;
    z-index: 2;
}

.CollectablesGame{
    position: absolute;
    left: 85px;
    top: 7450px;
    width: 420px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.CollectablesGame.visible {
    opacity: 1;
    transform: translateY(0);
}

.BubbleCollectablesGame{
    position: absolute;
    left: 135px;
    top: 7550px;
    width: 300px;
    z-index: 2;
}



.EnemiesGame{
    position : absolute ;
    left : 950px;
    top : 7450px;
    width : 270px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.EnemiesGame.visible {
    opacity: 1;
    transform: translateY(0);
}

.Tulips1Game{
    position: absolute;
    left: 860px;
    top: 7600px;
    width: 500px;
    z-index: 2;
}


.CharacterMovements{
    position : absolute ;
    left : 700px;
    top : 4750px;
    width : 600px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.CharacterMovements.visible {
    opacity: 1;
    transform: translateY(0);
}


.PropsGame{
    position : absolute ;
    left : 100px;
    top : 8000px;
    width : 280px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.PropsGame.visible {
    opacity: 1;
    transform: translateY(0);
}

.YellowTreeGame{
    position: absolute;
    left: 85px;
    top: 8200px;
    width: 300px;
    z-index: 2;
}


.YellowHouseGame{
    position: absolute;
    left: 420px;
    top: 8500px;
    width: 200px;
    z-index: 2;
}



.PinkTreeGame{
    position: absolute;
    left: 650px;
    top: 8200px;
    width: 300px;
    z-index: 2;
}


.PinkHouseGame{
    position: absolute;
    left: 85px;
    top: 8600px;
    width: 200px;
    z-index: 2;
}




.PurpleHouseGame{
    position: absolute;
    left: 700px;
    top: 8600px;
    width: 200px;
    z-index: 2;
}



.SmallPinkMushroomGame{
    position: absolute;
    left: 1150px;
    top: 8200px;
    width: 250px;
    z-index: 2;
}


.PinkBridgeGame{
    position: absolute;
    left: 990px;
    top: 8550px;
    width: 300px;
    z-index: 2;
}


.PreviousTilesGame{
    position : absolute ;
    left : 120px;
    top : 9100px;
    width : 450px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.PreviousTilesGame.visible {
    opacity: 1;
    transform: translateY(0);
}



.Tiles1Game{
    position: absolute;
    left: 0px;
    top: 9200px;
    width: 700px;
    z-index: 2;
}



.FinalTilesGame{
    position: absolute;
    left: 750px;
    top: 9200px;
    width: 600px;
    z-index: 2;
}


.FinalTileDesign{
    position : absolute ;
    left : 800px;
    top : 9100px;
    width : 500px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.FinalTileDesign.visible {
    opacity: 1;
    transform: translateY(0);
}


.BackgroundAssetsGame{
    position : absolute ;
    left : 425px;
    top : 9900px;
    width : 600px;
    z-index: 2;
}


.BackgroundTitleGame{
    position : absolute ;
    left : 530px;
    top : 9750px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.BackgroundTitleGame.visible {
    opacity: 1;
    transform: translateY(0);
}






/* ENCHANTED FOREST */


.EnchantedForest{
     position: relative;
          width: 1400px;
          height: 800px;
}


.Level2Title{
    position : absolute ;
    left : 330px;
    top : 10600px;
    width : 800px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Level2Title.visible {
    opacity: 1;
    transform: translateY(0);
}

.EnchantedForestGame{
    position : absolute ;
    left : 10px;
    top : 10750px;
    width : 1400px;
    z-index: 2;
}





.ObstaclesTitle{
    position : absolute ;
    left : 85px;
    top : 11100px;
    width : 350px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.ObstaclesTitle.visible {
    opacity: 1;
    transform: translateY(0);
}


.Log2Game{
    position: absolute;
    left: 85px;
    top: 11300px;
    width: 400px;
    z-index: 2;
}


.PurpleMushroomGame{
    position: absolute;
    left: 600px;
    top: 11200px;
    width: 300px;
    z-index: 2;
}



.TreeStump2Game{
    position: absolute;
    left: 1000px;
    top: 11260px;
    width: 250px;
    z-index: 2;
}


.CollectablesTitleGame{
    position : absolute ;
    left : 85px;
    top : 11650px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.CollectablesTitleGame.visible {
    opacity: 1;
    transform: translateY(0);
}


.BubbleEnchantedGame{
    position: absolute;
    left: 135px;
    top: 11750px;
    width: 300px;
    z-index: 2;
}


.EnemiesEnchantedGame{
    position : absolute ;
    left : 950px;
    top : 11730px;
    width : 380px;
    z-index: 2;
}

.Enemies_Titles{
    position : absolute ;
    left : 950px;
    top : 11650px;
    width : 380px;
    z-index: 2;
}


.EnemiesTitlesGame{
    position : absolute ;
    left : 1000px;
    top : 11650px;
    width : 230px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.EnemiesTitlesGame.visible {
    opacity: 1;
    transform: translateY(0);
}


.PropsTitleGame{
    position : absolute ;
    left : 600px;
    top : 12200px;
    width : 230px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.PropsTitleGame.visible {
    opacity: 1;
    transform: translateY(0);
}



.PropsImagesGame{
    position : absolute ;
    left : 220px;
    top : 12300px;
    width : 1000px;
    z-index: 2;
}



.PreviousTilesGame{
    position : absolute ;
    left : 120px;
    top : 13000px;
    width : 450px;
    z-index: 2;
}



.FinalTiles{
    position: absolute;
    left: 800px;
    top: 13000px;
    width: 500px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.FinalTiles.visible {
    opacity: 1;
    transform: translateY(0);
}


.FiestDesignTilesGame{
    position : absolute ;
    left : 35px;
    top : 13100px;
    width : 600px;
    z-index: 2;
}



.FinalDesignTilesGame{
    position : absolute ;
    left : 800px;
    top : 13100px;
    width : 500px;
    z-index: 2;
}


.Background3Game{
    position : absolute ;
    left : 85px;
    top : 13800px;
    width : 650px;
    z-index: 2;
}

.Background4Game{
    position : absolute ;
    left : 900px;
    top : 13800px;
    width : 300px;
    z-index: 2;
}






.BackgroundTilesGame{
    position : absolute ;
    left : 500px;
    top : 13700px;
    width : 450px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.BackgroundTilesGame.visible {
    opacity: 1;
    transform: translateY(0);
}








/* ENCHANTED FOREST */



.EmerladCity{
     position: relative;
          width: 1400px;
          height: 800px;
}


.EmeraldTitleGame{
    position : absolute ;
    left : 380px;
    top : 14300px;
    width : 700px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.EmeraldTitleGame.visible {
    opacity: 1;
    transform: translateY(0);
}


.EmeraldCityGame{
    position : absolute ;
    left : 10px;
    top : 14450px;
    width : 1400px;
    z-index: 2;
}



.EmeraldObstacleImageGame{
    position : absolute ;
    left : 85px;
    top : 15000px;
    width : 700px;
    z-index: 2;
}

.EmeraldObstacles{
    position : absolute ;
    left : 200px;
    top : 14850px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.EmeraldObstacles.visible {
    opacity: 1;
    transform: translateY(0);
}


.EmeraldPropsGame{
    position : absolute ;
    left : 950px;
    top : 14850px;
    width : 260px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.EmeraldPropsGame.visible {
    opacity: 1;
    transform: translateY(0);
}


.PropsEmerald{
    position : absolute ;
    left : 950px;
    top : 14950px;
    width : 300px;
    z-index: 2;
}

.EmeraldTileDesignGame{
    position : absolute ;
    left : 150px;
    top : 9100px;
    width : 350px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.EmeraldTileDesignGame.visible {
    opacity: 1;
    transform: translateY(0);
}

.TileImage{
    position : absolute ;
    left : 85px;
    top : 15600px;
    width : 600px;
    z-index: 2;
}


.TileEmerald{
    position : absolute ;
    left : 190px;
    top : 15450px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TileEmerald.visible {
    opacity: 1;
    transform: translateY(0);
}

.TileEmeraldImage{
    position : absolute ;
    left : 800px;
    top : 15600px;
    width : 500px;
    z-index: 2;
}



.BackgroundEmerald{
    position : absolute ;
    left : 800px;
    top : 15600px;
    width : 600px;
    z-index: 2;
}

.BackgroundTitleEmerald{
    position : absolute ;
    left : 870px;
    top : 15450px;
    width : 450px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.BackgroundTitleEmerald.visible {
    opacity: 1;
    transform: translateY(0);
}

.TheGoalEmerald{
    position : absolute ;
    left : 200px;
    top : 16200px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheGoalEmerald.visible {
    opacity: 1;
    transform: translateY(0);
}


.ElphabaEmerald{
    position : absolute ;
    left : 900px;
    top : 16200px;
    width : 350px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.ElphabaEmerald.visible {
    opacity: 1;
    transform: translateY(0);
}



.ElphabaImageGame{
    position : absolute ;
    left : 300px;
    top : 16350px;
    width : 800px;
    z-index: 2;
}





/* TITLE SEQUENCE TITLE */

.TitleSequenceContent{
     position: relative;
          width: 1400px;
          height: 800px;
}

.TitleSequenceTitle{
    position : absolute ;
    left : 380px;
    top : 150px;
    width : 700px;
    z-index: 2;
  
}

.monsters-inc-video {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 550px;
    width: 1000px;
    max-width: 90%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 2;
}



.MainDoor{
    position : absolute ;
    left : 1200px;
    top : 80px;
    width : 80px;
    z-index: 2;
}



.CaseStudy{
    position : absolute ;
    left : 130px;
    top : 1200px;
    width : 1250px;
    z-index: 2;
}



.titlesequence-footer {
    position: absolute;
    top: 5600px;
}



.MonstersInc_Title{
    position : absolute ;
    left : 420px;
    top : 2100px;
    width : 600px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.MonstersInc_Title.visible {
    opacity: 1;
    transform: translateY(0);
}


.TheCharacters{
    position : absolute ;
    left : 100px;
    top : 2400px;
    width : 500px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheCharacters.visible {
    opacity: 1;
    transform: translateY(0);
}

.LittleGirl{
    position : absolute ;
    left : 0px;
    top : 2550px;
    width : 200px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.LittleGirl.visible {
    opacity: 1;
    transform: translateY(0);
}


.BlueGuy{
    position : absolute ;
    left : 250px;
    top : 2530px;
    width : 190px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.BlueGuy.visible {
    opacity: 1;
    transform: translateY(0);
}

.GreenFigure{
    position : absolute ;
    left : 580px;
    top : 2540px;
    width : 200px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.GreenFigure.visible {
    opacity: 1;
    transform: translateY(0);
}


.LadyRed{
    position : absolute ;
    left : 840px;
    top : 2540px;
    width : 78px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.LadyRed.visible {
    opacity: 1;
    transform: translateY(0);
}



.LizardGuy{
    position : absolute ;
    left : 1000px;
    top : 2550px;
    width : 150px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.LizardGuy.visible {
    opacity: 1;
    transform: translateY(0);
}



.Spider{
    position : absolute ;
    left : 1200px;
    top : 2580px;
    width : 200px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.Spider.visible {
    opacity: 1;
    transform: translateY(0);
}


.TheActors{
    position : absolute ;
    left : 100px;
    top : 2950px;
    width : 350px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheActors.visible {
    opacity: 1;
    transform: translateY(0);
}


.Billy{
    position : absolute ;
    left : 150px;
    top : 3120px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px) rotate(-8deg);
    transition: all 0.3s ease;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
}

.Billy.visible {
    opacity: 1;
    transform: translateY(0) rotate(-8deg);
}

.Billy:hover {
    transform: translateY(-10px) rotate(-5deg) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.Billy::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.Billy::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 3px solid #DAA520;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
}


.JamesC{
    position : absolute ;
    left : 850px;
    top : 3120px;
    width : 350px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px) rotate(5deg);
    transition: all 0.3s ease;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
}

.JamesC.visible {
    opacity: 1;
    transform: translateY(0) rotate(5deg);
}

.JamesC:hover {
    transform: translateY(-10px) rotate(2deg) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.JamesC::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.JamesC::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 3px solid #DAA520;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
}


.Jennifer{
    position : absolute ;
    left : 850px;
    top : 3680px;
    width : 380px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px) rotate(7deg);
    transition: all 0.3s ease;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
}

.Jennifer.visible {
    opacity: 1;
    transform: translateY(0) rotate(7deg);
}

.Jennifer:hover {
    transform: translateY(-10px) rotate(3deg) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.Jennifer::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.Jennifer::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 3px solid #DAA520;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
}


.MaryGibs{
    position : absolute ;
    left : 150px;
    top : 3680px;
    width : 370px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px) rotate(-6deg);
    transition: all 0.3s ease;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
}

.MaryGibs.visible {
    opacity: 1;
    transform: translateY(0) rotate(-6deg);
}

.MaryGibs:hover {
    transform: translateY(-10px) rotate(-3deg) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.MaryGibs::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.MaryGibs::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 3px solid #DAA520;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
}



.Steve{
    position : absolute ;
    left : 150px;
    top : 4250px;
    width : 420px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px) rotate(-7deg);
    transition: all 0.3s ease;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
}

.Steve.visible {
    opacity: 1;
    transform: translateY(0) rotate(-7deg);
}

.Steve:hover {
    transform: translateY(-10px) rotate(-4deg) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.Steve::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.Steve::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 3px solid #DAA520;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
}

.BlueDoor{
    position : absolute ;
    left : 850px;
    top : 4250px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px) rotate(6deg);
    transition: all 0.3s ease;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
}

.BlueDoor.visible {
    opacity: 1;
    transform: translateY(0) rotate(6deg);
}

.BlueDoor:hover {
    transform: translateY(-10px) rotate(3deg) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.BlueDoor::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.BlueDoor::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border: 3px solid #DAA520;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
}

/* Dotted line connections */
.dotted-line-horizontal {
    position: absolute;
    border-top: 3px dashed #999;
    z-index: 1;
}

.dotted-line-vertical {
    position: absolute;
    border-left: 3px dashed #999;
    z-index: 1;
}

/* Line 1: Horizontal from Billy to JamesC */
.line-1 {
    left: 350px;
    top: 3105px;
    width: 525px;
}

/* Line 2: Vertical from JamesC down to Jennifer level */
.line-2 {
    left: 1025px;
    top: 3105px;
    height: 575px;
}

/* Line 3: Horizontal from MaryGibs to Jennifer */
.line-3 {
    left: 335px;
    top: 3665px;
    width: 690px;
}

/* Line 4: Vertical from MaryGibs down to Steve level */
.line-4 {
    left: 335px;
    top: 3665px;
    height: 585px;
}

/* Line 5: Horizontal from Steve to BlueDoor */
.line-5 {
    left: 360px;
    top: 4235px;
    width: 665px;
}

.TheColours{
    position : absolute ;
    left : 525px;
    top : 4900px;
    width : 400px;
    z-index: 2;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.TheColours.visible {
    opacity: 1;
    transform: translateY(0);
}




.ColoursPNG{
    position : absolute ;
    left : 480px;
    top : 5100px;
    width : 500px;
    z-index: 2;
}