/*
Look at you, hacker! Sneaking a peek at my code... Or are you considering becoming a client?
Get a job, or better yet, hire my agency - FeysMedia. Let's talk business!
Call us now or drop an email:

FeysMedia e.U.
+436606787039
office@feysmedia.at

Inspiration for the effect: codepen.io
 */

@property --_x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
figure {
  --w: 280px; /* image width */
  --r: .5em;  /* radius */

  display: grid;
  place-items: end end;
  font: bold 40px/1.5 monospace;
  transition: --_x .5s;
  cursor: pointer;
  margin: 0;
}
figure.alt {
  place-items: end start;
}
figure > * {
  grid-area: 1/1;
}
figure:hover {
  --_x: calc(var(--w) - 3*var(--r) - .5lh);
}
figure img {
  width: var(--w);
  aspect-ratio: 1;
  border-radius: var(--r);
  --_m:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 69%,#0000 72%);
  --_g:conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)),#0000 25%,#000 0);
  --_d:(.5lh + var(--r));
  mask:
    calc(100% - var(--_d) - var(--_x)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(.5lh at 100% 100%,#0000 99%,#000 calc(100% + 1px))
    calc(-1*var(--r) - var(--_x)) calc(-1*var(--r)),
    var(--_g) calc(-1*var(--_d) - var(--_x)) 0,
    var(--_g) 0 calc(-1*var(--_d));
  mask-repeat: no-repeat;
}
figure.alt img {
  --_g:conic-gradient(from 180deg at var(--r) calc(100% - var(--r)),#0000 25%,#000 0);
  mask:
    calc(var(--_d) + var(--_x)) 100% var(--_m),
    0% calc(100% - var(--_d)) var(--_m),
    radial-gradient(.5lh at 0 100%,#0000 99%,#000 calc(100% + 1px))
    calc(var(--r) + var(--_x)) calc(-1*var(--r)),
    var(--_g) calc(var(--_d) + var(--_x)) 0,
    var(--_g) 0 calc(-1*var(--_d));
  mask-repeat: no-repeat;
}
figure figcaption {
  height: 1lh;
  width: calc(1lh + var(--_x));
  box-sizing: border-box;
  translate: calc(.5lh - var(--r)) calc(.5lh - var(--r));
  overflow: hidden;
  background: #00B6C6;
  color: #fff;
  border-inline: calc(.5lh - .5ch) solid #0000;
  clip-path: inset(5px round 1lh);
  text-align: center;
  letter-spacing: 1px;
}
figure.alt figcaption {
  translate: calc(-.5lh + var(--r)) calc(.5lh - var(--r));
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 30px;
  background: linear-gradient(135deg, rgb(118, 218, 231) 0%, rgb(243, 238, 238) 100%);
}

a {
  all: unset;
}