/* Only animate when previous state doesn't match current state */
body:has(details[open]) #circleCover {
  animation: circularReveal 1s ease-out forwards;
}
body:has(details:not([open])) #circleCover.loaded {
  animation: circularClose 1s ease-out forwards;
}

details {
  position: relative;
  z-index: 1;
  background: light-dark(white, black);
  transition: 0.33s;
  
  &[open] {
    padding: 1rem;
    box-shadow: 0 0 4px 1px black;
    summary {
      margin: 0 0 0.5rem 0;
    }
  }
}

#circleCover {
  /* don't run on load */
  animation: circularClose 0s ease-out forwards;
  
  background: url(/spoiler-mode.115dec41c5c3afa3a955.png);
  background-size: 300px;
  position: fixed;
  inset: 0;
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}

@keyframes circularReveal {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}

@keyframes circularClose {
  from { clip-path: circle(150% at 50% 50%); }
  to { clip-path: circle(0% at 50% 50%); }
}