/* ==========================================================================
   Whyni Wood - board spotlight
   The Africa board lifts and turns in 3D as it scrolls through the viewport.
   Real cut-out photograph on CSS transforms. No WebGL, no dependencies.
   Degrades to a plain static image without JS or under reduced motion.
   ========================================================================== */

.spotlight {
  position: relative;
  background: var(--clr-sand);
  overflow: hidden;
}

.spotlight__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: center;
}

.spotlight__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

/* Warm pool of light behind the board */
.spotlight__glow {
  position: absolute;
  left: 50%; top: 48%;
  width: 78%; height: 78%;
  transform: translate(-50%,-50%) scale(calc(0.75 + var(--p, 0) * 0.35));
  background: radial-gradient(circle, rgba(192,138,62,0.20), rgba(192,138,62,0.05) 48%, transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

/* Contact shadow on the floor */
.spotlight__shadow {
  position: absolute;
  left: 50%; top: 74%;
  width: 52%; height: 9%;
  transform: translate(-50%,-50%) scaleX(calc(0.7 + var(--p,0) * 0.4));
  background: radial-gradient(ellipse, rgba(1,24,29,0.32), transparent 70%);
  filter: blur(16px);
  opacity: calc(0.35 + var(--p,0) * 0.35);
  pointer-events: none;
}

/* THE BOARD
   Enters tilted away, rotates flat and grows as it reaches centre. */
.spotlight__board {
  position: relative;
  z-index: 2;
  width: min(92%, 520px);
  transform-style: preserve-3d;
  transform:
    rotateX(calc(52deg - var(--p, 0) * 46deg))
    rotateZ(calc(-14deg + var(--p, 0) * 14deg))
    translateY(calc((0.5 - var(--p, 0)) * 34px))
    scale(calc(0.82 + var(--p, 0) * 0.2));
  filter: drop-shadow(0 calc(12px + var(--p,0) * 22px) calc(16px + var(--p,0) * 24px) rgba(1,24,29,0.34));
  will-change: transform;
}
.spotlight__board img { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .spotlight__stage { perspective: none; }
  .spotlight__board { transform: none; width: min(88%, 460px); }
  .spotlight__glow, .spotlight__shadow { display: none; }
}

html.no-js .spotlight__stage { perspective: none; }
html.no-js .spotlight__board { transform: none; }
html.no-js .spotlight__glow,
html.no-js .spotlight__shadow { display: none; }