/* home-motion.css — homepage only (client order 2026-10-21: parallax scrolling +
   text zoom/fade-in on scroll, featured collage slide-in + float).
   Loaded by includes/home-motion.php on the front page. Everything is opt-in:
   the html element gets .dvm-ready from home-motion.js before any element is
   hidden, so without JavaScript (or with reduced motion) the page looks as before. */

/* Hero title: three 90px headings in a 640px column. On 1280–1400px laptops
   "COLLECTIBLES" does not fit and breaks mid-word ("COLLECTIBLE / S"). Scale the
   title with the screen there; phones/tablets keep their own Elementor size. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .dv-hero .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(56px, 6.2vw, 90px) !important;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

/* ── Reveal on scroll (headings zoom in, text / buttons / images fade up) ── */
.dvm-ready .dvm-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--dvm-delay, 0ms);
  will-change: opacity, transform;
}
.dvm-ready .dvm-reveal.dvm-reveal--zoom {
  transform: translate3d(0, 18px, 0) scale(.92);
  transform-origin: 50% 70%;
}
.dvm-ready .dvm-reveal.dvm-in {
  opacity: 1;
  transform: none;
}
.dvm-ready .dvm-reveal.dvm-in.dvm-done { will-change: auto; transition-delay: 0ms; }

/* ── Parallax backgrounds (driven by CSS vars from home-motion.js) ─────── */
/* Stamps overlay behind the hero (Elementor background overlay on the page container). */
.dvm-ready.dvm-home .elementor-element-31d24bd::before {
  background-position: 0 var(--dvm-hero-y, 0px) !important;
}
/* CTA photo ("Become a part…"): a layer injected by the script, moved on scroll. */
.dvm-ready .dvm-plx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.dvm-ready .dvm-plx > .dvm-plx-layer {
  position: absolute;
  left: 0; right: 0;
  top: -18%; bottom: -18%;
  z-index: -1;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--dvm-plx-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
}

/* ── Featured collage: the two small photos that touch the big magnifier photo
   (c3 top-right coins, c4 coins left of it) lie in front of it (client 2026-10-26). */
.dv-collage img.dv-c3,
.dv-collage img.dv-c4 { z-index: 2; }

/* ── Featured collage: slide in from off-screen, then float ──────────────── */
.dvm-ready .dv-collage img {
  opacity: 0;
  transition: translate 1.15s cubic-bezier(.22,.61,.36,1), opacity .9s ease;
  transition-delay: var(--dvm-delay, 0ms);
  will-change: translate, transform, opacity;
}
.dvm-ready .dv-collage img.dv-c1,
.dvm-ready .dv-collage img.dv-c2,
.dvm-ready .dv-collage img.dv-c4 { translate: -70vw 0; }
.dvm-ready .dv-collage img.dv-c3,
.dvm-ready .dv-collage img.dv-c6 { translate: 70vw 0; }
.dvm-ready .dv-collage img.dv-c5 { translate: 0 60vh; }
.dvm-ready .dv-collage.dvm-in img { opacity: 1; translate: 0 0; }

/* Gentle float with individual timing once the slide-in is finished. */
.dvm-ready .dv-collage.dvm-float img { animation: dvm-float var(--dvm-float-dur, 6s) ease-in-out var(--dvm-float-delay, 0s) infinite; }
.dvm-ready .dv-collage.dvm-float img.dv-c1 { --dvm-float-dur: 7.2s; --dvm-float-delay: -1.1s; }
.dvm-ready .dv-collage.dvm-float img.dv-c2 { --dvm-float-dur: 5.6s; --dvm-float-delay: -2.4s; }
.dvm-ready .dv-collage.dvm-float img.dv-c3 { --dvm-float-dur: 6.4s; --dvm-float-delay: -0.6s; }
.dvm-ready .dv-collage.dvm-float img.dv-c4 { --dvm-float-dur: 5.9s; --dvm-float-delay: -3.2s; }
.dvm-ready .dv-collage.dvm-float img.dv-c5 { --dvm-float-dur: 8.1s; --dvm-float-delay: -1.8s; }
.dvm-ready .dv-collage.dvm-float img.dv-c6 { --dvm-float-dur: 6.8s; --dvm-float-delay: -4.0s; }
@keyframes dvm-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

/* Phones / tablets: the collage is a 2-column grid there — shorter travel so
   nothing flies across the small screen, slightly smaller float. */
@media (max-width: 1200px) {
  .dvm-ready .dv-collage img.dv-c1,
  .dvm-ready .dv-collage img.dv-c4 { translate: -40vw 0; }
  .dvm-ready .dv-collage img.dv-c3,
  .dvm-ready .dv-collage img.dv-c6 { translate: 40vw 0; }
  .dvm-ready .dv-collage img.dv-c2,
  .dvm-ready .dv-collage img.dv-c5 { translate: 0 40px; }
  .dvm-ready .dv-collage img { transition-duration: .9s, .7s; }
  @keyframes dvm-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -6px, 0); }
  }
  .dvm-ready .dvm-reveal { transform: translate3d(0, 20px, 0); }
}
/* The per-image start positions above have the same specificity as the
   ".dvm-in" rule and come later, so the "in place" state must outrank them
   (img[class] adds one attribute level). Without this, phones kept the photos
   displaced after the slide-in. */
.dvm-ready .dv-collage.dvm-in img[class] { opacity: 1; translate: 0 0; }

/* The slide-in starts off-screen: clip horizontal overflow at page level
   (overflow: clip keeps sticky headers working, unlike hidden). */
.dvm-ready.dvm-home,
.dvm-ready.dvm-home body { overflow-x: clip; }

/* Reduced motion: show everything, no movement. */
@media (prefers-reduced-motion: reduce) {
  .dvm-ready .dvm-reveal,
  .dvm-ready .dv-collage img { opacity: 1 !important; transform: none !important; translate: 0 0 !important; transition: none !important; animation: none !important; }
  .dvm-ready .dvm-plx > .dvm-plx-layer { transform: none !important; }
  .dvm-ready.dvm-home .elementor-element-31d24bd::before { background-position: top left !important; }
}