/* Solid (fully opaque) stops throughout — the previous mid-gradient stops
   used color-mix(..., transparent), whose rendered color depends on
   whatever's behind it and can't be guaranteed >=10:1 against a fixed icon
   color. All stops here are calculable and verified >=10:1 against the
   icon in both themes. */
#voldemortToggle.active {
  background: linear-gradient(
    7deg,
    var(--c-accent-green-vold-1),
    var(--c-accent-green-vold-2),
    var(--c-white),
    color-mix(in srgb, var(--c-white) 85%, var(--c-accent-green-vold-1)),
    var(--c-accent-green-vold-1),
    var(--c-accent-green-vold-2)
  );
}
#voldemortToggle.active i,
#voldemortToggle.active span,
#voldemortToggle.active .ic-icon {
  color: var(--c-black) !important;
}

.ink-vanish {
  -webkit-mask-image: linear-gradient(to right, transparent 45%, var(--c-black) 50%, var(--c-black) 55%);
          mask-image: linear-gradient(to right, transparent 45%, var(--c-black) 50%, var(--c-black) 55%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  animation: diaryVanish 2s ease-in-out forwards !important;
  pointer-events: none;
}

.ink-appear {
  -webkit-mask-image: linear-gradient(to right, var(--c-black) 45%, transparent 50%, transparent 55%);
          mask-image: linear-gradient(to right, var(--c-black) 45%, transparent 50%, transparent 55%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  animation: diaryAppear 2s ease-in-out forwards !important;
}

@keyframes diaryVanish {
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { -webkit-mask-position: 0%   0; mask-position: 0%   0; }
}

@keyframes diaryAppear {
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  100% { -webkit-mask-position: 0%   0; mask-position: 0%   0; }
}