/* ═══════════════════════════════════════════
   Castle of Midnight — Motion Blur Transition
   
   Generic zone: place a .motion-transition
   with [data-motion-zone] between any two
   sections. Pick a .mt-blend--X-Y gradient
   variant to match the colors.
   ═══════════════════════════════════════════ */

.motion-transition {
  position: relative;
  height: 40vh;
  overflow: hidden;
  z-index: 1;
}

.motion-transition-inner {
  position: absolute;
  inset: 0;
}

.motion-transition .mt-blend {
  position: absolute;
  inset: 0;
  will-change: filter;
  transition: filter 0.5s ease-out;
}

.motion-transition .mt-streaks {
  position: absolute;
  inset: -60% 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px,
      rgba(232, 220, 194, 0.08) 1px,
      transparent 4px,
      rgba(200, 185, 160, 0.05) 6px,
      transparent 10px,
      rgba(254, 239, 221, 0.06) 12px,
      transparent 16px
    );
  filter: blur(1.5px);
  transition: opacity 0.2s ease-out;
}

.motion-transition .mt-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, backdrop-filter;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.2s ease-out, backdrop-filter 0.2s ease-out;
}

.motion-transition .mt-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(255, 251, 250, 0.2) 100%
  );
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.2s ease-out;
}

/* ─── Gradient variants ─── */

.mt-blend--white-cream {
  background: linear-gradient(180deg,
    var(--white) 0%, var(--white) 8%,
    rgba(254, 239, 221, 0.2) 30%,
    rgba(254, 239, 221, 0.55) 50%,
    rgba(254, 239, 221, 0.85) 72%,
    var(--cream) 92%, var(--cream) 100%);
}

.mt-blend--cream-white {
  background: linear-gradient(180deg,
    var(--cream) 0%, var(--cream) 8%,
    rgba(254, 239, 221, 0.85) 28%,
    rgba(254, 239, 221, 0.55) 50%,
    rgba(254, 239, 221, 0.2) 72%,
    var(--white) 92%, var(--white) 100%);
}