/* Screen-only transition layer. The deck itself never scrolls or prints. */

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}

.fx-flash,
.fx-ring,
.fx-grit {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fx-flash {
  inset: 0;
  background:
    radial-gradient(62% 58% at var(--boom-x, 74%) var(--boom-y, 48%), rgba(255, 248, 231, 0.96) 0%, rgba(255, 210, 146, 0.8) 22%, rgba(214, 137, 48, 0.32) 48%, rgba(20, 14, 10, 0) 72%),
    radial-gradient(120% 90% at 50% 50%, rgba(242, 178, 82, 0.18), rgba(20, 14, 10, 0) 70%);
}

.fx-ring {
  left: var(--boom-x, 74%);
  top: var(--boom-y, 48%);
  width: 30vmin;
  height: 30vmin;
  margin: -15vmin 0 0 -15vmin;
  border: 2px solid rgba(255, 218, 158, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 46px rgba(242, 178, 82, 0.55), inset 0 0 34px rgba(255, 236, 198, 0.35);
}

.fx-grit {
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 214, 160, 0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255, 190, 120, 0.45) 0 1px, transparent 1.8px),
    radial-gradient(circle at 44% 78%, rgba(255, 236, 205, 0.4) 0 1px, transparent 1.5px);
  background-size: 86px 74px, 132px 118px, 64px 92px;
}

/* Opening → next: the authentic plaque is stripped back to fresh wood. */
/* The scene calls back at the break and sets --boom-x/--boom-y to the plaque's screen position. */
.fx-layer.fx-boom .fx-flash { animation: mr-flash 760ms cubic-bezier(.2,.7,.2,1) both; }
.fx-layer.fx-boom .fx-ring { animation: mr-ring 900ms cubic-bezier(.16,.8,.28,1) both; }
.fx-layer.fx-boom .fx-grit { animation: mr-grit 1100ms ease-out both; }

/* Later transitions: one quick finish-sweep, direction aware. */
.fx-layer.fx-run::before {
  content: '';
  position: absolute;
  inset: -18% -30%;
  background: linear-gradient(
    104deg,
    rgba(255, 236, 204, 0) 34%,
    rgba(255, 219, 165, 0.16) 44%,
    rgba(255, 250, 240, 0.42) 49.5%,
    rgba(242, 178, 82, 0.28) 55%,
    rgba(255, 236, 204, 0) 66%
  );
  transform: translateX(calc(var(--sweep-dir, 1) * -125%));
  animation: mr-sweep 520ms cubic-bezier(.3,.7,.2,1) both;
}

.deck.is-shaking { animation: mr-shake 520ms cubic-bezier(.36,.07,.19,.97) both; }

/* Hard impact: full brightness on the first frame, then it burns off. */
@keyframes mr-flash {
  0% { opacity: 1; transform: scale(0.9); }
  18% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 0.3; }
  100% { opacity: 0; }
}

@keyframes mr-ring {
  0% { opacity: 0; transform: scale(0.14); }
  16% { opacity: 0.95; }
  100% { opacity: 0; transform: scale(3.4); }
}

@keyframes mr-grit {
  0% { opacity: 0; transform: scale(1.04) translateY(8px); }
  22% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1) translateY(-22px); }
}

@keyframes mr-sweep {
  0% { transform: translateX(calc(var(--sweep-dir, 1) * -125%)); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateX(calc(var(--sweep-dir, 1) * 125%)); opacity: 0; }
}

@keyframes mr-shake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  8% { transform: translate3d(-13px, 8px, 0) rotate(-0.4deg); }
  20% { transform: translate3d(11px, -9px, 0) rotate(0.34deg); }
  34% { transform: translate3d(-8px, 5px, 0) rotate(-0.22deg); }
  50% { transform: translate3d(5px, -3px, 0) rotate(0.14deg); }
  68% { transform: translate3d(-3px, 2px, 0) rotate(-0.07deg); }
  86% { transform: translate3d(1px, 0, 0); }
}

/* Incoming slide settles rather than cutting. */
.slide.landing .slide-head,
.slide.landing .slide-body,
.slide.landing .slide-foot {
  animation: mr-land 620ms cubic-bezier(.2,.7,.2,1) both;
}
.slide.landing .slide-body { animation-delay: 70ms; }
.slide.landing .slide-foot { animation-delay: 120ms; }

@keyframes mr-land {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-layer,
  .deck.is-shaking { display: none !important; }
  .slide.landing .slide-head,
  .slide.landing .slide-body,
  .slide.landing .slide-foot { animation: none !important; }
}