/* =========================================================
   Page transition overlay (corrupted-pixel + glass)
   Masks the .content panel during a route swap.
========================================================= */
.page-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;

  opacity: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);

  /* stepped fade = chunky/pixel feel */
  transition: opacity 0.16s steps(3, end);
}

.page-fx.show {
  opacity: 1;
}

/* chromatic corruption bands (decorative; the base layer does the masking) */
.page-fx::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(90deg, rgba(255, 0, 128, 0.55), transparent 45%),
    linear-gradient(270deg, rgba(0, 225, 220, 0.55), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 6px);
  mix-blend-mode: screen;
  opacity: 0;
}

.page-fx.show::before {
  animation: pageCorrupt 0.18s steps(4, end) infinite;
}

@keyframes pageCorrupt {
  0%   { opacity: 0.9;  clip-path: inset(0 0 72% 0);  transform: translateX(-9px); }
  25%  { opacity: 0.55; clip-path: inset(33% 0 42% 0); transform: translateX(10px); }
  50%  { opacity: 0.85; clip-path: inset(60% 0 12% 0); transform: translateX(-6px); }
  75%  { opacity: 0.5;  clip-path: inset(16% 0 58% 0); transform: translateX(7px); }
  100% { opacity: 0.75; clip-path: inset(0 0 0 0);     transform: translateX(0); }
}

/* respect reduced-motion: plain glass fade, no glitch */
@media (prefers-reduced-motion: reduce) {
  .page-fx.show::before { animation: none; opacity: 0; }
}

/* =========================================================
   Theme switch transition — smooth light <-> dark recolor.
   Two layers:
     1. a gated color crossfade so every surface eases between
        palettes instead of snapping (only active during the
        ~0.55s switch window, via body.theme-transition);
     2. a radial "ink ripple" that blooms from the toggle button.
========================================================= */

/* (1) ease the themed properties only while switching */
body.theme-transition,
body.theme-transition *,
body.theme-transition *::before,
body.theme-transition *::after {
  transition:
    background-color 0.5s ease,
    color            0.5s ease,
    border-color     0.5s ease,
    box-shadow       0.5s ease,
    fill             0.5s ease,
    stroke           0.5s ease !important;
}

/* (2) the ripple — JS sets its origin (left/top), size, and tint */
#theme-sweep {
  position: fixed;
  z-index: 9000;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(
    circle at center,
    var(--sweep-color, rgba(127, 127, 127, 0.5)) 0%,
    var(--sweep-color, rgba(127, 127, 127, 0.5)) 55%,
    transparent 72%
  );
  will-change: transform, opacity;
}

@keyframes themeSweep {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  #theme-sweep.run { animation: themeSweep 0.55s ease-out forwards; }
}