/* Phase 4B: physically unfolding Velcro report. Layers on top of the existing
   inflatable design without changing ranking, snapshots, or imported picks. */

/* The patch has a genuine black hook-and-loop face underneath the fabric.
   When its fabric surface tips forward, the texture underneath is exposed. */
.velcro-mount{
  perspective:900px;
  transform-style:preserve-3d;
  overflow:visible;
}
.velcro-underlay{
  position:absolute;z-index:0;pointer-events:none;
  inset:6px;
  border-radius:15px;
  border:2px solid #727881;
  background:
    repeating-linear-gradient(0deg,#e0e6ee35 0 1px,#151820 1px 4px),
    repeating-linear-gradient(90deg,#e0e6ee25 0 1px,#0a0d13 1px 4px),
    linear-gradient(145deg,#4a4d59,#181a21);
  background-blend-mode:screen,normal,normal;
  box-shadow:inset 0 3px 8px #000a,inset 0 0 0 5px #272b33;
  opacity:.75;
}
.velcro-underlay:after{
  content:"";position:absolute;inset:11px;
  border:1px dashed #d6dbe561;border-radius:7px;
}
.velcro-mount.is-peeling .velcro-underlay,
.velcro-mount.is-selected .velcro-underlay{
  opacity:1;
  box-shadow:inset 0 6px 12px #000d,inset 0 0 0 5px #282d35,0 0 13px #ffe55725;
}

/* More than a floating tile: the fabric bends up, exposing the backing,
   then rotates and settles in the lifted position. */
.velcro-mount.is-peeling > .lineup-choice{
  transform-origin:18% 91%;
  animation:velcro-physical-peel 480ms cubic-bezier(.2,.66,.23,1) both;
  will-change:transform;
}
@keyframes velcro-physical-peel{
  0%{transform:translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1);
    box-shadow:0 4px 6px #0009,inset 0 5px 6px #fff9}
  17%{transform:translate3d(-2px,-5px,5px) rotateX(-12deg) rotateZ(-.4deg) scale(1.006)}
  42%{transform:translate3d(3px,-14px,14px) rotateX(-50deg) rotateZ(2.3deg) scale(1.017);
    box-shadow:12px 20px 22px #000d,inset 0 5px 6px #fff9}
  65%{transform:translate3d(4px,-22px,19px) rotateX(-37deg) rotateZ(2.8deg) scale(1.025);
    box-shadow:15px 25px 29px #000e,inset 0 5px 6px #fff9}
  84%{transform:translate3d(-1px,-15px,7px) rotateX(-16deg) rotateZ(-1.3deg) scale(1.016)}
  100%{transform:translate3d(0,-11px,0) rotateX(0) rotateZ(-.9deg) scale(1.012);
    box-shadow:9px 18px 24px #000c,inset 0 5px 6px #fff9}
}
.velcro-mount.is-peeling > .lineup-choice::after{
  animation:velcro-corner-pull 480ms cubic-bezier(.2,.7,.23,1) both;
}
@keyframes velcro-corner-pull{
  0%{opacity:0;transform:scale(.5) rotate(0)}
  28%{opacity:1;transform:scale(1.05) rotate(-8deg)}
  65%{opacity:1;transform:scale(1.38) rotate(-18deg)}
  100%{opacity:1;transform:scale(1.08) rotate(-3deg)}
}
.velcro-mount.is-selected > .lineup-choice{
  transform:translate3d(0,-11px,0) rotateZ(-.9deg) scale(1.012)!important;
}
.velcro-mount.is-peeling > .lineup-choice,
.velcro-mount.is-selected > .lineup-choice{z-index:2}

/* A literal faux hook-strip spans the top of the detail sheet. It curls back
   out of the way as the much larger vinyl report unfolds. */
.wall-detail-sheet .report-peel-band{display:none;pointer-events:none}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling{
  overflow-x:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  transform-style:preserve-3d;
}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling::backdrop{
  animation:velcro-backdrop-arrive 780ms ease-out both;
}
@keyframes velcro-backdrop-arrive{
  0%{background:#05060816;backdrop-filter:blur(0)}
  100%{background:#0506089e;backdrop-filter:blur(1.5px)}
}
/* The large flap lifts and hinges from the far right on wide screens,
   rather than arriving as an unrelated side drawer. */
dialog.band-dialog.wall-detail-sheet[open].is-unfurling{
  transform-origin:100% 83%;
  animation:velcro-sheet-unfold-wide 780ms cubic-bezier(.22,.72,.19,1) both;
}
@keyframes velcro-sheet-unfold-wide{
  0%{transform:perspective(1350px) translate3d(102%,0,0) rotateY(74deg) scaleX(.82);
    opacity:.72;filter:brightness(.55)}
  24%{transform:perspective(1350px) translate3d(40%,0,0) rotateY(63deg) scaleX(.92);
    opacity:.95;filter:brightness(.78)}
  52%{transform:perspective(1350px) translate3d(5%,0,0) rotateY(24deg) scaleX(.97);
    opacity:1;filter:brightness(.94)}
  75%{transform:perspective(1350px) translate3d(-2%,0,0) rotateY(-8deg) scaleX(1.015);
    filter:brightness(1.04)}
  88%{transform:perspective(1350px) translate3d(1%,0,0) rotateY(3deg) scaleX(.998)}
  100%{transform:perspective(1350px) translate3d(0,0,0) rotateY(0) scaleX(1);
    opacity:1;filter:brightness(1)}
}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-peel-band{
  display:flex;
  position:absolute;
  z-index:9;
  inset:7px 17px auto;
  height:62px;
  padding:0 17px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:2px solid #9199a6;
  border-radius:10px 10px 22px 22px;
  transform-origin:50% 100%;
  color:#ffe557;
  background:
    repeating-linear-gradient(88deg,#bfc5cd27 0 1px,#191c23 1px 5px),
    linear-gradient(150deg,#555b66,#14171d);
  box-shadow:inset 0 5px 7px #ffffff27,0 10px 18px #000b;
  animation:velcro-strip-flip 780ms cubic-bezier(.18,.72,.22,1) both;
}
.report-peel-stamp{
  font:900 15px/1 Impact,"Arial Narrow",sans-serif;
  letter-spacing:.16em;
  white-space:nowrap;
  text-shadow:1px 1px 1px #000a;
}
.report-peel-zig{font-size:26px;color:#ff4545;vertical-align:middle}
.report-peel-hook{
  width:32px;height:30px;flex:0 0 32px;
  border-radius:8px;
  border:1px solid #a0a8b2;
  background:repeating-linear-gradient(0deg,#b7bec6aa 0 1px,#1c2028 1px 3px);
}
@keyframes velcro-strip-flip{
  0%,18%{opacity:1;transform:perspective(440px) translateY(17px) rotateX(0deg)}
  42%{opacity:1;transform:perspective(440px) translateY(-4px) rotateX(-40deg)}
  69%{opacity:.85;transform:perspective(440px) translateY(-26px) rotateX(-135deg)}
  92%,100%{opacity:0;transform:perspective(440px) translateY(-43px) rotateX(-174deg)}
}
/* Printed layers land one after another as the vinyl sheet finishes unfolding.
   Motion is composited and decoration never blocks form controls. */
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-patch-header{
  animation:velcro-label-land 500ms 200ms both;
}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div{
  animation:velcro-stat-stick 420ms cubic-bezier(.19,.75,.25,1.15) both;
}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(1){animation-delay:320ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(2){animation-delay:375ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(3){animation-delay:430ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(4){animation-delay:485ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(5){animation-delay:540ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(6){animation-delay:595ms}
@keyframes velcro-label-land{
  0%{opacity:.4;transform:translateY(14px) rotateX(-16deg)}
  70%{opacity:1;transform:translateY(-2px) rotateX(3deg)}
  100%{opacity:1;transform:translateY(0) rotateX(0)}
}
@keyframes velcro-stat-stick{
  0%{opacity:.1;transform:translateY(16px) scale(.96) rotate(-2deg)}
  70%{opacity:1;transform:translateY(-3px) scale(1.015) rotate(.3deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
/* On phones the bottom edge acts like a sewn hinge: the full modal lifts UP
   and flips towards the viewer, displaying the hook strip during the fold. */
@media(max-width:700px){
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling{
    transform-origin:50% 100%;
    animation:velcro-sheet-unfold-phone 780ms cubic-bezier(.22,.72,.19,1) both;
  }
  @keyframes velcro-sheet-unfold-phone{
    0%{transform:perspective(1150px) translate3d(0,105%,0) rotateX(-68deg) scaleY(.77);
      opacity:.7;filter:brightness(.55)}
    25%{transform:perspective(1150px) translate3d(0,48%,0) rotateX(-56deg) scaleY(.87);
      opacity:.94;filter:brightness(.78)}
    50%{transform:perspective(1150px) translate3d(0,13%,0) rotateX(-26deg) scaleY(.97);
      opacity:1;filter:brightness(.95)}
    72%{transform:perspective(1150px) translate3d(0,-2.1%,0) rotateX(7deg) scaleY(1.01);
      filter:brightness(1.05)}
    87%{transform:perspective(1150px) translate3d(0,.8%,0) rotateX(-3deg) scaleY(.997)}
    100%{transform:perspective(1150px) translate3d(0,0,0) rotateX(0) scaleY(1);
      opacity:1;filter:brightness(1)}
  }
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-peel-band{
    inset:7px 12px auto;
  }
}
@media(prefers-reduced-motion:reduce){
  .velcro-mount.is-peeling > .lineup-choice,
  .velcro-mount.is-peeling > .lineup-choice::after,
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling,
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling::backdrop,
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-peel-band,
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-patch-header,
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div{
    animation:none!important;transition:none!important;
    transform:none!important;filter:none!important;
  }
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-peel-band{
    display:none!important;
  }
}