.fan-container {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.fan-stack {
  margin-top: min(5vh, 50px);
  margin-bottom: min(8vh, 8vw);
  --card-w: min(40vw, 400px);
  --card-r: 1px;
  --border: 10px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.18);

  position: relative;
  height: calc(var(--card-w) * 1.2);
  display: grid;
  place-items: center;
  overflow: visible;
  cursor: pointer;
}

.snap {
  position: absolute;
  width: var(--card-w);
  aspect-ratio: 4 / 5;
  margin: 0;
  padding: var(--border);
  background: #f4e7f9;
  border-radius: var(--card-r);
  box-shadow: var(--shadow);
  transform-origin: center 65%;
  
  /* Layout applied dynamically via variables */
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
  
  /* Explicitly prevent z-index from transitioning so it snaps underneath instantly */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s;
  animation: fanIn 700ms cubic-bezier(.2, .9, .2, 1) backwards;
  will-change: transform, opacity;
}

.snap video {
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    filter: blur(0.1px);
}

.snap img, .snap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: calc(var(--card-r) - 4px);
}

.snap img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 
  Visual Index Classes 
  pos-1 is always Top, pos-N is always Bottom. 
  You can add .pos-5, .pos-6 etc. if you want even more images!
*/
.pos-1 { z-index: 100; --x: 0%;  --y: 0%; --rot: 1deg;  animation-delay: 0ms; }
.pos-2 { z-index: 99;  --x: 1.9%;  --y: 1.9%; --rot: 3.2deg;  animation-delay: 84ms; }
.pos-3 { z-index: 98;  --x: -2.1%; --y: 2.1%; --rot: -3deg; animation-delay: 185ms; }
.pos-4 { z-index: 97;  --x: 3.85%;  --y: 3.9%; --rot: 4.3deg;  animation-delay: 271ms; }
.pos-5 { z-index: 96;  --x: -3.92%; --y: 4.05%; --rot: -4.1deg; animation-delay: 358ms; }
.pos-6 { z-index: 95;  --x: 5.12%; --y: 6.05%; --rot: 6.6deg; animation-delay: 545ms; }
.pos-7 { z-index: 94;  --x: -5.24%; --y: 6.02%; --rot: -6.2deg; animation-delay: 730ms; }

/* Interactivity Phase: Pull the top card out to the RIGHT */
.pick-up {
  --x: 130%;  
  --y: 5%;    
  --rot: 15deg; 
  z-index: 110 !important; /* Keep above deck while sliding out */
  transition: transform 0.3s cubic-bezier(0.3, 1.2, 0.4, 1), z-index 0s;
}

/* Entrance animation */
@keyframes fanIn {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.92) rotate(var(--rot, 0deg));
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate(var(--x, 0), var(--y, 0)) scale(1) rotate(var(--rot, 0deg));
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .snap {
    animation: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .fan-stack {
    --card-w: 60vw;
    height: calc(var(--card-w) * 1.35);
  }
}