/* ============================================================
   Buffalo Barn Collective — Preview Effects
   Additive layer. Remove the two <link>/<script> tags in HTML
   to revert instantly. Nothing here overrides core layout.
   ============================================================ */

/* ---- 1) Hero parallax: JS sets the translate, CSS just preps it ---- */
.hero__bg { will-change: transform; }

/* ---- 2) Cursor spotlight on dark sections ---- */
.bg-ink, .atelier-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bg-ink::after, .atelier-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(176, 141, 87, 0.16),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 0;
  mix-blend-mode: screen;
}
.bg-ink.fx-spotlight-on::after,
.atelier-strip.fx-spotlight-on::after { opacity: 1; }
.bg-ink > *,
.atelier-strip > * { position: relative; z-index: 1; }

/* ---- 3) Word-by-word headline reveal ---- */
.fx-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}
.fx-words.is-revealed .word { opacity: 1; transform: translateY(0); }

/* ---- 4) Cursor tilt on Collections tiles ---- */
.tile {
  transition:
    transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: center center;
}
.tile.fx-tilt {
  transform:
    perspective(1000px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateZ(0);
  box-shadow: 0 30px 60px rgba(15, 11, 9, 0.35);
}

/* ---- 5) Slow Ken Burns drift on hero photos ---- */
@keyframes heroKenBurns {
  0%   { transform: scale(1.06) translate(0%, 0%); }
  50%  { transform: scale(1.10) translate(-1.2%, -0.8%); }
  100% { transform: scale(1.06) translate(0.8%, 0.6%); }
}
/* Note: parallax JS will OVERRIDE this transform per scroll frame.
   The animation only plays when no scroll movement is happening. */
.hero__bg {
  animation: heroKenBurns 30s ease-in-out infinite alternate;
}

/* ---- Reduced motion: turn it all off ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; transform: scale(1.04) !important; }
  .fx-words .word { transition-duration: 0.01ms; }
  .tile.fx-tilt { transform: none; }
  .bg-ink::after, .atelier-strip::after { display: none; }
}