/* ---------- Hero collage: a scatter of film prints ---------- */
.collage{position:relative;height:min(74vh,660px);min-height:520px;--px:0px;--py:0px;align-self:center}
.print{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,1);margin:0;container-type:inline-size;
  transform:rotate(var(--r));transition:scale .35s cubic-bezier(.2,.8,.2,1),rotate .35s cubic-bezier(.2,.8,.2,1);
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.print .in{position:relative}
.print .paper{position:relative;background:#F8F2E7;padding:3.6cqw;
  transform:translate(calc(var(--px)*var(--d,1)),calc(var(--py)*var(--d,1)));transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  box-shadow:0 1px 1.5px rgba(30,18,8,.28),0 12px 26px -8px rgba(30,18,8,.38)}
.print .paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 30%,transparent 70%,rgba(60,40,20,.06))}
.print .ph{position:relative;overflow:hidden;background:#2b2016}
.print .ph img{display:block;width:100%;height:auto;-webkit-user-drag:none;pointer-events:none}
.print .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 58%,rgba(20,12,6,.32)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.3 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.55}

/* instant-film prints get a deep bottom border and a handwritten caption */
.print.pol .paper{padding:4.6cqw 4.6cqw 19cqw}
.print figcaption{position:absolute;left:5cqw;right:5cqw;bottom:4.2cqw;font-family:"Caveat",cursive;font-weight:500;font-size:9.5cqw;line-height:1;color:#4A3324;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-1.2deg)}

/* the orange date stamp a point-and-shoot burns into the corner */
.print .date{position:absolute;right:4%;bottom:4%;z-index:2;font-family:"Courier New",ui-monospace,monospace;font-weight:700;letter-spacing:.06em;
  font-size:max(9px,4.2cqw);color:#FF9a3c;text-shadow:0 0 3px rgba(255,120,30,.75),0 0 8px rgba(255,90,20,.35);opacity:.9}

/* masking tape */
.print .tape{position:absolute;left:50%;top:-5cqw;width:36cqw;height:10cqw;margin-left:-18cqw;z-index:3;transform:rotate(var(--tr,-4deg));
  background:rgba(232,220,192,.8);box-shadow:0 1px 2px rgba(40,25,10,.15)}
.print .tape::before,.print .tape::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:inherit}
.print .tape::before{left:-3px;clip-path:polygon(100% 0,0 12%,100% 25%,0 38%,100% 50%,0 63%,100% 75%,0 88%,100% 100%)}
.print .tape::after{right:-3px;clip-path:polygon(0 0,100% 12%,0 25%,100% 38%,0 50%,100% 63%,0 75%,100% 88%,0 100%)}

/* dealt onto the table after the opening */
.collage.wait .in{opacity:0}
.collage.dealt .in{animation:deal .95s cubic-bezier(.18,.85,.25,1) both;animation-delay:calc(var(--i) * 95ms + 80ms)}
@keyframes deal{
  0%{opacity:0;transform:translate(calc(var(--fx,0) * 1px),-70px) rotate(calc(var(--r) * 2.2)) scale(1.14)}
  55%{opacity:1}
  100%{opacity:1;transform:none}}

/* interaction */
@media (pointer:fine){
  .print{cursor:grab}
  .print:hover{scale:1.035;rotate:calc(var(--r) * -.35)}
  .print:hover .paper{box-shadow:0 2px 3px rgba(30,18,8,.26),0 22px 34px -10px rgba(30,18,8,.42)}
}
.print.lift{cursor:grabbing;scale:1.06;rotate:calc(var(--r) * -.5);transition:scale .2s,rotate .2s}
.print.lift .paper{box-shadow:0 4px 6px rgba(30,18,8,.25),0 34px 44px -12px rgba(30,18,8,.45);transition:box-shadow .2s}
.print.tap{animation:tap .5s cubic-bezier(.2,.8,.2,1)}
@keyframes tap{40%{scale:1.07}100%{scale:1}}

.col-hint{position:absolute;right:0;bottom:0;color:#8a7a68;transition:opacity .6s;pointer-events:none}
.col-hint.gone{opacity:0}
@media (pointer:coarse){.col-hint{display:none}}

@media (max-width:980px){
  .collage{height:min(118vw,620px);min-height:0;margin-top:8px}
  .print{left:var(--mx,var(--x));top:var(--my,var(--y));width:var(--mw,var(--w))}
  .print.m-hide{display:none}
}
@media (prefers-reduced-motion:reduce){.collage .in{animation:none!important;opacity:1!important}.print .paper{transform:none}}