/* ===========================================================
   SHOP-THE-RACK — animated hanging-products component
   Used on shop.html (purchasable) and commissions.html (gallery).
   Assets: images/rack/rod.png, hanger-front.png, hanger-back.png
   Tokens prefixed --rk- to avoid colliding with the site's :root.
   =========================================================== */
:root{
  --rk-card:#ffffff; --rk-wall:#E8EFEC;
  --rk-bracket:#93a6a3; --rk-bracket-d:#6f8582;
  --rk-rod-top:44px; --rk-rod-h:24px; --rk-row-top:40px; --rk-gap:clamp(10px,1.6vw,20px);
  --rk-pivot:6px; --rk-cardgap:-27%; --rk-lip:91%;
}

.rackwrap{
  position:relative; border-radius:14px; padding:8px clamp(8px,2vw,20px) clamp(18px,3vw,30px);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(127,200,200,0.12), transparent 60%),
    var(--rk-wall);
  border:1px solid var(--paper-edge, #CBE6E2);
}
.rack{position:relative; padding-top:var(--rk-row-top); margin-bottom:clamp(30px,5vw,52px);}
.rack:last-child{margin-bottom:6px;}

/* hook END behind the rod (z0) — the true wrap */
.rk-tips{position:absolute; top:var(--rk-row-top); left:0; right:0; z-index:0;
  display:grid; gap:var(--rk-gap); pointer-events:none;}
.rk-tips .rk-cell{display:flex; justify-content:center;}
.rk-hookback{width:82%; height:auto; display:block;}

/* wooden rod (z1) + its front-edge mask (z3) */
.rk-rod{position:absolute; left:6px; right:6px; top:var(--rk-rod-top); height:var(--rk-rod-h); z-index:1;
  background:url("../images/rack/rod.png") center/100% 100% no-repeat;
  filter:drop-shadow(0 7px 9px rgba(74,45,20,.28));}
.rk-rodfront{position:absolute; left:6px; right:6px; top:var(--rk-rod-top); height:var(--rk-rod-h); z-index:3;
  background:url("../images/rack/rod.png") center/100% 100% no-repeat;
  clip-path:inset(0 0 var(--rk-lip) 0); pointer-events:none;}

/* hangers (z2) — the swinging unit */
.rk-hangers{position:relative; z-index:2; display:grid; gap:var(--rk-gap); align-items:start;}
.rk-hang{display:flex; flex-direction:column; align-items:center;
  transform-origin:50% var(--rk-pivot);
  animation:rk-sway var(--dur,3.6s) ease-in-out infinite; animation-delay:var(--delay,0s);}
/* pause the sway while the rack is scrolled off-screen (set by rack.js) —
   keeps mobile scrolling smooth by not repainting animated layers */
.rk-paused .rk-hang{animation-play-state:paused;}
@keyframes rk-sway{0%,100%{transform:rotate(var(--a,2.2deg));}50%{transform:rotate(calc(-1 * var(--a,2.2deg)));}}
.rk-hookfront{width:82%; height:auto; display:block; position:relative; z-index:2;}

/* the polaroid card */
.rk-card{width:90%; background:var(--rk-card); padding:7px 7px 0; border-radius:3px;
  margin:var(--rk-cardgap) auto 0; position:relative; z-index:3;
  box-shadow:0 1px 0 rgba(31,56,56,.05), 0 11px 20px rgba(31,56,56,.15);}
.rk-frame{display:block; position:relative; margin-top:30px; aspect-ratio:4/5; overflow:hidden; border-radius:2px; background:var(--linen-dark,#E3EFEC);}
.rk-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.rk-stamp{position:absolute; top:8px; left:8px; z-index:2; font-size:.62rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(45,125,125,.92);
  padding:3px 8px; border-radius:20px; box-shadow:0 2px 5px rgba(31,56,56,.25); max-width:88%;}
.rk-stamp.rk-ooak{background:rgba(217,130,74,.95);}
.rk-cap{padding:9px 8px 12px; text-align:center;}
.rk-cap .rk-name{font-family:var(--font-display); font-size:.92rem; line-height:1.22; color:var(--espresso);
  min-height:2.1em; display:flex; align-items:center; justify-content:center;}
.rk-cap .rk-price{margin-top:3px; font-weight:700; color:var(--thread); font-size:1.02rem;}
.rk-actions{display:flex; gap:6px; margin-top:9px;}
.rk-btn{flex:1; font-family:var(--font-body); font-weight:600; font-size:.8rem; border-radius:5px;
  padding:8px 6px; cursor:pointer; border:none; transition:transform .15s ease, background .15s ease, color .15s ease;}
.rk-btn-add{background:var(--thread); color:#fff;}
.rk-btn-add:hover{background:#256b6b; transform:translateY(-1px);}
.rk-btn-buy{background:transparent; color:var(--thread); border:1.5px solid var(--thread);}
.rk-btn-buy:hover{background:var(--thread); color:#fff;}

/* portfolio (gallery) variant: whole card is a link to the commission form */
.rk-card.rk-link{cursor:pointer; appearance:none; border:none; text-align:inherit; font:inherit; width:90%;
  transition:transform .18s ease, box-shadow .18s ease;}
.rk-card.rk-link:hover,.rk-card.rk-link:focus-visible{transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(31,56,56,.05), 0 17px 28px rgba(31,56,56,.20); outline:none;}
.rk-card.rk-link:focus-visible{box-shadow:0 0 0 3px rgba(45,125,125,.45), 0 17px 28px rgba(31,56,56,.20);}
.rk-cap .rk-cta{margin-top:8px; font-size:.78rem; font-weight:600; color:var(--thread);}

/* wall brackets (z4) — brushed steel */
.rk-bracket{position:absolute; top:calc(var(--rk-rod-top) - 8px); width:19px; height:calc(var(--rk-rod-h) + 16px);
  z-index:4; border-radius:6px;
  background:
    linear-gradient(90deg, rgba(20,30,30,.30) 0%, rgba(255,255,255,.42) 24%, rgba(255,255,255,0) 52%, rgba(20,30,30,.28) 100%),
    linear-gradient(180deg, #eef4f4 0%, #cbd6d6 17%, #a7b7b7 44%, #7a8d8d 74%, #556a6a 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 -3px 5px rgba(0,0,0,.34), 0 4px 8px rgba(31,56,56,.34);}
.rk-bracket::before{content:""; position:absolute; left:24%; top:8%; width:2px; height:46%; border-radius:2px;
  background:linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); filter:blur(.5px); pointer-events:none;}
.rk-bracket::after{content:""; position:absolute; left:50%; top:11px; width:6px; height:6px; margin-left:-3px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fbfdfd 0%, #c4d0d0 42%, #74898a 74%, #46595a 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.55);}
.rk-bracket-l{left:-4px;} .rk-bracket-r{right:-4px;}

@media (prefers-reduced-motion: reduce){ .rk-hang{animation:none !important; transform:rotate(0)!important;} }