@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");
@font-face {
  font-family: "Crass";
  src: url("https://assets.codepen.io/383755/Crass.woff2") format("woff2");
  font-display: swap;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
  flex-wrap: wrap;
  font-family: "Berkshire Swash";
  overflow: hidden;
  --x: 0px;
  --y: 0px;
}
body:hover div#light {
  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
  opacity: 1;
  filter: blur(0px);
}
body p {
  color: #000;
  position: relative;
  z-index: 9;
}
body div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}
body div strong {
  font-size: 13vw;
  width: 32.5vw;
  text-align: left;
  line-height: 0.8;
}
body div strong span {
  display: block;
}
body div strong span:nth-of-type(odd) {
  transform: translateX(-5vw);
}
body div strong span:last-of-type {
  transform: translate(-5vw, -1.5vw);
}
body div#dark {
  background: radial-gradient(circle at calc(50% + var(--x)) calc(50% + var(--y)), rgba(0, 0, 0, 0.75) 5vw, rgba(0, 0, 0, 0.85) 75vw), url("https://static.vecteezy.com/system/resources/previews/001/211/723/non_2x/floral-repeating-pattern-with-rose-flower-in-watercolor-style-vector.jpg");
}
body div#dark strong {
  color: #ceb2b4;
  text-shadow: clamp(-5px, calc((var(--x) / -100)), 5px) clamp(-5px, calc((var(--y) / -100)), 5px) 0px #a67477;
}
body div#light {
  opacity: 0;
  transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
  filter: blur(5px);
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), white), url("https://wallpaperaccess.com/full/215335.jpg");
  -webkit-mask: radial-gradient(circle at calc(50% + var(--x)) calc(50% + var(--y) - 2.25vw), #000 9vw, transparent 9vw), linear-gradient(to bottom, transparent calc(50% + var(--y)), #000 calc(50% + var(--y)), #000 calc(57.5% + var(--y)), rgba(0, 0, 0, 0.15));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(50% + var(--y)), calc(58.75% + var(--x)) calc(50% + var(--y)), 50% 110%, calc(41.25% + var(--x)) calc(50% + var(--y)), 0 calc(50% + var(--y)));
          clip-path: polygon(0 0, 100% 0, 100% calc(50% + var(--y)), calc(58.75% + var(--x)) calc(50% + var(--y)), 50% 110%, calc(41.25% + var(--x)) calc(50% + var(--y)), 0 calc(50% + var(--y)));
}
body div#light strong {
  font-family: "Crass";
  font-size: 10vw;
  line-height: 1;
  margin: 2.5vw 0 0;
}
body div#light strong span:last-of-type {
  transform: translate(-5vw, -1vw);
}