/* =====================================================================
   3D tilt cards  (.bjt)
   ---------------------------------------------------------------------
   The Golden Journeys destination cards (2026-09-24, the designer asked
   for "3D cards"). js/bj-tilt.js marks each card .bjt, adds .is-tilting
   while the pointer is over it, and writes four custom properties as
   the pointer moves: --bjt-rx and --bjt-ry, the lean in each axis, and
   --bjt-mx / --bjt-my, where the pointer is as a percentage of the card.
   Everything visible is drawn here from those four numbers.

   The card is a scroll-snap link with overflow: hidden and its own
   ::before (an inset hairline) and ::after (the gradient the words sit
   on) in css/bj-golden.css. So:

     - perspective() rides inside the card's own transform rather than
       on the row, because the row is a scroll container and a
       perspective on it would shift as the row scrolls;
     - the depth is drawn as parallax, not translateZ: overflow: hidden
       flattens the card's children, so the photograph slides gently
       AGAINST the lean and the words WITH it, which reads as depth
       without needing a 3D context;
     - the highlight is painted on the existing ::before, which already
       covers the card above the picture, so no extra markup.

   Load this after bj-golden.css: its :hover rules and these share
   specificity, and these have to win while the card is tilting.
   ===================================================================== */

.bjt {
  --bjt-rx: 0deg;
  --bjt-ry: 0deg;
  --bjt-mx: 50%;
  --bjt-my: 50%;
  transform: perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease;
  will-change: transform;
}

/* leaning: quick to follow the pointer, slow to settle */
.bjt.is-tilting {
  transform:
    perspective(1100px)
    rotateX(var(--bjt-rx))
    rotateY(var(--bjt-ry))
    translateY(-8px)
    scale(1.035);
  transition: transform .09s linear, box-shadow .45s ease;
  box-shadow: 0 34px 54px -26px rgba(35, 48, 27, .8);
  z-index: 3;
}

/* the highlight, following the pointer over the picture */
.bjt.is-tilting::before {
  background-image: radial-gradient(
    circle at var(--bjt-mx) var(--bjt-my),
    rgba(255, 255, 255, .30) 0%,
    rgba(255, 255, 255, .10) 28%,
    rgba(255, 255, 255, 0) 55%);
}

/* ---- the Golden Journeys card's layers (css/bj-golden.css) ----
   The photograph slides against the lean, the words with it. 6% and
   2.5% of the card's own width are the whole travel across a card, so
   a 270px card moves the picture ~16px and the caption ~7px. */
.bjt img {
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.bjt.is-tilting img {
  transform:
    scale(1.12)
    translate(calc((50% - var(--bjt-mx)) * .06), calc((50% - var(--bjt-my)) * .06));
  transition: transform .09s linear;
}
.bjt .gj-card__body {
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.bjt.is-tilting .gj-card__body {
  transform: translate(calc((var(--bjt-mx) - 50%) * .05), calc((var(--bjt-my) - 50%) * .05));
  transition: transform .09s linear;
}

/* keyboard: no pointer to follow, so a fixed lean and the same lift */
.bjt:focus-visible {
  transform: perspective(1100px) rotateX(3deg) rotateY(-4deg) translateY(-8px) scale(1.035);
  box-shadow: 0 34px 54px -26px rgba(35, 48, 27, .8);
}

@media (prefers-reduced-motion: reduce) {
  .bjt, .bjt.is-tilting, .bjt:focus-visible { transform: none; transition: none; }
  .bjt.is-tilting img, .bjt.is-tilting .gj-card__body { transform: none; }
}