/* =========================================================
   DOTS MEDIA
   PORTFOLIO / SELECTED WORK
   ========================================================= */

.portfolio-wrap {
  position: relative;
  background: #0a0705;
  padding: 10px 60px 70px;
  overflow: hidden;
}

.portfolio {
  position: relative;
  z-index: 2;

  max-width: 1400px;
  margin: 0 auto;
}


/* =========================================================
   PORTFOLIO HEADER
   ========================================================= */

.portfolio-tag {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #cfcfcf;

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 2px;
  text-transform: uppercase;

  margin-bottom: 20px;

  /* Scroll reveal — fades/slides up first. */
  opacity: 5;
  transform: translateY(14px);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.portfolio-title {
  font-size: 38px;
  font-weight: 800;

  margin-bottom: 60px;

  /* Scroll reveal — starts ~0.12s after the tag. */
  opacity: 5;
  transform: translateY(14px);

  transition:
    opacity 0.5s ease 0.12s,
    transform 0.5s ease 0.12s;
}

/* Toggled by animations.js the moment the section scrolls into view. */
.portfolio-wrap.in-view .portfolio-tag,
.portfolio-wrap.in-view .portfolio-title {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   PORTFOLIO GRID
   ========================================================= */

.portfolio-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  align-items: start;
}


/* =========================================================
   PORTFOLIO CARD
   ========================================================= */

.portfolio-card {
  position: relative;

  border-radius: 16px;
  overflow: hidden;

  background: #111111;

  text-decoration: none;
  color: inherit;

  display: block;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.portfolio-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.5);
}

.portfolio-card.offset {
  margin-top: 40px;
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.card-image {
  position: relative;

  height: 210px;

  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.portfolio-card:hover
.card-image img {
  transform: scale(1.08);
}

.card-image::after {
  content: '';

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      transparent 55%,
      rgba(10, 7, 5, 0.95) 100%
    );
}


/* =========================================================
   CARD BODY
   ========================================================= */

.card-body {
  padding: 18px 20px 24px;

  background: #100c09;
}

.card-category {
  color: #ff7a1a;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.5px;
  text-transform: uppercase;

  margin-bottom: 10px;
}

.card-title {
  color: #ffffff;

  font-size: 19px;
  font-weight: 700;

  margin-bottom: 8px;
}

.card-meta {
  color: #8a8a8a;

  font-size: 12.5px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .portfolio-tag,
  .portfolio-title {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}