/* ============ PROJECTS — "Selected Work" (dark stage, bento layout) ============ */

#projects {
  position: relative;
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(0, 163, 255, .10) 0%, transparent 55%),
    radial-gradient(45% 30% at 82% 8%, rgba(15, 181, 166, .07), transparent 62%),
    #060606;
  color: #ebeced;
  padding-block: clamp(40.32px, 3.6vw, 66.24px);
  overflow: hidden;
}

/* shared grain over every layer, same trick as the skills stage */
#projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#projects .container { position: relative; z-index: 1; }

/* ---- Header ---- */
#projects .projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(17.28px, 2.16vw, 43.2px);
  margin-bottom: clamp(25.92px, 2.3vw, 43.2px);
}

#projects .projects-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(25.92px, 2.81vw, 48.96px);
  line-height: 1.05;
  white-space: nowrap;
  background: linear-gradient(to bottom right, #fff 28%, #ffffff7a);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

#projects .projects-tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 0.68vw, 13px);
  line-height: 1.55;
  color: #9a9a9a;
  max-width: 309.6px;
  padding-bottom: .4em;
}

/* ---- Bento grid: featured hero spans the row, three cards beneath ---- */
#projects .projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(11.52px, 1.08vw, 18.72px);
}

/* ---- Card shell ----
   The card's own transform/transition are driven by the tilt script, so the
   material (gradient hairline, fill, shadow) lives on ::before where it can
   animate on hover independently. */
#projects .project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(8.64px, 0.65vw, 11.52px);
  border-radius: clamp(14.4px, 1.22vw, 20.16px);
  color: #ebeced;
  /* grid/flex items default to min-width:auto, which lets the screenshots'
     intrinsic width push the track wider than the container. */
  min-width: 0;
}

#projects .project-card > *,
#projects .project-body > * { min-width: 0; }

#projects .project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(#121213, #0b0b0c) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, .02)) border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px rgba(0, 0, 0, .45);
  transition: box-shadow .5s cubic-bezier(.16, 1, .3, 1), background .5s ease;
}

#projects .project-card:hover::before {
  background:
    linear-gradient(#141416, #0c0c0e) padding-box,
    linear-gradient(160deg, rgba(45, 212, 196, .5), rgba(255, 255, 255, .08) 42%, rgba(255, 255, 255, .03)) border-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .07) inset,
    0 26px 60px rgba(0, 0, 0, .6),
    0 0 44px rgba(15, 181, 166, .14);
}

/* featured hero — media left, story right */
#projects .project-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  align-items: center;
  gap: clamp(14.4px, 1.58vw, 30.24px);
}

/* ---- Media frame ---- */
#projects .project-media {
  position: relative;
  width: 100%;
  aspect-ratio: 807 / 470;
  border-radius: clamp(8.64px, 0.79vw, 12.96px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  background: #0a0a0b;
}

#projects .project-card--featured .project-media { aspect-ratio: 16 / 10; }

#projects .project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

#projects .project-media--themeforge { background: #000; }

/* ---- Body ---- */
#projects .project-body {
  display: flex;
  flex-direction: column;
  padding: clamp(10.08px, 0.86vw, 14.4px) clamp(4.32px, 0.36vw, 7.2px) clamp(2.88px, 0.29vw, 5.76px);
}

#projects .project-card--featured .project-body {
  padding: clamp(5.76px, 0.72vw, 12.96px) clamp(7.2px, 0.86vw, 15.84px);
}

#projects .project-head {
  display: flex;
  align-items: center;
  gap: clamp(6.48px, 0.58vw, 10.08px);
}

#projects .project-index {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: #6a6a6a;
  padding-top: 2px;
}

#projects .project-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 0.97vw, 17.28px);
  line-height: 1.25;
  color: #fff;
  transition: color .35s ease;
}

#projects .project-card--featured .project-name {
  font-size: clamp(17.28px, 1.58vw, 28.8px);
}

/* arrow pinned to the right edge of the head row */
#projects .project-arrow {
  flex: none;
  margin-left: auto;
  width: clamp(17.28px, 1.22vw, 21.6px);
  height: clamp(17.28px, 1.22vw, 21.6px);
  color: #6f6f6f;
  transform: rotate(44deg);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), color .35s ease;
}

#projects .project-card--featured .project-arrow {
  width: clamp(21.6px, 1.58vw, 28.8px);
  height: clamp(21.6px, 1.58vw, 28.8px);
}

#projects .project-arrow svg { width: 100%; height: 100%; display: block; }

#projects .project-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(13px, 0.63vw, 13px);
  line-height: 1.6;
  color: #949494;
  margin-top: clamp(5.76px, 0.5vw, 8.64px);
}

#projects .project-card--featured .project-desc {
  font-size: clamp(13px, 0.76vw, 13px);
  line-height: 1.62;
  margin-top: clamp(8.64px, 0.72vw, 12.96px);
  max-width: 46ch;
}

/* ---- Stack chips ---- */
#projects .project-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5.04px;
  margin-top: auto;
  padding-top: clamp(10.08px, 0.86vw, 15.84px);
}

#projects .chip {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: #a8a8a8;
  padding: 3.6px 7.92px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .022);
  white-space: nowrap;
  transition: border-color .35s ease, color .35s ease;
}

#projects .chip--year {
  color: var(--accent-bright, #2dd4c4);
  border-color: rgba(45, 212, 196, .28);
  background: rgba(15, 181, 166, .07);
}

#projects .project-card:hover .chip { border-color: rgba(255, 255, 255, .17); color: #c6c6c6; }
#projects .project-card:hover .chip--year { border-color: rgba(45, 212, 196, .45); color: var(--accent-bright, #2dd4c4); }

/* ---- Hover ---- */
#projects .project-card:hover .project-media img { transform: scale(1.05); }
#projects .project-card:hover .project-arrow { transform: rotate(89deg); color: var(--accent-bright, #2dd4c4); }
#projects .project-card:hover .project-name { color: var(--accent-bright, #2dd4c4); }

/* ============ Centered coverflow carousel ============
   All slides stack in one grid cell; the active one sits centre at full
   size and its two neighbours are pushed out, scaled back and faded. */
#projects .work-carousel {
  --cw: 56%;      /* centre card width */
  --push: 68%;    /* how far the side cards sit out, in card widths */
  --side-scale: .84;
  margin-top: clamp(14.4px, 1.3vw, 23.04px);
}

#projects .work-carousel__stage {
  display: grid;
  /* room for the scaled side cards + their shadows, then clip the overflow */
  padding: 24.48px clamp(14.4px, 2.88vw, 50.4px);
  margin: -24.48px calc(-1 * clamp(14.4px, 2.88vw, 50.4px));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

#projects .work-slide {
  grid-area: 1 / 1;          /* every slide occupies the same cell */
  width: var(--cw);
  justify-self: center;
  transform: translateX(calc(var(--dir, 0) * var(--push))) scale(var(--side-scale));
  opacity: .3;
  z-index: 1;
  pointer-events: none;
  transition:
    transform .75s cubic-bezier(.16, 1, .3, 1),
    opacity .6s ease;
}

#projects .work-slide.is-center {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* ---- controls row: prev · bars · next ---- */
#projects .work-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10.08px, 1.01vw, 17.28px);
  margin-top: clamp(14.4px, 1.3vw, 23.04px);
}

#projects .work-nav {
  display: grid;
  place-items: center;
  width: 30.24px;
  height: 30.24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: #cfcfcf;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

#projects .work-nav svg { width: 14.4px; height: 14.4px; }
#projects .work-nav--next svg { transform: rotate(180deg); }

#projects .work-nav:hover {
  background: rgba(255, 255, 255, .93);
  border-color: transparent;
  color: #000;
  transform: scale(1.08);
}

#projects .work-nav:active { transform: scale(.96); }

/* ---- timing bars ---- */
#projects .work-carousel__bars {
  display: flex;
  gap: 7.2px;
}

#projects .work-bar {
  position: relative;
  width: clamp(24.48px, 2.45vw, 37.44px);
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
  cursor: pointer;
  transition: background .3s ease;
}

#projects .work-bar:hover { background: rgba(255, 255, 255, .26); }

#projects .work-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--accent-bright, #2dd4c4);
  box-shadow: 0 0 10px rgba(45, 212, 196, .55);
}

#projects .work-bar.is-done::after { transform: scaleX(1); }

/* the active bar fills over --dur; its animationend advances the deck */
#projects .work-bar.is-active::after {
  animation: work-bar-fill var(--dur, 6s) linear forwards;
}

@keyframes work-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

#projects .work-carousel.is-paused .work-bar.is-active::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #projects .work-slide { transition: none; }
  #projects .work-bar.is-active::after { animation: none; transform: scaleX(1); }
}

@media (max-width: 900px) {
  #projects .work-carousel { --cw: 72%; --push: 62%; --side-scale: .8; }
}

@media (max-width: 640px) {
  #projects .work-carousel { --cw: 86%; --push: 58%; --side-scale: .78; }
  #projects .work-nav { width: 27.36px; height: 27.36px; }
}

/* ---- Explore more ---- */
#projects .projects-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(24.48px, 2.16vw, 40.32px);
}

#projects .explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 7.2px;
  padding: 8.64px 20.16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(13px, 0.65vw, 13px);
  color: #ebeced;
  background: rgba(255, 255, 255, .03);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

#projects .explore-dot {
  width: 5.76px;
  height: 5.76px;
  border-radius: 50%;
  background: var(--accent-bright, #2dd4c4);
  box-shadow: 0 0 10px rgba(45, 212, 196, .8);
  transition: background .35s ease;
}

#projects .explore-btn:hover {
  background: rgba(255, 255, 255, .93);
  color: #000;
  border-color: transparent;
}

#projects .explore-btn:hover .explore-dot { background: #000; box-shadow: none; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  #projects .projects-grid { grid-template-columns: repeat(2, 1fr); }
  #projects .project-card--featured {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 900px) {
  #projects .projects-header { flex-direction: column; align-items: flex-start; gap: 11.52px; }
  #projects .projects-title { white-space: normal; }
  #projects .projects-tagline { max-width: 100%; padding-bottom: 0; }
}

@media (max-width: 640px) {
  #projects .projects-grid { grid-template-columns: 1fr; }
}