/* ============================================================
   3D Tilt Gallery — physical-paper tilt with specular highlight.
   Max ±8deg, specular ≤18% opacity. Touch + reduced-motion safe.
   ============================================================ */

/* ---------- Perspective container ---------- */
/* Applied to the gallery-grid so all children share one 3D stage */
.gallery-grid {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

/* ---------- Tiltable tile ---------- */
/*
  We target both .gallery-item (real photos) and .gallery-placeholder
  (placeholder tiles shown when no photos are loaded yet) so the effect
  works in every gallery state.
*/
.gallery-item,
.gallery-placeholder {
  transform-style: preserve-3d;
  /* Default rest state — smooth snap-back on mouseleave */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  /* GPU layer hint — promoted once the tilt class fires */
  will-change: transform;
}

/* Active tilt state applied by JS */
.gallery-item.is-tilting,
.gallery-placeholder.is-tilting {
  /*
    --rx  = rotateY (left/right lean, named for X-axis cursor position)
    --ry  = rotateX (up/down lean,    named for Y-axis cursor position)
    translateZ lifts the tile slightly off the plane — like picking up a card.
    Values are written by JS as deg strings: "4.2deg".
  */
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(20px);
  /* Soft shadow deepens as tile lifts — reinforces physicality */
  box-shadow:
    0 20px 48px rgba(26, 22, 20, 0.18),
    0  6px 16px rgba(26, 22, 20, 0.10);
}

/* ---------- Specular highlight layer ---------- */
/*
  Injected by JS as <div class="tilt-specular"> inside each tile.
  We cannot reuse .gallery-item::after — gallery.css already owns it
  for the oxblood multiply wash. A real DOM node gives us:
    - Independent opacity transition
    - CSS variable-driven radial-gradient position
    - Zero conflict with existing pseudo-elements
*/
.tilt-specular {
  position: absolute;
  inset: 0;
  /*
    z-index 1: sits between the image (auto) and the hover overlay (z:2).
    The oxblood ::after wash is also z:1 — both use blend modes so they
    composite cleanly. Text captions inside the overlay (z:2) remain
    fully visible above the gleam.
  */
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;

  /* The gradient origin tracks the cursor; --mx/--my are percentages set by JS */
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 25%,
    transparent 55%
  );

  /* Screen blend: light only adds, never darkens. Keeps it tasteful on dark tiles */
  mix-blend-mode: screen;

  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Specular reveals when tile is actively tilting */
.gallery-item.is-tilting   .tilt-specular,
.gallery-placeholder.is-tilting .tilt-specular {
  opacity: 1;
}

/* ---------- Mobile / touch: disable entirely ---------- */
/*
  On pointer:coarse devices there is no hover, tilt is pointless.
  JS also bails out early when matchMedia('(pointer: coarse)').matches.
  Belt-and-suspenders: CSS removes transition costs too.
*/
@media (hover: none) and (pointer: coarse) {
  .gallery-item,
  .gallery-placeholder {
    transform-style: flat;
    transition: none;
    will-change: auto;
  }

  .tilt-specular {
    display: none;
  }
}

/* ---------- Reduced motion: zero motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-placeholder {
    transition: none !important;
    transform: none !important;
  }

  .tilt-specular {
    display: none;
  }
}