/* --- 1. Base and Initial State Styles --- */
#work-logo-1,
#work-logo-2,
#work-logo-3,
#work-logo-4,
#work-logo-5,
#work-logo-6,
#work-scroll-indicator-1,
#work-scroll-indicator-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.5s ease-in-out;
}

#work-logo-1,
#work-logo-2,
#work-logo-3,
#work-logo-4,
#work-logo-5,
#work-logo-6 {
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
}

#work-scroll-indicator-1 {
  transform: translateX(-50%) translateY(-50%) rotate(100deg);
}

#work-scroll-indicator-2 {
  transform: translateX(-50%) translateY(-50%) rotate(-3deg);
}

/* Explicit widths for each element, matching Tailwind utility classes in HTML */
#work-logo-1 { width: 175px; }
#work-logo-2 { width: 100px; }
#work-logo-3 { width: 100px; }
#work-logo-4 { width: 200px; }
#work-logo-5 { width: 100px; }
#work-logo-6 { width: 150px; }
#work-scroll-indicator-1 { width: 150px; }
#work-scroll-indicator-2 { width: 150px; }

@media (max-width: 639px) {
  #work-logo-6 { display: none; }
}

@media (min-width: 640px) {
  #work-logo-1 { width: 225px; }
  #work-logo-2 { width: 110px; }
  #work-logo-3 { width: 125px; }
  #work-logo-4 { width: 225px; }
  #work-logo-5 { width: 110px; }
  #work-logo-6 { width: 175px; }
}

@media (min-width: 768px) {
  #work-logo-1 { width: 225px; }
  #work-logo-2 { width: 110px; }
  #work-logo-3 { width: 125px; }
  #work-logo-4 { width: 225px; }
  #work-logo-6 { width: 175px; }
}

@media (min-width: 1024px) {
  #work-logo-1 { width: 225px; }
  #work-logo-2 { width: 125px; }
  #work-logo-3 { width: 155px; }
  #work-logo-4 { width: 250px; }
  #work-logo-6 { width: 200px; }
}

/* --- 2. Final State Styles (Triggered by adding the 'animate-in' class) --- */

#work-logo-1.animate-in {
  opacity: 1;
  --tw-translate-x: -170px;
  --tw-translate-y: -250px;
  --tw-rotate: -5deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

#work-logo-2.animate-in {
  opacity: 1;
  --tw-translate-x: 65px;
  --tw-translate-y: 60px;
  --tw-rotate: 5deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

#work-logo-3.animate-in {
  opacity: 1;
  --tw-translate-x: 70px;
  --tw-translate-y: -260px;
  --tw-rotate: 6deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

#work-logo-4.animate-in {
  opacity: 1;
  --tw-translate-x: -180px;
  --tw-translate-y: 45px;
  --tw-rotate: 9deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

#work-logo-5.animate-in {
  opacity: 1;
  --tw-translate-x: -180px;
  --tw-translate-y: 160px;
  --tw-rotate: -6deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

#work-logo-6.animate-in {
  opacity: 1;
  --tw-translate-x: 30px;
  --tw-translate-y: -350px;
  --tw-rotate: 4deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

#work-scroll-indicator-1.animate-in {
  opacity: 1;
  --tw-translate-x: -20px;
  --tw-translate-y: 230px;
  --tw-rotate: 100deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

#work-scroll-indicator-2.animate-in {
  opacity: 1;
  --tw-translate-x: -80px;
  --tw-translate-y: 225px;
  --tw-rotate: -3deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
}

/* --- 3. Responsive Final State Styles (Media Queries) --- */

@media (min-width: 640px) {
  #work-logo-1.animate-in {
    --tw-translate-x: -300px;
    --tw-translate-y: -320px;
  }
  #work-logo-2.animate-in {
    --tw-translate-x: 100px;
    --tw-translate-y: 115px;
  }
  #work-logo-3.animate-in {
    --tw-translate-x: 110px;
    --tw-translate-y: -340px;
  }
  #work-logo-4.animate-in {
    --tw-translate-x: -250px;
    --tw-translate-y: 75px;
  }
  #work-logo-5.animate-in {
    --tw-translate-x: -270px;
    --tw-translate-y: 240px;
  }
  #work-logo-6.animate-in {
    --tw-translate-x: -50px;
    --tw-translate-y: -380px;
  }
  #work-scroll-indicator-1.animate-in {
    --tw-translate-y: 330px;
  }
  #work-scroll-indicator-2.animate-in {
    --tw-translate-y: 345px;
  }
}

@media (min-width: 768px) {
  #work-logo-1.animate-in {
    --tw-translate-x: -330px;
    --tw-translate-y: -360px;
  }
  #work-logo-2.animate-in {
    --tw-translate-x: 100px;
    --tw-translate-y: 115px;
  }
  #work-logo-3.animate-in {
    --tw-translate-x: 150px;
    --tw-translate-y: -370px;
  }
  #work-logo-4.animate-in {
    --tw-translate-x: -300px;
    --tw-translate-y: 105px;
  }
  #work-logo-5.animate-in {
    --tw-translate-x: -320px;
    --tw-translate-y: 270px;
  }
  #work-logo-6.animate-in {
    --tw-translate-x: -50px;
    --tw-translate-y: -270px;
  }
  #work-scroll-indicator-1.animate-in {
    --tw-translate-y: 330px;
  }
  #work-scroll-indicator-2.animate-in {
    --tw-translate-x: -100px;
    --tw-translate-y: 325px;
  }
}

@media (min-width: 1024px) {
  #work-logo-1.animate-in {
    --tw-translate-x: -420px;
    --tw-translate-y: -420px;
  }
  #work-logo-2.animate-in {
    --tw-translate-x: 210px;
    --tw-translate-y: 180px;
  }
  #work-logo-3.animate-in {
    --tw-translate-x: 200px;
    --tw-translate-y: -450px;
  }
  #work-logo-4.animate-in {
    --tw-translate-x: -380px;
    --tw-translate-y: 190px;
  }
  #work-logo-5.animate-in {
    --tw-translate-x: -450px;
    --tw-translate-y: 350px;
  }
  #work-logo-6.animate-in {
    --tw-translate-x: -80px;
    --tw-translate-y: -280px;
  }
  #work-scroll-indicator-1.animate-in {
    --tw-translate-y: 330px;
  }
  #work-scroll-indicator-2.animate-in {
    --tw-translate-y: 325px;
  }
}

@media (min-width: 1280px) {
  #work-logo-1.animate-in {
    --tw-translate-y: -420px;
  }

  #work-logo-3.animate-in {
    --tw-translate-x: 240px;
    --tw-translate-y: -465px;
  }
}

/* --- Highlights Section --- */

.work-highlight {
  top: 50%;
  left: 50%;
}


/* Simplified highlight positioning */
#work-highlight-1 { --tw-translate-x: -360px; --tw-translate-y: -350px; }
#work-highlight-2 { --tw-translate-x: -70px;  --tw-translate-y: -390px; }
#work-highlight-3 { --tw-translate-x: 210px;  --tw-translate-y: -350px; }
#work-highlight-4 { --tw-translate-x: -360px; --tw-translate-y: 70px;   }
#work-highlight-5 { --tw-translate-x: -70px;  --tw-translate-y: 110px;  }
#work-highlight-6 { --tw-translate-x: 210px;  --tw-translate-y: 70px;   }

#work-highlight-1.promo-landscape { --tw-translate-y: -310px; }
#work-highlight-2.promo-landscape { --tw-translate-y: -310px; }
#work-highlight-3.promo-landscape { --tw-translate-y: -310px; }
#work-highlight-4.promo-landscape { --tw-translate-y: 90px; }
#work-highlight-5.promo-landscape { --tw-translate-y: 130px;  }
#work-highlight-6.promo-landscape { --tw-translate-y: 90px;   }

#work-highlight-1,
#work-highlight-2,
#work-highlight-3,
#work-highlight-4,
#work-highlight-5,
#work-highlight-6 {
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y));
}


@media (min-width: 1024px) {
#work-highlight-1, #work-highlight-4 { --tw-translate-x: -380px;}
#work-highlight-3, #work-highlight-6 { --tw-translate-x: 230px; }  
}



/* --- Side Hustles Section --- */

.side-hustle {
  top: 50%;
  left: 50%;
}

#side-hustle-1 { --tw-translate-x: -360px; --tw-translate-y: -400px; }
#side-hustle-2 { --tw-translate-x: -70px;  --tw-translate-y: -440px; }
#side-hustle-3 { --tw-translate-x: 210px;  --tw-translate-y: -400px; }
#side-hustle-4 { --tw-translate-x: -360px; --tw-translate-y: 70px;   }
#side-hustle-5 { --tw-translate-x: -70px;  --tw-translate-y: 110px;  }
#side-hustle-6 { --tw-translate-x: 210px;  --tw-translate-y: 70px;   }

#side-hustle-1,
#side-hustle-2,
#side-hustle-3,
#side-hustle-4,
#side-hustle-5,
#side-hustle-6 {
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y));
}


@media (min-width: 1024px) {
#side-hustle-1, #side-hustle-4 { --tw-translate-x: -380px;}
#side-hustle-3, #side-hustle-6 { --tw-translate-x: 230px; }  
}