/* Bespoke software project covers — each keeps the project's own visual identity. */
.bespoke-project-card {
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color .35s ease, box-shadow .45s cubic-bezier(.22,1,.36,1), transform .25s ease;
}

.bespoke-cover {
  --cover-accent: #60a5fa;
  --cover-accent-2: #34d399;
  --cover-bg: #07101f;
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(280px, 28vw, 390px);
  overflow: hidden;
  color: #f8fafc !important;
  background: var(--cover-bg);
  text-decoration: none !important;
  isolation: isolate;
}

.bespoke-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .34;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cover-accent) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cover-accent) 20%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s;
}

.bespoke-cover::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 56%;
  aspect-ratio: 1;
  right: -16%;
  bottom: -43%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cover-accent) 34%, transparent), transparent 68%);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}

.bespoke-project-card:hover .bespoke-cover::before { transform: scale(1.06) rotate(.6deg); opacity: .52; }
.bespoke-project-card:hover .bespoke-cover::after { transform: scale(1.25); }

.bespoke-cover__top,
.bespoke-cover__bottom {
  position: absolute;
  right: clamp(20px, 3vw, 36px);
  left: clamp(20px, 3vw, 36px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
}

.bespoke-cover__top { top: clamp(20px, 3vw, 32px); }
.bespoke-cover__top b { max-width: 80%; color: color-mix(in srgb, var(--cover-accent) 80%, white); font-size: 9px; letter-spacing: .14em; }
.bespoke-cover__top i { color: rgba(255,255,255,.48); font-size: 10px; font-style: normal; }
.bespoke-cover__bottom { bottom: clamp(19px, 3vw, 30px); padding-top: 15px; border-top: 1px solid rgba(255,255,255,.18); }
.bespoke-cover__bottom b { color: rgba(255,255,255,.7); font-size: 9px; letter-spacing: .09em; }
.bespoke-cover__bottom > i { color: var(--cover-accent); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.bespoke-project-card:hover .bespoke-cover__bottom > i { transform: translateX(7px); }

.bespoke-cover__logo {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  width: min(62%, 360px);
  height: 48%;
  place-items: center;
  transform: translate(-50%, -48%);
  transition: transform .65s cubic-bezier(.22,1,.36,1), filter .45s;
}

.bespoke-cover__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bespoke-project-card:hover .bespoke-cover__logo { transform: translate(-50%, -52%) scale(1.045); }

.bespoke-cover__system {
  position: absolute;
  top: 29%;
  right: 7%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 28%;
  opacity: .42;
  transform: rotate(-8deg);
}

.bespoke-cover__system i { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--cover-accent); transform-origin: right; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.bespoke-cover__system i:nth-child(2) { width: 72%; margin-left: auto; }
.bespoke-cover__system i:nth-child(3) { width: 86%; margin-left: auto; background: var(--cover-accent-2); }
.bespoke-cover__system i:nth-child(4) { width: 54%; margin-left: auto; }
.bespoke-cover__system i:nth-child(5) { width: 67%; margin-left: auto; background: var(--cover-accent-2); }
.bespoke-project-card:hover .bespoke-cover__system i { transform: scaleX(.82); }

.bespoke-cover--psykolink {
  --cover-bg: #f8fafc;
  --cover-accent: #3b82f6;
  --cover-accent-2: #10b981;
  color: #152031 !important;
  background:
    radial-gradient(circle at 18% 30%, rgba(59,130,246,.16), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(16,185,129,.15), transparent 31%),
    #f8fafc;
}
.bespoke-cover--psykolink::before { opacity: .48; }
.bespoke-cover--psykolink .bespoke-cover__top b { color: #3b82f6; }
.bespoke-cover--psykolink .bespoke-cover__top i,
.bespoke-cover--psykolink .bespoke-cover__bottom b { color: #526173; }
.bespoke-cover--psykolink .bespoke-cover__bottom { border-color: rgba(31,41,55,.16); }
.bespoke-cover--psykolink .bespoke-cover__logo { width: min(37%, 210px); height: 48%; }
.bespoke-cover--psykolink .bespoke-cover__system { right: 10%; }

.bespoke-cover--kenerya {
  --cover-bg: #f4f7fc;
  --cover-accent: #1d4ed8;
  --cover-accent-2: #facc15;
  color: #132857 !important;
  background:
    linear-gradient(118deg, transparent 0 66%, rgba(250,204,21,.14) 66% 74%, transparent 74%),
    radial-gradient(circle at 76% 34%, rgba(29,78,216,.12), transparent 34%),
    #f4f7fc;
}
.bespoke-cover--kenerya::before { opacity: .38; }
.bespoke-cover--kenerya .bespoke-cover__top b { color: #1d4ed8; }
.bespoke-cover--kenerya .bespoke-cover__top i,
.bespoke-cover--kenerya .bespoke-cover__bottom b { color: #53647e; }
.bespoke-cover--kenerya .bespoke-cover__bottom { border-color: rgba(19,40,87,.18); }
.bespoke-cover--kenerya .bespoke-cover__logo { width: min(66%, 430px); height: 44%; }
.bespoke-cover--kenerya .bespoke-cover__system { left: 8%; right: auto; }

.bespoke-cover--qtr {
  --cover-bg: #030712;
  --cover-accent: #34d399;
  --cover-accent-2: #2dd4bf;
  background:
    radial-gradient(circle at 30% 52%, rgba(16,185,129,.18), transparent 38%),
    #030712;
}
.bespoke-cover--qtr .bespoke-cover__logo { width: min(52%, 315px); height: 45%; }
.bespoke-cover--qtr .bespoke-cover__logo img { filter: drop-shadow(0 20px 34px rgba(16,185,129,.2)); }

.bespoke-cover--kiwwi {
  --cover-bg: #050906;
  --cover-accent: #a3e635;
  --cover-accent-2: #a78bfa;
  background:
    linear-gradient(90deg, rgba(5,9,6,.9), rgba(5,9,6,.25) 58%, rgba(5,9,6,.72)),
    linear-gradient(0deg, rgba(5,9,6,.88), transparent 64%),
    url('/images/kiwwi/world-map-night.jpg') center 38% / cover no-repeat,
    #050906;
}
.bespoke-cover--kiwwi::before { opacity: .45; background-size: 28px 28px; }
.bespoke-cover__kiwwi { position: absolute; top: 44%; left: clamp(22px,5vw,64px); z-index: 3; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); }
.bespoke-cover__kiwwi b { color: #d9f99d; font: 800 clamp(2.4rem,6vw,5.5rem)/1 var(--font-mono,monospace); letter-spacing: -.08em; text-shadow: 0 10px 35px rgba(0,0,0,.65); }
.bespoke-cover__kiwwi i { width: 12px; height: 2.6rem; background: #a3e635; animation: bespoke-blink 1.1s steps(1) infinite; }
.bespoke-cover--kiwwi .bespoke-cover__system { top: 35%; right: 7%; width: 31%; }

.bespoke-project-card:has(.bespoke-cover--psykolink):hover { border-color: rgba(59,130,246,.58) !important; box-shadow: 0 28px 74px -34px rgba(59,130,246,.6) !important; }
.bespoke-project-card:has(.bespoke-cover--kenerya):hover { border-color: rgba(250,204,21,.7) !important; box-shadow: 0 28px 74px -34px rgba(29,78,216,.58) !important; }
.bespoke-project-card:has(.bespoke-cover--qtr):hover { border-color: rgba(52,211,153,.56) !important; box-shadow: 0 28px 74px -34px rgba(16,185,129,.58) !important; }
.bespoke-project-card:has(.bespoke-cover--kiwwi):hover { border-color: rgba(163,230,53,.58) !important; box-shadow: 0 28px 74px -34px rgba(163,230,53,.48) !important; }

@keyframes bespoke-blink { 50% { opacity: 0; } }

@media (max-width: 640px) {
  .bespoke-cover { min-height: 270px; }
  .bespoke-cover__top b { max-width: 72%; }
  .bespoke-cover__bottom b { max-width: 82%; }
  .bespoke-cover__logo { width: 60%; }
  .bespoke-cover--kenerya .bespoke-cover__logo { width: 76%; }
  .bespoke-cover__system { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .bespoke-cover *, .bespoke-cover::before, .bespoke-cover::after { animation: none !important; transition: none !important; }
}