* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

section {
  max-width: 100vw;
  overflow-x: clip;
}


/* Essential for 3D perspective without breaking layout */
.scene { perspective: 1000px; transform-style: preserve-3d; }
.layer { will-change: transform; }

/* Floating images: Use percentages so they never "disappear" */
.floater { 
    position: absolute; 
    width: 12vw; 
    aspect-ratio: 4/5; 
    object-fit: cover; 
    border-radius: 12px;
    pointer-events: none;
}

/* marquee section css  */
@keyframes marquee {
  0% { transform: translateX(0);}
  100% { transform: translateX(-50%);}
}
.animate-marquee {
  animation: marquee 25s linear infinite;
  will-change: transform;
}
.animate-marquee.paused,
.animate-marquee:hover {
  animation-play-state: paused !important;
}
.brand-item {
  position: relative;
  cursor: pointer;
  color: #00000044; /* Soft/dark grey */
  background: transparent;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  transition:
    color 0.18s,
    background 0.18s,
    filter 0.18s,
    letter-spacing 0.22s,
    text-shadow 0.2s;
  text-shadow: 0 2px 18px rgba(30,30,30,0.07);
  user-select: none;
}
.brand-item:hover, .brand-item:focus {
  color: #101010 !important;
  background: transparent !important;
  letter-spacing: .25em;
  text-shadow: 0 8px 30px #29292930, 0 2px 8px #25252530;
  animation: marqueepop 0.35s cubic-bezier(.22,.68,.39,1.32);
}
@keyframes marqueepop {
  0% { transform: scale(1) rotate(0deg);}
  20% { transform: scale(1.13) rotate(-2deg);}
  60% { transform: scale(1.07) rotate(2deg);}
  100% { transform: scale(1) rotate(0deg);}
}
/* Added: Smaller font/spacing for small screens only. sm: and md: responsive classes take over above 640px */
@media (max-width: 639px) {
  .brand-item {
    font-size: 1rem !important;
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    letter-spacing: 0.13em !important;
  }
}


/* Smooth reveal animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* where we contribute accordion  */
.acc-item {
  transition: all 0.3s ease;
}

.acc-item.active p {
  color: #EC4D20;
}

.marquee-wrapper { display: flex; overflow: hidden; }
        .marquee-inner { display: flex; white-space: nowrap; }
        .skew-up { transform: skewY(-3deg); }
        .skew-down { transform: skewY(3deg); }

       /* Force cursor to be top-level */
    
       .project {
         position: relative;
       }
       
       /* FIXED STYLE BACKGROUND */
       .bg-layer {
         position: absolute;
         inset: 0;
         background-size: cover;
         background-position: center;
         transition: transform 0.8s ease, background-position 1.2s ease;
         filter: brightness(0.75);
       }
       

       .project:hover .bg-layer {
         transform: scale(1.1);
       }

       @media (max-width: 768px) {
        .floater {
          width: 18vw;
          opacity: 0.7;
        }
      }