/* Stride — pinned 3D portfolio card stack on a vertical cylinder */
[data-stride-portfolio]{
  --sp-bg: var(--ds-bg-dark, #0a0c12);
  --sp-fg: #fff;
  --sp-radius: 1.5rem;
  --sp-card-width: 90vw;
  --sp-card-max: 46rem;
  position: relative;
  background: var(--sp-bg);
  color: var(--sp-fg);
  font-family: var(--ds-font-primary, inherit);
}
[data-stride-portfolio] *{ box-sizing: border-box; }

/* Source items are hidden once the JS has built the stage */
[data-stride-portfolio].sp-ready > [data-portfolio-card],
[data-stride-portfolio].sp-ready > [data-portfolio-title]{ display: none; }

.sp-stage{
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
}

/* 1. Blurred backdrop */
.sp-backdrop{ position: absolute; inset: 0; overflow: hidden; }
.sp-backdrop img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(40px); will-change: transform, opacity;
}
.sp-backdrop::after{
  content: ""; position: absolute; inset: 0; background: rgba(10,12,18,.55);
}

/* 2. Heading */
.sp-title{
  position: absolute; left: 0; right: 0; top: 6rem; z-index: 30;
  margin: 0; text-align: center;
  font-size: 2rem; font-weight: 300; line-height: .95; letter-spacing: -0.02em;
  color: var(--sp-fg);
}
@media (min-width: 640px){ .sp-title{ font-size: 2.5rem; } }
@media (min-width: 1024px){ .sp-title{ font-size: 4rem; } }
.sp-word{ display: inline-block; white-space: nowrap; }
.sp-letter{ display: inline-block; will-change: transform, opacity, filter; }

/* 3. 3D cylinder */
.sp-3d{
  position: absolute; inset: 0;
  perspective: 1900px; transform-style: preserve-3d;
}
.sp-card{
  position: absolute; left: 50%; top: 50%;
  aspect-ratio: 16 / 10; width: var(--sp-card-width); max-width: var(--sp-card-max);
  overflow: hidden; border-radius: var(--sp-radius);
  background: var(--sp-bg);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}
.sp-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-card-scrim{ position: absolute; inset: 0; background: #000; pointer-events: none; }

/* 4. Metadata row */
.sp-meta{
  position: absolute; left: 1rem; right: 1rem; top: 50%;
  transform: translateY(-50%); z-index: 30;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  font-size: .875rem; pointer-events: none;
}
.sp-count{ font-variant-numeric: tabular-nums; color: rgba(255,255,255,.5); }
.sp-name{
  font-size: 1.125rem; color: var(--sp-fg); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 640px){ .sp-name{ font-size: 1.5rem; } }
.sp-btn{
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.25); border-radius: 9999px;
  padding: 10px 20px; color: rgba(255,255,255,.8);
  text-decoration: none; background: transparent; font: inherit; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.sp-btn:hover{ color: #fff; border-color: rgba(255,255,255,.6); }