/* Nestive depth layer — 3D look & feel enhancements.
   Applies on hover-capable devices; honours prefers-reduced-motion. */

/* --- 3D scroll reveals (upgrade of the base reveal) --- */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready [data-reveal] {
    opacity: 0;
    transform: perspective(1100px) translateY(38px) rotateX(7deg) scale(.985);
    transform-origin: 50% 100%;
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  html.reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: perspective(1100px) translateY(0) rotateX(0) scale(1);
  }
}

/* --- Tiltable cards --- */
.property-card, .journal-card, .area-card, .contact-card, .match-result {
  transform-style: preserve-3d;
  will-change: transform;
}
[data-depth-tilt] {
  transition: transform .18s ease-out, box-shadow .35s ease;
  position: relative;
}
[data-depth-tilt].depth-active {
  transition: box-shadow .35s ease;
  box-shadow:
    0 2px 6px rgba(20,38,61,.08),
    0 18px 40px -12px rgba(20,38,61,.28),
    0 42px 80px -32px rgba(20,38,61,.30);
  z-index: 3;
}
/* glare sheen */
.depth-glare {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--glare-x,50%) var(--glare-y,50%),
              rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2;
}
[data-depth-tilt].depth-active .depth-glare { opacity: 1; }

/* lift photos slightly off the card plane while tilting */
[data-depth-tilt].depth-active .card-photo img,
[data-depth-tilt].depth-active .journal-image img {
  transform: translateZ(26px) scale(1.03);
}
.card-photo img, .journal-image img {
  transition: transform .35s ease;
  transform-style: preserve-3d;
}

/* --- Hero stage parallax --- */
.home-stage { perspective: 1200px; }
.home-stage .hero-photo {
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
  will-change: transform;
}
.home-stage .hero-photo img { will-change: transform; }
.owner-hero-img, .article-hero img {
  transition: transform .3s ease-out;
  will-change: transform;
}

/* --- Buttons: lift + press depth --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease, color .2s ease;
  }
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(20,38,61,.35);
  }
  .btn:active { transform: translateY(0) scale(.98); }
  .round-btn, .save-btn, .compare-btn {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  }
  .round-btn:hover, .save-btn:hover, .compare-btn:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 10px 22px -8px rgba(20,38,61,.3);
  }
}

/* --- Floating ambience for the hero photo tag + status dot --- */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo-tag { animation: depth-float 5.5s ease-in-out infinite; }
  @keyframes depth-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }
}

/* --- Dialog entrances with depth --- */
@media (prefers-reduced-motion: no-preference) {
  dialog[open] {
    animation: depth-dialog .34s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes depth-dialog {
    from { opacity: 0; transform: perspective(900px) translateY(22px) rotateX(5deg) scale(.97); }
    to   { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0) scale(1); }
  }
}

/* Touch devices & reduced motion: no tilt artifacts */
@media (hover: none), (prefers-reduced-motion: reduce) {
  [data-depth-tilt] { transform: none !important; }
  .depth-glare { display: none; }
}