/* SELECTED WORKS, LAST SLIDE: a statement and two buttons on the blue of the Website Development
   card. A light runs slowly around its border; John's mark sits faint in the corner. */

@property --wend-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.wend { display: flex; }
.wend__card {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(140deg, #0a4dff 0%, #0b63f0 45%, #0d8dfa 78%, #18cdfd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 30px 60px -34px rgba(10, 77, 255, 0.85);
}
/* the shine: a bright arc travelling round a hairline border */
.wend__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--wend-a), rgba(255, 255, 255, 0.22) 0deg, rgba(255, 255, 255, 0.22) 250deg, #fff 300deg, rgba(255, 255, 255, 0.22) 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  animation: wendShine 6s linear infinite;
}
@keyframes wendShine { to { --wend-a: 360deg; } }

/* John's mark, big but faint, cropped by the corner */
.wend__mark { position: absolute; right: -14%; bottom: -12%; z-index: 0; width: 62%; height: auto; opacity: 0.12; filter: brightness(0) invert(1); pointer-events: none; transition: translate 0.8s var(--ease-out), opacity 0.4s; }
.wend:hover .wend__mark { translate: -8px -8px; opacity: 0.16; }

.wend__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; padding: 40px 34px; }
.wend__k { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); color: #fff; font-size: 13px; font-weight: 500; line-height: 1; }
.wend__t { margin-top: 20px; color: #fff; font-size: clamp(34px, 3vw, 46px); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.wend__t span { color: rgba(255, 255, 255, 0.72); }
.wend__x { max-width: 34ch; margin-top: 16px; color: rgba(255, 255, 255, 0.9); font-size: 16.5px; line-height: 1.55; }
.wend__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.wend__all { color: rgba(255, 255, 255, 0.9); font-size: 14.5px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 4px; transition: color 0.2s; }
.wend__all:hover { color: #fff; }

@media (max-width: 767px) {
  .wend__card { border-radius: 18px; }
  .wend__copy { padding: 30px 22px; }
  .wend__t { font-size: 32px; }
  .wend__x { font-size: 15.5px; }
  .wend__mark { width: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .wend__card::before { animation: none; }
}