[data-hero-trail] { position:absolute; inset:0; z-index:1; isolation:isolate; overflow:hidden; pointer-events:none; }
.hero-trail-card { position:absolute; width:clamp(110px,11vw,160px); height:auto; aspect-ratio:4/3; object-fit:cover; opacity:0; border-radius:2px; box-shadow:0 12px 40px rgba(0,0,0,.25); will-change:transform,opacity,filter; }

.hero-mobile-collage { position:absolute; inset:0; pointer-events:none; transition:opacity .15s linear, transform .15s linear; }
.hero-collage-slot { position:absolute; width:clamp(85px,26vw,130px); aspect-ratio:1; animation:heroCollageFloat 7s ease-in-out infinite alternate; }
.hero-collage-slot img { width:100%; height:100%; object-fit:cover; border-radius:5px; opacity:.45; filter:blur(5px); transform:scale(.88); box-shadow:0 12px 30px rgba(0,0,0,.2); }
.hero-collage-slot-0 { left:9%; top:37%; animation-delay:-1s; }
.hero-collage-slot-1 { right:8%; top:42%; animation-delay:-4s; }
.hero-collage-slot-2 { left:23%; top:58%; animation-delay:-2s; }
.hero-collage-slot-3 { right:4%; top:63%; animation-delay:-5s; width:clamp(70px,20vw,110px); }
@keyframes heroCollageFloat { from { translate:0 -10px; } to { translate:0 12px; } }
@media (max-width:767px), (hover:none), (pointer:coarse) { .hero-trail-card { display:none; } }
@media (prefers-reduced-motion:reduce) { .hero-trail-card { display:none; } .hero-collage-slot { animation:none; } .hero-collage-slot img { filter:none; opacity:.6; } }