/* YVM-79 post-it physics, shared by the civic, community and minimal templates (App\Support\NotePhysics adds the
   classes). Each note leans at its own stable angle (vm-a-n5 … vm-a-p5); vm-unstuck lifts and curls a corner over a
   deeper shadow; vm-overlap tucks a note a little over its neighbour's margin (never its words); vm-crooked is re-stuck
   off-square. Text is never clipped: an unstuck note grows its bottom padding so the curl sits below the words.
   Motion only for people who haven't asked for less. */
.vm-a-n5{--a:-5deg}.vm-a-n4{--a:-4deg}.vm-a-n3{--a:-3deg}.vm-a-n2{--a:-2deg}.vm-a-n1{--a:-1deg}.vm-a-p0{--a:0deg}
.vm-a-p1{--a:1deg}.vm-a-p2{--a:2deg}.vm-a-p3{--a:3deg}.vm-a-p4{--a:4deg}.vm-a-p5{--a:5deg}
.vm{--wall:var(--canvas)}
/* A leaning note's corner or shadow may pass the gutter on a narrow phone: the wall clips sideways (words sit well inside). */
.vm-t-civic .vm-board,.vm-t-community .vm-board,.vm-t-minimal .vm-board{overflow-x:clip}
.vm .vm-postit[class*=" vm-a-"],.vm .vm-hero-note[class*=" vm-a-"]{position:relative;transform:rotate(var(--a));transform-origin:50% 6%}
.vm .vm-postit.vm-crooked,.vm .vm-hero-note.vm-crooked{transform:translate(.3rem,.45rem) rotate(var(--a));transform-origin:10% 0}
.vm .vm-overlap{z-index:2}
.vm .vm-notes .vm-overlap{margin-left:-.5rem;margin-right:.5rem}
.vm .vm-unstuck,.vm-t-minimal .vm-postit,.vm-t-minimal .vm-hero-note{padding-bottom:3rem}
.vm .vm-unstuck{box-shadow:var(--note-shadow),12px 16px 18px -10px rgba(0,0,0,.42)}
.vm .vm-unstuck::after,.vm-t-minimal .vm-postit::after,.vm-t-minimal .vm-hero-note::after{content:"";position:absolute;right:calc(-1 * var(--note-edge));bottom:calc(-1 * var(--note-edge));width:2.75rem;height:2.75rem;pointer-events:none;
  background:linear-gradient(315deg,var(--wall) 0 49%,transparent 50%),linear-gradient(315deg,transparent 0 48%,rgba(0,0,0,.28) 50%,color-mix(in srgb,var(--note-c) 40%,#fff) 55%,color-mix(in srgb,var(--note-c) 80%,#fff) 85%,var(--note-c) 100%);
  border-top-left-radius:.6rem}
@media (prefers-reduced-motion:no-preference){
  .vm .vm-postit[class*=" vm-a-"],.vm .vm-hero-note[class*=" vm-a-"]{transition:transform .2s ease,box-shadow .2s ease;animation:vm-settle .55s cubic-bezier(.2,.8,.3,1.2) backwards}
  .vm .vm-postit[class*=" vm-a-"]:hover,.vm .vm-hero-note[class*=" vm-a-"]:hover{transform:translateY(-5px) rotate(calc(var(--a) * .5))}
  @keyframes vm-settle{from{transform:translateY(-14px) rotate(calc(var(--a) + 5deg));opacity:0}}
}