@keyframes slide-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-up {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-left {
  animation: slide-left 1s ease-out forwards;
}
.animate-slide-right {
  animation: slide-right 1s ease-out forwards;
}
.fade-in-up {
  opacity: 0;
  animation: fade-in-up 1s ease-out forwards;
}
body {
  font-family: 'Inter', sans-serif;
}
mission-wrapper {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mission-text {
  font-size: 5rem;
  font-style: italic;
  color: #4B5563;
  white-space: nowrap;
  overflow: hidden;
}

/* Card base */
.project-card{
  position:absolute; width:clamp(220px, 24vw, 360px); height:clamp(300px, 36vw, 520px);
  border-radius:22px; overflow:hidden; background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.18); transition:transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s;
  backface-visibility:hidden; will-change:transform;
}
.project-card img{ width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none; }

/* Positions (mobile-first values that already look good) */
.project-center  { z-index:10; transform:translateZ(0) scale(1.06); }
.project-left-1  { z-index:6;  transform:translateX(-200px) translateZ(-110px) scale(.9);   filter:grayscale(100%); opacity:.95; }
.project-right-1 { z-index:6;  transform:translateX( 200px) translateZ(-110px) scale(.9);   filter:grayscale(100%); opacity:.95; }
.project-left-2  { z-index:2;  transform:translateX(-400px) translateZ(-300px) scale(.82);  filter:grayscale(100%); opacity:.75; }
.project-right-2 { z-index:2;  transform:translateX( 400px) translateZ(-300px) scale(.82);  filter:grayscale(100%); opacity:.75; }

/*TEAM DOTS*/
.project-dot{
  width:10px; height:10px; border-radius:9999px;
  background:rgba(0, 0, 0, 0.25); transition:transform .2s, background .2s;
}
.project-dot.active{ background:#000000; transform:scale(1.15); }

/* Tighten on phones (keep your “perfect” phone vibe) */
@media (max-width: 768px){
  .project-card{ width:220px; height:300px; }
  .project-left-2,.project-right-2{ transform:translateX(0) translateZ(-340px) scale(.74); opacity:.45; }
}

/* Spread a bit more on desktops so it feels like your screenshot */
@media (min-width: 1024px){
  .project-left-1  { transform:translateX(-260px) translateZ(-120px) scale(.9);  }
  .project-right-1 { transform:translateX( 260px) translateZ(-120px) scale(.9);  }
  .project-left-2  { transform:translateX(-520px) translateZ(-320px) scale(.82); }
  .project-right-2 { transform:translateX( 520px) translateZ(-320px) scale(.82); }
}
@media (prefers-reduced-motion: reduce){
  .project-card{ transition: none !important; }
}

.text-shadow-white {
  text-shadow: 3px 3px 10px rgba(255,255,255,0.9),
               3px 3px 12px rgba(255,255,255,0.7);
               }
.text-shadow-black {
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9),
               0 0 6px rgba(0, 0, 0, 0.7);
               }
/* hmmm sharp outline
.text-shadow-black
   color: black;
  text-shadow: 
    1px 1px 0 white,
   -1px 1px 0 white,
    1px -1px 0 white,
   -1px -1px 0 white;
} */