/* ════════════════════════════════════════════════════════════════════════════
   Photos: the polaroids, photo walls, event strip and handwritten notes used across
   the site (placed by photos.js). Needs the Caveat font and the page's --primary.
   ════════════════════════════════════════════════════════════════════════════ */
.wall { position:absolute; inset:0; pointer-events:none; z-index:1; }

/* Wherever floating photos can reach the text (phones, tablets, small laptops: anything
   narrower than 1200px leaves too little empty space beside it), they are washed out to a
   soft background, and text marked .on-photos gets a glow in the page colour right behind
   it, so the words stay crisp even where a photo passes underneath. */
.on-photos { position:relative; z-index:2; }
@media (max-width: 1199px) {
  /* a filter, not opacity: a photo's entry animation ends at full opacity and would undo it */
  .wall .pola, .cta-polas .pola { filter:opacity(.42) saturate(.75); }
  .wall .pola-note { opacity:.9; }
  .on-photos::before {
    content:''; position:absolute; inset:-28px -8px; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse 62% 58% at 50% 50%, var(--bg, #F5F5FF) 45%, transparent 100%);
  }
}

/* a polaroid: white frame, square photo, handwritten caption */
.pola {
  position:absolute; width:var(--w,130px); padding:7px 7px 0; background:#fff; border-radius:3px;
  box-shadow:0 1px 2px rgba(28,27,31,.08), 0 14px 30px -8px rgba(46,38,120,.28);
  transform:rotate(var(--r,0deg)); transform-origin:50% 30%;
  animation:polaDrift var(--d,9s) ease-in-out infinite; animation-delay:var(--dl,0s);
}
.pola .tile { border-radius:1px; }
.pola figcaption { font-family:'Caveat', cursive; font-size:calc(var(--w,130px) * .135); font-weight:700; color:#3B326F; text-align:center; padding:4px 2px 6px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes polaDrift { 0%,100% { transform:rotate(var(--r)) translateY(0); } 50% { transform:rotate(calc(var(--r) + 1.5deg)) translateY(-8px); } }
.pola--in { animation:polaIn .8s cubic-bezier(.34,1.4,.64,1) both, polaDrift var(--d,9s) ease-in-out .8s infinite; }
@keyframes polaIn { from { opacity:0; transform:rotate(calc(var(--r) - 14deg)) scale(1.35) translateY(-30px); } to { opacity:1; transform:rotate(var(--r)); } }
.pola--out { transition:opacity .5s, transform .5s; opacity:0 !important; transform:rotate(var(--r)) scale(.85) !important; animation:none; }
.pola__tag {
  position:absolute; top:-10px; right:-12px; display:flex; align-items:center; gap:5px; padding:3px 9px 3px 3px; border-radius:99px;
  background:var(--dark, #0E0A24); color:#fff; font-size:11px; font-weight:700; white-space:nowrap; box-shadow:0 6px 16px rgba(0,0,0,.25);
  animation:tagIn .4s cubic-bezier(.34,1.56,.64,1) .5s both;
}
.pola__tag i { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:9px; font-weight:800; color:#3B326F; }
@keyframes tagIn { from { opacity:0; transform:scale(.5); } to { opacity:1; transform:none; } }
.pola .fig.me::before { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--primary, #5B4FD9); }
.pola-note {
  position:absolute; font-family:'Caveat', cursive; font-size:24px; font-weight:700; color:var(--primary, #5B4FD9);
  white-space:nowrap; transform:rotate(-6deg); display:flex; align-items:center; gap:4px;
}
.pola-note svg { width:46px; height:34px; }

.scribble { font-family:'Caveat', cursive; font-weight:700; color:var(--primary, #5B4FD9); font-size:26px; line-height:1.1; }


/* ─── Strip of polaroids ─── */
.strip { padding:72px 0 80px; overflow:hidden; background:var(--bg, #F5F5FF); position:relative; border-bottom:1px solid rgba(91,79,217,.1); }
.strip__note { text-align:center; margin-bottom:18px; transform:rotate(-2deg); }
.strip__track { display:flex; gap:26px; width:max-content; padding:14px 0 22px; animation:stripMove 60s linear infinite; }
.strip__track .pola { position:relative; animation:none; flex-shrink:0; }
.strip:hover .strip__track { animation-play-state:paused; }
@keyframes stripMove { to { transform:translateX(-50%); } }


/* a photo pinned with tape */
.tape { position:absolute; width:74px; height:22px; background:rgba(255,236,170,.75); box-shadow:0 1px 2px rgba(0,0,0,.08);
  top:-10px; left:50%; transform:translateX(-50%) rotate(-3deg); }

/* polaroids scattered around a closing call */
.cta-polas { position:absolute; inset:0; pointer-events:none; }
.cta-polas .pola { animation-duration:11s; }

@media (prefers-reduced-motion: reduce) {
  .pola, .pola--in, .strip__track { animation:none !important; }
}