/* ═══════════════════════════════════════════════════════════
   DOGS — creative scatter-wall roster, oscillating media,
   flicker/typewriter scroll reveals (pairs with dogs.js)
   ═══════════════════════════════════════════════════════════ */

/* ── oscillating hero / pinned media (gentle breathing drift) ── */
.cine-scene .cs-media, .pin-wrap .pin-media{animation:dogsDrift 21s ease-in-out infinite;will-change:transform}
@keyframes dogsDrift{0%,100%{transform:scale(1.04) translate(0,0)}
  33%{transform:scale(1.075) translate(-1%,0.8%)}66%{transform:scale(1.06) translate(1%,-0.7%)}}

/* ── CREATIVE SCATTER-WALL GRID ── */
.dogs-page-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:205px;gap:14px !important;margin-top:1.5rem;perspective:1400px}
.dpc{aspect-ratio:auto !important;grid-row:span 2;border-radius:5px;cursor:pointer;
  opacity:0;transform:translateY(40px) scale(0.96);
  transition:transform 0.7s cubic-bezier(0.16,1,0.3,1),opacity 0.7s ease,box-shadow 0.4s ease,filter 0.5s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.dogs-page-grid.in .dpc{opacity:1;transform:translateY(0) scale(1)}
/* varied tile heights for rhythm */
.dpc:nth-child(7n+1){grid-row:span 3}
.dpc:nth-child(7n+4){grid-row:span 2}
.dpc:nth-child(7n+6){grid-row:span 3}
.dpc:nth-child(5n+3){grid-row:span 2}
/* straight, static cards (perpetual float removed so clicks land true) */
.dpc:hover{transform:translateY(-8px) scale(1.05) !important;z-index:5;
  box-shadow:0 26px 60px rgba(0,0,0,0.6)}
.dpc image-slot{filter:grayscale(35%) contrast(1.03)}
.dpc:hover image-slot{filter:grayscale(0)}
/* tap hint */
.dpc::after{content:'View dossier';position:absolute;left:1.1rem;bottom:1.1rem;z-index:4;font-family:var(--font-sub);
  font-size:0.58rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--lime);
  opacity:0;transform:translateY(6px);transition:opacity 0.3s,transform 0.3s;pointer-events:none}
.dpc:hover::after{opacity:0;transform:none}

/* ── smooth scroll reveal for standard fade-up blocks ── */
.dogs-flick{opacity:0}
.dogs-flick.in{animation:dogsFlick 0.85s cubic-bezier(0.16,1,0.3,1) both}
@keyframes dogsFlick{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
.dogs-type::after{content:'\2588';color:var(--lime);margin-left:1px}
.dogs-type.done::after{display:none}

@media(prefers-reduced-motion:reduce){
  .cine-scene .cs-media,.pin-wrap .pin-media,.dogs-page-grid.in .dpc{animation:none}
  .dpc{opacity:1;transform:none}.dogs-flick{opacity:1}.dogs-flick.in{animation:none}
  .dogs-type::after{display:none}
}
@media(max-width:680px){
  .dogs-page-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:155px}
  .dpc:nth-child(7n+1),.dpc:nth-child(7n+6){grid-row:span 2}
}