/* Home page "Real projects, real impact": latest 4 portfolio images with a 3D tilt.   File: assets/css/home-projects.css */
.proj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 2.2rem; }

.proj {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
  cursor: default;
}
.proj:hover { --ty: -12px; }
.proj.tilting { transition: transform .08s linear; }

.proj-media {
  position: relative;
  aspect-ratio: 4 / 4.5;
  border-radius: 18px;
  overflow: hidden;
  background: #14161f;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .07);
  transition: box-shadow .4s ease;
}
.proj:hover .proj-media { box-shadow: 0 40px 60px -26px rgba(225, 29, 46, .55), 0 0 0 1px rgba(255, 255, 255, .16); }
.proj-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.proj:hover .proj-media img { transform: scale(1.1); }
.proj-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(5,5,7,.88) 100%); pointer-events: none; }

/* caption floats in front of the photo (real 3D depth) */
.proj-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: .45rem; justify-items: start;
  padding: 1.1rem 1.2rem;
  transform: translateZ(46px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.proj-cap b { display: flex; align-items: center; gap: .4rem; font-size: 1rem; }
.proj-cap svg { color: #ff5a68; flex-shrink: 0; }
.proj-cap em { font-style: normal; font-size: .72rem; font-weight: 700; background: var(--red); padding: .18rem .7rem; border-radius: 99px; text-shadow: none; }

.proj-glare { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%); }
.proj:hover .proj-glare { opacity: 1; }

.proj-more { display: flex; justify-content: center; margin-top: 2.4rem; }

/* entrance: cards swing in one after another (only when JS runs) */
.proj-grid.js-proj .proj:not(.in) { opacity: 0; --ry: -28deg; --ty: 34px; }
.proj-grid.js-proj .proj { transition-property: transform, opacity; }
.proj-grid.js-proj .proj:not(.ready) { transition-duration: .8s; transition-delay: calc(var(--i, 0) * 120ms); }

@media (max-width: 1000px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .proj-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .proj, .proj-media img { transition: none; transform: none; }
  .proj-grid.js-proj .proj:not(.in) { opacity: 1; }
}