.spoiler.hidden:not(:has(> .transition)) {
  color: transparent;
  border-color: transparent;
  text-decoration-color: transparent;
  text-emphasis-color: transparent;
}

.spoiler.hidden:not(:has(> .transition)) > * {
  opacity: 0;
}

/**
 * Animated content transitions:
 * Fade In/Out via opacity
 */

.transition.fade {
  --hide-transition: 0.2s ease-out;
  --reveal-transition: 0.5s ease-out;

  transition:
    opacity var(--reveal-transition),
    filter var(--reveal-transition);
}

.spoiler.hidden > .transition.fade {
  opacity: 0;
  transition:
    opacity var(--hide-transition),
    filter var(--hide-transition);
  filter: blur(0.5px);
}

/**
 * "Iris" reveal effect
 * Adapted from https://expensive.toys/blog/fancy-css-reveal-effects
 */

@property --iris-gradient-length {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --iris-radius {
  syntax: "<length> | <percentage>";
  inherits: false;
  initial-value: 16px;
}

.spoiler > .transition.iris {
  --hide-duration: 0.15s;
  --reveal-duration: 0.3s;
}

.spoiler.hidden > .transition.iris {
  --iris-gradient-length: 0%;
  --iris-radius: 0px;

  opacity: 0;
  filter: blur(1px);

  /* quickly hide, animate opacity only */
  transition:
    --iris-gradient-length 0s linear var(--hide-duration),
    filter 0s linear var(--hide-duration),
    opacity var(--hide-duration) ease-out;
}

.transition.iris {
  mask: radial-gradient(
      circle closest-corner,
      black var(--iris-gradient-length),
      transparent calc(var(--iris-gradient-length) + var(--iris-radius))
    )
    no-repeat center;
  transition:
    --iris-gradient-length var(--reveal-duration) ease-out,
    opacity var(--reveal-duration) ease-out,
    filter var(--reveal-duration) ease-out;
}

/*
  it is a hack to ensure the mask is fully removed if max mask-size isn't enough to
  fully cover the element
 */
@keyframes remove-mask {
  to {
    mask-image: none;
  }
}

.spoiler:not(.hidden) > .transition.iris {
  animation: 0s linear var(--reveal-duration) 1 forwards remove-mask;
}