/* ---------- Fastnålade lappar runt hero-videon (startsidan) ---------- */
.hero-stage > .chipw.pin{text-decoration:none;color:inherit;cursor:pointer}
.chipw.pin .chip{
  position:relative;animation:none;
  transform:rotate(var(--tilt,-2deg));transform-origin:50% 0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .3s,color .25s;
  padding-right:18px
}
/* nålen */
.chipw.pin .chip::before{
  content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,#E46F86 22%,#A8324A 62%,#6E1C2C 100%);
  box-shadow:0 2px 3px rgba(40,8,16,.35),0 6px 10px -4px rgba(40,8,16,.4);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1)
}
.chipw.pin .chip::after{ /* nålens skugga mot lappen */
  content:"";position:absolute;left:50%;top:-38px;width:6px;height:3px;margin-left:-1px;border-radius:50%;
  background:rgba(40,8,16,.18);filter:blur(1px)
}
.chipw.pin.dark .chip::before{background:radial-gradient(circle at 35% 30%,#fff 0 12%,#F8DCE1 24%,#E7AFBB 62%,#B8707F 100%)}
/* lätt olika lutning per lapp */
.chipw.p1{--tilt:-3deg}.chipw.p2{--tilt:2.5deg}.chipw.p3{--tilt:2deg}.chipw.p4{--tilt:-2.5deg}
.chipw.p5{--tilt:-1.5deg}.chipw.p6{--tilt:3deg}.chipw.p7{--tilt:-2deg}.chipw.p8{--tilt:1.5deg}
.chipw.p9{--tilt:-3deg}.chipw.p10{--tilt:2deg}.chipw.p11{--tilt:-2deg}.chipw.p12{--tilt:2.5deg}

/* pilen som dyker upp vid hover */
.chipw.pin .go{display:inline-grid;place-items:center;width:0;opacity:0;overflow:hidden;font-weight:700;transition:width .35s var(--ease),opacity .25s,transform .35s var(--ease);transform:translateX(-6px)}

/* hover: söt – studsar, rätar upp sig, blir rosa, nålen gungar */
.chipw.pin:hover .chip,.chipw.pin:focus-visible .chip{
  transform:rotate(calc(var(--tilt,-2deg) * -1.4)) scale(1.08);
  background:var(--lav);color:var(--ink);
  box-shadow:0 18px 34px -16px rgba(60,18,28,.55)
}
.chipw.pin.dark:hover .chip,.chipw.pin.dark:focus-visible .chip{background:var(--lav);color:var(--ink)}
.chipw.pin.dark:hover .chip small,.chipw.pin.dark:focus-visible .chip small{color:var(--muted)}
.chipw.pin:hover .chip .ic,.chipw.pin:focus-visible .chip .ic{background:var(--ink);color:var(--white);transform:rotate(-10deg)}
.chipw.pin .chip .ic{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .25s,color .25s}
.chipw.pin:hover .chip::before,.chipw.pin:focus-visible .chip::before{animation:pin-wiggle .7s ease}
.chipw.pin:hover .go,.chipw.pin:focus-visible .go{width:14px;opacity:1;transform:none;margin-left:2px}
.chipw.pin:focus-visible{outline:none}
.chipw.pin:focus-visible .chip{outline:2px solid var(--ink);outline-offset:3px}
.chipw.pin:active .chip{transform:rotate(0) scale(.97)}
@keyframes pin-wiggle{0%{transform:rotate(0)}25%{transform:rotate(-18deg) scale(1.15)}55%{transform:rotate(12deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}

/* ---------- Mobil: lapparna sitter fast på videon ---------- */
@media (max-width:640px){
  #stage .chip-rail{display:none!important}
  #vcard .vtoggle{right:auto;left:50%;bottom:12px;width:38px;height:38px;margin-left:-19px}
  .hero-stage > .chipw.pin{display:block!important;position:absolute;z-index:5;transform:none!important;opacity:1!important;visibility:visible!important}
  .chipw.pin .chip{padding:6px 12px 6px 6px;gap:7px;font-size:.78rem}
  .chipw.pin .chip small{display:none}
  .chipw.pin .chip .ic{width:24px;height:24px}
  .chipw.pin .chip .ic svg{width:13px;height:13px}
  .chipw.pin .chip::before{width:11px;height:11px;margin-left:-5.5px;top:-6px}
  /* två spalter, sex rader – fastnålade över videon */
  #stage .chipw.p1{left:calc(var(--gut) + 6px);top:10px;right:auto;bottom:auto}
  #stage .chipw.p2{right:calc(var(--gut) + 6px);top:22px;left:auto;bottom:auto}
  #stage .chipw.p3{left:calc(var(--gut) + 14px);top:70px;right:auto;bottom:auto}
  #stage .chipw.p8{right:calc(var(--gut) + 4px);top:82px;left:auto;bottom:auto}
  #stage .chipw.p7{left:calc(var(--gut) + 4px);top:130px;right:auto;bottom:auto}
  #stage .chipw.p4{right:calc(var(--gut) + 12px);top:142px;left:auto;bottom:auto}
  #stage .chipw.p5{left:calc(var(--gut) + 12px);top:190px;right:auto;bottom:auto}
  #stage .chipw.p10{right:calc(var(--gut) + 2px);top:202px;left:auto;bottom:auto}
  #stage .chipw.p9{left:calc(var(--gut) + 4px);top:250px;right:auto;bottom:auto}
  #stage .chipw.p12{right:calc(var(--gut) + 8px);top:262px;left:auto;bottom:auto}
  #stage .chipw.p11{left:calc(var(--gut) + 14px);top:310px;right:auto;bottom:auto}
  #stage .chipw.p6{right:calc(var(--gut) + 4px);top:322px;left:auto;bottom:auto}
}
@media (prefers-reduced-motion:reduce){
  .chipw.pin .chip,.chipw.pin .chip::before,.chipw.pin .go{transition:none;animation:none!important}
}