@property --warm {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.stage {
  --warm: 0;
  transition: --warm 0s 700ms;
}
.stage:has(.areas:hover) {
  --warm: 1;
  transition: --warm 0s 250ms;
}
.area {
  position: relative;
}
.tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  display: none;
  opacity: 0;
  white-space: nowrap;
  transition:
    opacity 120ms,
    display 120ms allow-discrete;
  transition-delay: calc((1 - var(--warm)) * 250ms);
}
.area:hover .tip {
  display: block;
  opacity: 1;
}
@starting-style {
  .area:hover .tip {
    opacity: 0;
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}