/* ============================================================================
   hero-rope.css — a relaxed clothesline of polaroids drifting right → left,
   each loved-one clipped with a peg, a handwritten note at the bottom.
   Seamless endless loop (two identical groups, translateX -50%).
   Theme-aware. Pure CSS.
   ========================================================================== */
.rope-band {
  position: relative;
  width: 100vw;                          /* full-bleed inside the centered hero */
  margin-left: calc(50% - 50vw);
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
  padding-block: 4px;
  overflow: hidden;
  --rope: #caa86d;                       /* warm twine */
  --g: clamp(26px, 4vw, 62px);           /* spacing between cards (and groups) */
}

/* soft, wide edge fades — cards recede into depth at the sides */
.rope-band::before,
.rope-band::after { content:''; position:absolute; top:0; bottom:0; width:clamp(70px, 17%, 240px); z-index:4; pointer-events:none; }
.rope-band::before { left:0;  background: linear-gradient(90deg,  var(--ink) 0%, var(--ink) 5%, color-mix(in srgb, var(--ink) 55%, transparent) 45%, transparent 100%); }
.rope-band::after  { right:0; background: linear-gradient(270deg, var(--ink) 0%, var(--ink) 5%, color-mix(in srgb, var(--ink) 55%, transparent) 45%, transparent 100%); }

/* the rope — a relaxed, curved sag (cards ride it via js/hero-rope.js) */
.rope-line { position:absolute; top:35px; left:0; right:0; height:44px; z-index:0; pointer-events:none; }
.rope-line svg { width:100%; height:100%; display:block; }
.rope-line path { fill:none; stroke:var(--rope); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.9; }

/* marquee: two identical groups; translateX(-50%) == one group → seamless loop.
   Keeps drifting on hover (no pause). */
.rope-track { display:flex; width:max-content; animation: ropeDrift 90s linear infinite; animation-delay: 3.2s; will-change:transform; }
@keyframes ropeDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* padding-right == the inter-card gap, so the seam between/around groups is uniform.
   Generous bottom padding so the polaroids' drop shadows are never clipped. */
.rope-group { display:flex; gap: var(--g); padding: 40px var(--g) 100px 0; }

/* a hung card — --cy is set per-frame by JS so each card rides the rope's curve */
.pin { position:relative; flex:0 0 auto; transform-origin: top center;
  transform: translate(0, calc(var(--y, 0px) + var(--cy, 0px))) rotate(var(--rot,0deg)); }

/* wooden peg */
.peg { position:absolute; top:-12px; left:50%; width:10px; height:22px; transform:translateX(-50%);
  background: linear-gradient(180deg,#e6c489,var(--rope)); border-radius:3px; z-index:3; box-shadow:0 2px 3px rgba(0,0,0,.3); }
.peg::after { content:''; position:absolute; left:50%; top:5px; transform:translateX(-50%); width:2px; height:11px; background:rgba(0,0,0,.22); border-radius:2px; }

/* polaroid */
.polaroid { width: clamp(112px, 12vw, 148px); background:#fbf9f3; padding:8px 8px 6px;
  border-radius:3px; transform-origin: top center;
  /* contact + mid + soft far shadow → real depth, esp. on the receding outer cards */
  box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 14px 28px rgba(0,0,0,.28), 0 20px 40px rgba(0,0,0,.15); }
/* entrance runs ONCE (class added on load, removed on animationend) — the resting
   state has no animation, so the swing never reverts/replays it. */
.polaroid.entering { animation: dropIn 1.5s var(--ease) both; animation-delay: var(--din, 0s); }
.polaroid img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#e7e3da; border-radius:1px; }
.polaroid .cap { margin-top:6px; padding:0 2px 2px; text-align:center;
  font-family:'Caveat', cursive; font-weight:600; font-size:1.2rem; line-height:1.02; color:#2b211a; }

/* swing on hover — rocks from the peg, then settles */
@keyframes swing {
  0%   { transform: rotate(0); }
  22%  { transform: rotate(6deg); }
  45%  { transform: rotate(-4.5deg); }
  66%  { transform: rotate(2.6deg); }
  85%  { transform: rotate(-1.3deg); }
  100% { transform: rotate(0); }
}
/* triggered via JS (class) so the full swing always plays out, even once the
   pointer has moved on — looks natural, never snaps. */
.polaroid.swinging { animation: swing 1.3s var(--ease); }

/* on-load entrance — cards arrive from the FRONT: big & blurry near the field of
   view, settling sharp onto the rope, from varied directions, staggered. */
@keyframes dropIn {
  0%   { opacity:0; transform: translate(var(--dx,0), var(--dy,24px)) scale(1.5) rotate(var(--dr,0)); filter: blur(14px); }
  55%  { opacity:1; filter: blur(2px); }
  100% { opacity:1; transform: translate(0,0) scale(1) rotate(0); filter: blur(0); }
}
.rope-group .pin:nth-child(1)  .polaroid { --dx:-160px; --dy:-70px;  --dr:-12deg; --din:.10s; }
.rope-group .pin:nth-child(2)  .polaroid { --dx: 130px; --dy: 95px;  --dr:  9deg; --din:.34s; }
.rope-group .pin:nth-child(3)  .polaroid { --dx:-55px;  --dy: 130px; --dr: -5deg; --din:.52s; }
.rope-group .pin:nth-child(4)  .polaroid { --dx: 175px; --dy:-45px;  --dr: 13deg; --din:.72s; }
.rope-group .pin:nth-child(5)  .polaroid { --dx: 20px;  --dy:-140px; --dr: -3deg; --din:.90s; }
.rope-group .pin:nth-child(6)  .polaroid { --dx:-140px; --dy: 60px;  --dr:  8deg; --din:1.12s; }
.rope-group .pin:nth-child(7)  .polaroid { --dx: 100px; --dy: 120px; --dr:-10deg; --din:1.30s; }
.rope-group .pin:nth-child(8)  .polaroid { --dx:-105px; --dy:-100px; --dr:  6deg; --din:1.50s; }
.rope-group .pin:nth-child(9)  .polaroid { --dx: 150px; --dy: 35px;  --dr:-13deg; --din:1.70s; }
.rope-group .pin:nth-child(10) .polaroid { --dx:-35px;  --dy: 135px; --dr:  5deg; --din:1.88s; }

@media (max-width: 640px) {
  .polaroid { width: 108px; }
  .polaroid .cap { font-size: 1.06rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rope-track { animation: none; }
  .polaroid.entering, .polaroid.swinging { animation: none; }
}