/* Hollis & Vane (fictional demo by Weblancer Agency) - v3 "depth" layer, Oct 27.
   Loaded after v3.css on the homepage only. Pure CSS 3D transforms, driven by
   assets/js/depth.js (requestAnimationFrame, no libraries).
   - html.d3 is added by depth.js only when motion is allowed, so without JS or with
     prefers-reduced-motion the page stays exactly flat and static (v3 behaviour).
   - The hero text uses the individual `translate` property, so it composes with the
     load animation and with main.js, which drives `transform` and `opacity`. */

/* ---------- static depth (also kept with reduced motion) ---------- */
.bookbar {
  position: relative;
  border-color: #3a3a3a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 2px 4px rgba(0,0,0,.35),
    0 18px 36px -16px rgba(0,0,0,.85),
    0 44px 80px -40px rgba(0,0,0,.9);
}
.bookbar .btn--primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px -10px rgba(201,164,108,.55); }
.svc, .steps3 li { position: relative; }
.svc, .bcard, .steps3 li { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }

/* ---------- home gallery strip ---------- */
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.shots li { margin: 0; }
.shots li:nth-child(even) { margin-top: 2.2rem; }
.shots a { display: block; position: relative; overflow: hidden; border-radius: var(--r); background: #1a1a1a; border: 1px solid var(--line); }
.shots img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease); }
.shots a:hover img { transform: scale(1.035); }
.shots figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem .9rem .8rem; font-size: .82rem; color: #E6E6E6; background: linear-gradient(180deg, rgba(11,11,11,0), rgba(11,11,11,.85)); }
.shots figure { margin: 0; }
@media (min-width: 900px) {
  .shots { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: start; }
  .shots li:nth-child(even) { margin-top: 3.5rem; }
  .shots figcaption { font-size: .86rem; padding: 3rem 1.1rem 1rem; }
}

/* ---------- everything below only runs with motion allowed ---------- */

/* hero: three layers at different depths (photo far, text middle, booking bar near) */
.d3 .hero__media { scale: 1.06; will-change: translate; }
.d3 .hero__inner > .kicker,
.d3 .hero__inner > h1,
.d3 .hero__inner > .hero__sub { will-change: translate; }
.d3 .bookbar { will-change: transform; transform-origin: 50% 100%; }

/* 3D scroll reveal: rise in from slightly below and behind, tipped back, staggered */
.d3 [data-reveal] {
  opacity: 0;
  transform: perspective(1100px) translate3d(0, 44px, -60px) rotateX(8deg);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s);
}
.d3 [data-reveal].is-in { opacity: 1; transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0deg); }
/* once revealed, JS drives the tilt cards frame by frame: no CSS lag on transform */
.d3 [data-tilt].is-live { transition: opacity .9s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); will-change: transform; }

/* tilt cards: lift shadow and soft glare that follows the cursor */
.d3 [data-tilt] { --lift: 0; transform-origin: 50% 50%; }
.d3 [data-tilt].is-live {
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 calc(var(--lift) * 28px) calc(var(--lift) * 56px) calc(var(--lift) * -18px) rgba(0,0,0,.85),
    0 calc(var(--lift) * 8px) calc(var(--lift) * 16px) calc(var(--lift) * -6px) rgba(0,0,0,.5);
}
.d3 [data-tilt].is-hover { border-color: #3a3a3a; }
.glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.11), rgba(255,255,255,.03) 32%, rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.is-hover > .glare { opacity: 1; }

/* gallery strip: photos sit on layers that move at different speeds */
.d3 .shots { perspective: 1600px; }
.d3 .shots li { will-change: transform; }

/* band photo: slower layer behind the call to action */
.d3 .band__img { inset: -12% 0 auto 0; height: 124%; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .d3 .hero__media { scale: none; }
  .glare { display: none; }
}