/* Neutralise Bootstrap's fade-scale — we own every aspect of the animation. */
.modal.fade-scale,
.modal.fade-scale.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.modal.fade-scale .modal-content {
  will-change: transform, clip-path, opacity, filter;
  transform-origin: center center;
  position: relative;
}

/* ── Crease-line overlay ──────────────────────────────────────────────────────
   Six linear-gradients at varied angles simulate fold-plane shadow lines.
   The radial-gradient adds depth at the crumpled core — light doesn't reach
   inside a tight paper ball.  The overlay is invisible at rest.
   ──────────────────────────────────────────────────────────────────────────── */
.modal.fade-scale .modal-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
  background:
    /* core shadow — depth of the ball */
    radial-gradient(ellipse 48% 48% at 52% 52%,
      rgba(0,0,0,0.38) 0%, transparent 62%),
    /* dominant diagonal crease */
    linear-gradient(133deg,
      transparent 23%, rgba(0,0,0,0.62) 24.5%, rgba(0,0,0,0.07) 26.5%, transparent 28.5%),
    /* counter-diagonal */
    linear-gradient(47deg,
      transparent 35%, rgba(0,0,0,0.46) 36.5%, rgba(0,0,0,0.06) 38.5%, transparent 41%),
    /* tertiary crease */
    linear-gradient(198deg,
      transparent 16%, rgba(0,0,0,0.30) 17.5%, rgba(0,0,0,0.04) 19.5%, transparent 21%),
    /* quarter crease */
    linear-gradient(72deg,
      transparent 57%, rgba(0,0,0,0.24) 58.5%, rgba(0,0,0,0.04) 60%, transparent 62%),
    /* fifth crease */
    linear-gradient(160deg,
      transparent 43%, rgba(0,0,0,0.17) 44.5%, transparent 46.5%),
    /* sixth crease — very subtle */
    linear-gradient(25deg,
      transparent 67%, rgba(0,0,0,0.13) 68.5%, transparent 70.5%);
  opacity: 0;
}

/* Crease lines stay vivid through the main unfolding phase, then dissolve. */
.modal.fade-scale.in .modal-content::before {
  animation: crease-open 1.1s linear forwards;
}

.modal.fade-scale .modal-content.paper-closing::before {
  animation: crease-close 0.7s linear forwards;
}

@keyframes crease-open  { 0% { opacity:1; } 40% { opacity:0.80; } 72% { opacity:0.35; } 100% { opacity:0; } }
@keyframes crease-close { 0% { opacity:0; } 28% { opacity:0.40; } 68% { opacity:0.82; } 100% { opacity:1; } }

/* ── Opening animation ───────────────────────────────────────────────────────
   8-point clip-path polygon:  TL · Tmid · TR · Rmid · BR · Bmid · BL · Lmid
   The ball is slightly off-centre (≈ 52 %, 52 %) and each edge expands at a
   different rate — real crumpling is never perfectly symmetric.
   Denser keyframes in 0-14 % capture the dramatic initial pop.
   An elastic overshoot at 95 % gives the paper springiness as it snaps flat.
   ──────────────────────────────────────────────────────────────────────────── */
.modal.fade-scale.in .modal-content {
  animation: paper-unfold 1.1s linear forwards;
}

@keyframes paper-unfold {
  /* ── Tight crumpled ball, slightly off-centre ── */
  0%  {
    clip-path: polygon(43% 43%, 51% 41%, 58% 44%, 61% 51%, 58% 59%, 50% 61%, 42% 58%, 40% 51%);
    transform: scale(0.05) rotate(-12deg);
    opacity: 0.04;
  }
  /* ── Ball pops — first major fold releases (high energy, rapid) ── */
  5%  {
    clip-path: polygon(39% 39%, 51% 37%, 60% 41%, 63% 51%, 60% 61%, 49% 63%, 38% 60%, 36% 50%);
    transform: scale(0.07) rotate(9deg);
    opacity: 0.12;
  }
  /* ── Second fold; paper visibly larger ── */
  13% {
    clip-path: polygon(33% 33%, 51% 37%, 65% 33%, 69% 50%, 64% 68%, 48% 71%, 32% 66%, 29% 50%);
    transform: scale(0.13) rotate(-5deg);
    opacity: 0.22;
  }
  /* ── Sheet unfurling; edges opening unevenly ── */
  25% {
    clip-path: polygon(22% 22%, 47% 30%, 73% 23%, 78% 49%, 72% 77%, 47% 80%, 20% 74%, 18% 51%);
    transform: scale(0.26) rotate(2.5deg);
    opacity: 0.36;
  }
  /* ── More than a third open; heavy edge irregularity ── */
  39% {
    clip-path: polygon(13% 13%, 44% 20%, 84% 14%, 87% 47%, 82% 85%, 48% 89%, 11% 83%, 9% 52%);
    transform: scale(0.42) rotate(-1.2deg);
    opacity: 0.52;
  }
  /* ── Over half-open; edges drawing back toward rectangle ── */
  54% {
    clip-path: polygon(6% 5%, 47% 11%, 93% 6%, 94% 48%, 91% 93%, 49% 94%, 5% 91%, 4% 51%);
    transform: scale(0.60) rotate(0.5deg);
    opacity: 0.67;
  }
  /* ── Mostly flat; small residual gather at corners ── */
  68% {
    clip-path: polygon(2% 2%, 49% 4%, 97% 2%, 97% 50%, 97% 97%, 51% 97%, 2% 98%, 2% 50%);
    transform: scale(0.78) rotate(-0.2deg);
    opacity: 0.80;
  }
  /* ── Nearly rectangular ── */
  81% {
    clip-path: polygon(0% 0%, 50% 1%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    transform: scale(0.92);
    opacity: 0.91;
  }
  /* ── Settling flat ── */
  90% {
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    transform: scale(0.98);
    opacity: 0.97;
  }
  /* ── Elastic overshoot: paper springiness as it snaps flat ── */
  95% {
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    transform: scale(1.012);
    opacity: 1;
  }
  98% {
    transform: scale(0.997);
  }
  100% {
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ── Closing animation ───────────────────────────────────────────────────────
   0-20 %:  resistance — paper holds flat, barely moves.
   20-100 %: exponential collapse — each keyframe covers more distance, matching
             how paper crumpling self-reinforces once the first crease commits.
   ──────────────────────────────────────────────────────────────────────────── */
.modal.fade-scale .modal-content.paper-closing {
  animation: paper-fold 0.7s linear forwards;
}

@keyframes paper-fold {
  /* ── Flat — paper resisting ── */
  0%  {
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  /* ── Imperceptible deformation — still resisting ── */
  10% {
    clip-path: polygon(0% 0%, 50% 1%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    transform: scale(0.98) rotate(0.4deg);
    opacity: 0.99;
  }
  /* ── First crease commits — edges start gathering ── */
  21% {
    clip-path: polygon(2% 2%, 49% 4%, 97% 2%, 97% 50%, 97% 97%, 51% 97%, 2% 98%, 2% 50%);
    transform: scale(0.88) rotate(-1.8deg);
    opacity: 0.94;
  }
  /* ── Crumple accelerating ── */
  33% {
    clip-path: polygon(6% 5%, 47% 11%, 93% 6%, 94% 48%, 91% 93%, 49% 94%, 5% 91%, 4% 51%);
    transform: scale(0.73) rotate(3.5deg);
    opacity: 0.84;
  }
  /* ── Fast collapse ── */
  46% {
    clip-path: polygon(13% 13%, 44% 20%, 84% 14%, 87% 47%, 82% 85%, 48% 89%, 11% 83%, 9% 52%);
    transform: scale(0.55) rotate(-5.5deg);
    opacity: 0.70;
  }
  /* ── Rapid ── */
  59% {
    clip-path: polygon(22% 22%, 47% 30%, 73% 23%, 78% 49%, 72% 77%, 47% 80%, 20% 74%, 18% 51%);
    transform: scale(0.37) rotate(8deg);
    opacity: 0.53;
  }
  /* ── Very rapid ── */
  72% {
    clip-path: polygon(33% 33%, 51% 37%, 65% 33%, 69% 50%, 64% 68%, 48% 71%, 32% 66%, 29% 50%);
    transform: scale(0.21) rotate(-11deg);
    opacity: 0.34;
  }
  /* ── Near-ball ── */
  84% {
    clip-path: polygon(39% 39%, 51% 37%, 60% 41%, 63% 51%, 60% 61%, 49% 63%, 38% 60%, 36% 50%);
    transform: scale(0.10) rotate(13deg);
    opacity: 0.16;
  }
  /* ── Ball ── */
  94% {
    clip-path: polygon(43% 43%, 51% 41%, 58% 44%, 61% 51%, 58% 59%, 50% 61%, 42% 58%, 40% 51%);
    transform: scale(0.06) rotate(-12deg);
    opacity: 0.06;
  }
  100% {
    clip-path: polygon(43% 43%, 51% 41%, 58% 44%, 61% 51%, 58% 59%, 50% 61%, 42% 58%, 40% 51%);
    transform: scale(0.05) rotate(-12deg);
    opacity: 0.02;
  }
}