<button popovertarget="alert" popovertargetaction="toggle">Fire popover</button>
<div id="alert" popover role="alert">This popover was animated using @starting-style and transitions</div>

@import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");
@layer reset, popover-presentation, demo;

@layer demo {
  [popover] {
    opacity: 0;
    transform: translateY(-30px);
    transition-property: opacity, transform, overlay, display;
    transition-duration: 0.8s;
    transition-behavior: allow-discrete;
    &:popover-open {
      opacity: 1;
      transform: translateY(0);
      @starting-style {
        opacity: 0;
        transform: translateY(30px);
      }
    }
  }
}

@layer popover-presentation {
  [popover] {
    position: fixed;
    inset-inline: auto 4vw;
    top: 3vw;
    margin: 0;
    padding: 10px 25px;
    border: 4px solid rgb(101, 51, 77);
    border-radius: 5px;
    background: rgb(244, 51, 171);
    color: white;
    background-image: linear-gradient(
      30deg in oklch,
      oklch(70% 0.16 340) 0%,
      oklch(90% 0.3 200) 166% 166%
    );
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: "Quicksand", sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
    min-height: 100vh;
    color: #fff;
    background: #f5e9e2;
  }
  @layer buttons {
    button {
      --_color: var(--color, #cb04a5);
      background: var(--_color);
      border: 2px solid var(--_color);
      color: white;
    }

    button {
      padding: 13px 20px;
      border-radius: 5px;
      font-size: 1.7rem;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    }
  }

  @layer buttonhover {
    button:is(:hover, :focus) {
      --color: var(--hoverColor, #f433ab);
    }
  }
}