/* ============================================================
   GoAtlas 3D System
   Adds real dimensionality site-wide: tilt-responsive cards,
   depth-layered heroes, and an ambient starfield for heroes that
   have no photo. Loaded after goatlas-luxury.css.

   Performance & accessibility guards:
   - Tilt/parallax only activate on devices with a precise pointer
     (hover:hover and pointer:fine) — touchscreens get a clean static
     card instead of a broken half-tilted one.
   - prefers-reduced-motion disables all of it.
   ============================================================ */

/* ---------- 3D tilt cards ---------- */
@media (hover: hover) and (pointer: fine) {
  /* Override the slower luxury.css hover transition specifically while
     tilt is active — the tilt effect updates continuously with the
     cursor and needs a fast, responsive transition, not the 0.55–0.6s
     one used for the simple hover-lift on non-tilting elements. */
  .tilt-3d{
    transition: transform .12s ease-out !important;
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
  }
  .tilt-3d-inner{
    transform-style: preserve-3d;
    transition: transform .15s ease-out;
  }
  .tilt-3d .item-photo, .tilt-3d .g-card > img, .tilt-3d .dest-photo,
  .tilt-3d .banner-tile img{
    transform: translateZ(28px);
    transition: transform .15s ease-out;
  }
  /* luxury.css puts a slow !important 1.1s transition directly on these
     img elements for its own hover-zoom effect — override it here so
     the same images can also respond instantly to cursor-driven tilt. */
  .tilt-3d .item-photo img, .tilt-3d .g-card img, .tilt-3d .dest-photo img,
  .tilt-3d .banner-tile img{
    transition: transform .15s ease-out !important;
  }
  .tilt-3d h3, .tilt-3d .item-body > *{
    transform: translateZ(14px);
  }
  .tilt-3d .btn-primary{
    transform: translateZ(22px);
  }
  .tilt-shine{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.22), transparent 55%);
    opacity:0; transition:opacity .2s ease; z-index:5; border-radius:inherit;
  }
  .tilt-3d:hover .tilt-shine{ opacity:1; }
}

/* ---------- Hero depth parallax ---------- */
@media (hover: hover) and (pointer: fine) {
  .hero-photo{ perspective: 1200px; }
  .hero-photo img{ transition: transform .25s ease-out; will-change: transform; }
  .hero-inner, .hero-flex .hero-inner{ transition: transform .25s ease-out; will-change: transform; }
}

/* ---------- Ambient starfield for photo-less heroes ---------- */
.hero{ position: relative; }
.gx-starfield{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero > .wrap, .hero > .hero-flex, .hero .hero-inner{ position:relative; z-index:2; }

@media (prefers-reduced-motion: reduce){
  .tilt-3d-inner, .hero-photo img, .hero-inner{ transition:none !important; transform:none !important; }
}