/* Phase 4C: one physical object travels from the tapped name patch into
   the report. The reveal origin is measured in CSS viewport coordinates rather
   than being an unrelated bottom drawer. Original assets; no dependencies. */

/* First beat: hold a real, visible curled piece of fabric over its hook strip.
   The old 480ms animation is superseded by the synchronized 420ms handoff. */
.velcro-mount.is-peeling > .lineup-choice{
  animation:wall-physical-peel 420ms cubic-bezier(.16,.68,.2,1) both;
  transform-origin:18% 89%;
}
@keyframes wall-physical-peel{
  0%{transform:translate3d(0,0,0) rotateX(0) rotateZ(0);
    box-shadow:0 4px 6px #0008}
  17%{transform:translate3d(-1px,-3px,3px) rotateX(-12deg) rotateZ(-.3deg)}
  44%{transform:translate3d(2px,-11px,10px) rotateX(-46deg) rotateZ(1.5deg);
    box-shadow:10px 17px 22px #000e}
  74%{transform:translate3d(3px,-18px,14px) rotateX(-62deg) rotateZ(2deg);
    box-shadow:14px 24px 30px #000e}
  100%{transform:translate3d(0,-11px,4px) rotateX(-18deg) rotateZ(-.7deg);
    box-shadow:8px 17px 24px #000d}
}
.velcro-mount.is-peeling > .lineup-choice::after{
  animation:wall-corner-fold 420ms ease-out both;
}
@keyframes wall-corner-fold{
  0%{transform:scale(.45) rotate(0);opacity:0}
  35%{transform:scale(1.05) rotate(-11deg);opacity:1}
  76%{transform:scale(1.55) rotate(-24deg);opacity:1}
  100%{transform:scale(1.25) rotate(-15deg);opacity:1}
}
/* Remove the visible front at the handoff, leaving the black hook-and-loop
   where it was. The opening report occupies exactly that rectangle initially. */
.velcro-mount.is-handoff > .lineup-choice{
  opacity:0!important;
  transform:translate3d(0,-20px,0) rotateX(-77deg) scale(.95)!important;
  transition:opacity 95ms ease-out,transform 120ms ease-out!important;
  pointer-events:none;
}
.velcro-mount.is-handoff .velcro-underlay{
  opacity:1;
  border-color:#d5bf5e;
  box-shadow:inset 0 7px 14px #000e,inset 0 0 0 5px #292e37,
    0 0 0 2px #ffe55762;
}

/* Suppress the old slide while reading the destination's natural rectangle.
   This class is applied/removed synchronously, so there is no visible gap. */
dialog.band-dialog.wall-detail-sheet[open].is-measuring{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  visibility:hidden!important;
  filter:none!important;
}
/* Default and fallback reports are unchanged. The portal applies only when
   the report originates from an existing, currently selected Velcro patch. */
dialog.band-dialog.wall-detail-sheet[open].is-unfurling{
  transform-origin:50% 50%;
  animation:wall-unfold-from-patch 1040ms cubic-bezier(.18,.72,.19,1) both;
  will-change:transform;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  overflow-x:hidden;
}
@keyframes wall-unfold-from-patch{
  /* Geometry starts at the patch's real screen rectangle, even after scroll. */
  0%,8%{
    transform:perspective(1300px)
      translate3d(var(--fold-x0),var(--fold-y0),0)
      scale(var(--fold-sx0),var(--fold-sy0)) rotateX(0deg);
    opacity:1;
  }
  25%{
    transform:perspective(1300px)
      translate3d(var(--fold-x1),var(--fold-y1),0)
      scale(var(--fold-sx1),var(--fold-sy1)) rotateX(-32deg);
    opacity:1;
  }
  46%{
    transform:perspective(1300px)
      translate3d(var(--fold-x2),var(--fold-y2),0)
      scale(var(--fold-sx2),var(--fold-sy2)) rotateX(-68deg);
  }
  66%{
    transform:perspective(1300px)
      translate3d(var(--fold-x3),var(--fold-y3),0)
      scale(var(--fold-sx3),var(--fold-sy3)) rotateX(19deg);
  }
  80%{transform:perspective(1300px) translate3d(0,-14px,0) rotateX(-9deg) scale(1.015)}
  91%{transform:perspective(1300px) translate3d(0,5px,0) rotateX(3deg) scale(.995)}
  100%{transform:perspective(1300px) translate3d(0,0,0) rotateX(0) scale(1);opacity:1}
}
/* A side-hinged version for large screens preserves the same patch-origin
   geometry and places the seam on the right hand side. */
@media(min-width:701px){
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling{
    transform-origin:100% 50%;
    animation-name:wall-unfold-from-patch-desktop;
  }
  @keyframes wall-unfold-from-patch-desktop{
    0%,8%{transform:perspective(1350px)
      translate3d(var(--fold-x0),var(--fold-y0),0)
      scale(var(--fold-sx0),var(--fold-sy0)) rotateY(0deg);opacity:1}
    25%{transform:perspective(1350px)
      translate3d(var(--fold-x1),var(--fold-y1),0)
      scale(var(--fold-sx1),var(--fold-sy1)) rotateY(33deg)}
    46%{transform:perspective(1350px)
      translate3d(var(--fold-x2),var(--fold-y2),0)
      scale(var(--fold-sx2),var(--fold-sy2)) rotateY(69deg)}
    66%{transform:perspective(1350px)
      translate3d(var(--fold-x3),var(--fold-y3),0)
      scale(var(--fold-sx3),var(--fold-sy3)) rotateY(-15deg)}
    80%{transform:perspective(1350px) translate3d(-13px,0,0) rotateY(8deg) scale(1.015)}
    91%{transform:perspective(1350px) translate3d(5px,0,0) rotateY(-3deg) scale(.996)}
    100%{transform:perspective(1350px) translate3d(0,0,0) rotateY(0) scale(1);opacity:1}
  }
}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling::backdrop{
  animation:wall-dim-as-fabric-opens 1040ms linear both;
}
@keyframes wall-dim-as-fabric-opens{
  0%,10%{background:#05060800;backdrop-filter:blur(0)}
  60%{background:#05060875;backdrop-filter:blur(1px)}
  100%{background:#0506089e;backdrop-filter:blur(1.5px)}
}

/* This is the actual BACK of the newly peeled panel, not a small banner
   hovering above unrelated content. It fills the report and flips away,
   revealing the already-laid-out report beneath it. */
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-peel-band{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  inset:0;
  box-sizing:border-box;
  width:100%;
  height:100%;
  padding:24px 18px 30px;
  z-index:15;
  border:4px solid #6b747f;
  border-radius:inherit;
  overflow:hidden;
  color:#f6f7fb;
  transform-origin:50% 100%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:none;
  background:
    repeating-linear-gradient(89deg,#d5dae012 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,#e6e9ee0c 0 1px,transparent 1px 4px),
    url("./assets/vinyl-grain.svg"),
    linear-gradient(148deg,#515965,#292e38 30%,#0e1118 80%,#3c434e);
  background-size:auto,auto,384px 384px,auto;
  box-shadow:inset 0 8px 13px #ffffff3b,inset 0 -18px 24px #000c,
    0 14px 35px #000b;
  animation:wall-big-velcro-flap 1040ms cubic-bezier(.22,.72,.2,1) both;
}
@keyframes wall-big-velcro-flap{
  0%,27%{opacity:1;visibility:visible;
    transform:perspective(1000px) translate3d(0,0,0) rotateX(0)}
  39%{opacity:1;transform:perspective(1000px) translate3d(0,-3px,0) rotateX(-23deg)}
  52%{opacity:1;transform:perspective(1000px) translate3d(0,-15px,0) rotateX(-84deg)}
  63%{opacity:1;transform:perspective(1000px) translate3d(0,-13px,0) rotateX(-160deg)}
  73%,100%{opacity:0;visibility:hidden;
    transform:perspective(1000px) translate3d(0,-14px,0) rotateX(-180deg)}
}
.report-peel-hinge{
  width:100%;
  min-height:26px;
  border:2px solid #9da5af;
  border-radius:17px;
  background:
    repeating-linear-gradient(90deg,#e9eaf155 0 2px,#151920 2px 7px),
    #181d25;
  box-shadow:0 5px 10px #000b,inset 0 3px 4px #ffffff18;
}
.report-peel-face{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(100%,460px);
  min-height:170px;
  padding:22px 16px;
  border:3px solid #e6c431;
  border-radius:25px;
  color:#111318;
  text-align:center;
  background:
    repeating-linear-gradient(90deg,#9b802008 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#fff6b4,#ffe557 59%,#d4ad2e);
  box-shadow:inset 0 7px 9px #ffffffb1,inset 0 -11px 15px #b5952b78,0 14px 25px #000c;
  transform:rotate(-1.3deg);
  position:relative;
}
.report-peel-face:after{
  content:"";position:absolute;inset:9px;
  border:2px dashed #53441a5a;border-radius:18px;
}
.report-peel-kicker{
  font:900 11px/1.3 Inter,system-ui,sans-serif;
  letter-spacing:.20em;
}
.report-peel-face strong{
  font:900 clamp(31px,7vw,62px)/.98 Impact,"Arial Black",sans-serif;
  margin:16px 0;
  overflow-wrap:anywhere;
  text-wrap:balance;
  max-width:100%;
}
.report-peel-subtitle{
  color:#9f310c;
  font:900 11px/1.25 Inter,system-ui,sans-serif;
  letter-spacing:.07em;
}
.report-peel-velcro{
  display:block;
  height:44px;
  width:100%;
  border:3px solid #a9b1bb;
  border-radius:14px;
  background:
    repeating-linear-gradient(90deg,#d7dee35c 0 1px,#151a23 1px 4px),
    repeating-linear-gradient(0deg,#bfc6ce43 0 1px,transparent 1px 5px),
    #292c35;
  box-shadow:inset 0 6px 8px #0009,0 -5px 12px #0009;
}
/* Stitched details become readable only after the underside folds away. */
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-patch-header{
  animation:wall-label-reveal 430ms 520ms cubic-bezier(.22,.76,.25,1) both;
}
@keyframes wall-label-reveal{
  0%{opacity:.25;transform:translateY(17px) rotateX(-25deg)}
  68%{opacity:1;transform:translateY(-4px) rotateX(5deg)}
  100%{opacity:1;transform:none}
}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div{
  animation:wall-stats-attach 350ms cubic-bezier(.2,.7,.18,1.2) both;
}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(1){animation-delay:615ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(2){animation-delay:655ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(3){animation-delay:695ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(4){animation-delay:735ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(5){animation-delay:775ms}
dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-stat-grid > div:nth-child(6){animation-delay:815ms}
@keyframes wall-stats-attach{
  0%{transform:translateY(24px) rotate(-2deg) scale(.96);opacity:0}
  66%{transform:translateY(-4px) rotate(.3deg) scale(1.015);opacity:1}
  100%{transform:none;opacity:1}
}
/* iPhone: the report is hinged on its lower seam, so it visibly pulls up
   and opens toward the user while still originating at the touched patch. */
@media(max-width:700px){
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling{
    transform-origin:50% 100%;
    animation-name:wall-unfold-from-patch;
  }
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-peel-band{
    padding:18px 14px max(25px,env(safe-area-inset-bottom));
  }
  .report-peel-face{min-height:135px}
  .report-peel-face strong{font-size:clamp(34px,10vw,50px)}
}
/* Explicitly no delayed animation for reduced-motion; the report is usable
   as a native dialog and the disabled decorative layer has no focus targets. */
@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;
  }
  .velcro-mount.is-handoff > .lineup-choice{opacity:1!important}
  dialog.band-dialog.wall-detail-sheet[open].is-unfurling .report-peel-band{
    display:none!important;
  }
}