@property --deck-distance {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --deck-depth {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.project-track, .client-viewport {
  --deck-edge: clamp(1.5rem, 9vw, 8rem);
  --deck-mask: linear-gradient(to right, transparent, #000 var(--deck-edge), #000 calc(100% - var(--deck-edge)), transparent);
  -webkit-mask-image: var(--deck-mask);
  mask-image: var(--deck-mask);
}
.client-viewport { --deck-edge: clamp(2.25rem, 15vw, 13rem); }

.project-track {
  --deck-inset: 16px;
  --project-width: clamp(16rem, 42vw, 35rem);
  position: relative;
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  margin: 0 calc(-1 * var(--deck-inset));
  padding: 1rem max(var(--deck-inset), calc((100% - var(--project-width)) / 2 + var(--deck-inset))) 1.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #a6625a8f transparent;
}
.project-track.loop-ready, .client-track.loop-ready {
  scroll-behavior: auto;
  scroll-snap-type: none;
  scrollbar-width: none;
}
.project-track.loop-ready { padding-inline: var(--deck-inset); }
.project-track:focus-visible { outline: 1px solid var(--contrast); outline-offset: -2px; border-radius: 12px; }
.project {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--project-width);
  min-width: 0;
  padding: clamp(.85rem, 1.55vw, 1.25rem);
  scroll-snap-align: center;
  border: 1px solid var(--glass-edge);
  border-radius: clamp(15px, 1.9vw, 25px);
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.project-track.loop-ready > .project {
  transform: perspective(1080px) translateY(calc(var(--deck-depth, 0) * 9px))
             rotateY(calc(var(--deck-distance, 0) * -6deg)) scale(calc(1 - var(--deck-depth, 0) * .045));
  opacity: calc(1 - var(--deck-depth, 0) * .10);
}
.project[data-current] { border-color: #fbe4d077; }
.project-track.loop-ready > .project:focus-within { opacity: 1; }
.project-image { border-radius: clamp(9px, 1.1vw, 15px); }
.project-image.is-portrait { background: radial-gradient(ellipse at 50% 70%, #492d37, #18151b 80%); }
.project-image.is-portrait img { object-fit: contain; }
.project-number {
  bottom: .55rem;
  inset-inline-start: .55rem;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: #141010a8;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.project h3 { margin-bottom: .15rem; }
.project-sources { display: flex; flex-wrap: wrap; gap: var(--control-gap); margin-top: auto; padding-block-start: 1rem; }
.project-source {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .3rem;
  min-block-size: 36px;
  padding: .35rem .65rem;
  border: 1px solid var(--control-edge);
  border-radius: 999px;
  background-image: var(--control-surface);
  box-shadow: var(--control-shadow);
  color: var(--ink);
  font-size: .74rem;
  font-weight: 650;
}
.project > .project-source { margin-top: auto; }
.project > h3 { padding-bottom: .5rem; }
a.project-source:is(:hover, :focus-visible) { border-color: var(--hover-border); background-color: var(--hover-tint); }
.project-link { display: block; border-radius: 12px; }
.project-controls {
  display: flex;
  justify-content: center;
  gap: var(--control-gap);
  margin-block-start: clamp(.8rem, 1.55vw, 1.25rem);
}
.project-controls[hidden], :is([data-project-playback], [data-client-playback])[hidden] { display: none; }
.slider-control:is([data-project-step], [data-client-step]):dir(rtl) > span { transform: scaleX(-1); }

.project, .client-card {
  transition: scale .42s var(--glide), border-color .4s var(--glide),
              box-shadow .45s var(--glide), background-color .4s var(--glide);
}
.project:is(:hover, :focus-visible, :focus-within), .client-card:is(:hover, :focus-visible) {
  z-index: 1;
  scale: 1.022;
  border-color: var(--hover-border, #ff9b8b98);
  background-color: var(--hover-tint, #a8352d3d);
  box-shadow: var(--glass-shadow), 0 0 24px var(--hover-glow, #ff695a3d);
}
.client-card::before { transition: background-color .4s var(--glide); }
.client-card:is(:hover, :focus-visible)::before { background-color: var(--hover-tint, #a8352d3d); }
.client-play-icon { display: block; }
:is([data-project-playback], [data-client-playback])[data-playing="true"] .client-play-icon {
  width: .62em;
  height: .72em;
  border-inline: .15em solid currentColor;
}
:is([data-project-playback], [data-client-playback])[data-playing="false"] .client-play-icon {
  width: 0;
  height: 0;
  border-block: .37em solid transparent;
  border-left: .56em solid currentColor;
  margin-left: .09em;
}

@media (max-width: 700px) {
  :root { --reveal-blur: 8px; }
  .project-track { --project-width: min(76vw, 25rem); }
  .project-source { min-block-size: 44px; }
  .project, .client-card {
    -webkit-backdrop-filter: blur(9px) saturate(128%);
    backdrop-filter: blur(9px) saturate(128%);
  }
  .client-card { filter: blur(calc(var(--deck-depth, 0) * .72px)); }
  .project-track.scroll-layer { --layer-depth: .72; }
  .client-track.scroll-layer { --layer-depth: .34; }
  .project-track.scroll-layer > .project,
  .client-track.scroll-layer .client-card { translate: none; }
}

@media (hover: none) and (pointer: coarse) {
  /* Keep live frosted glass on the center card without compositing every moving surface. */
  .project-track.loop-ready > .project:not([data-current]),
  .client-track.loop-ready > .client-slide:not([data-current]) > .client-card,
  .project-number {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .client-card { filter: none; }
}

@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .client-track.loop-ready > .client-slide:not([data-current]) > .client-card { filter: blur(.75px); }
}

@media (prefers-reduced-motion: reduce) {
  .project, .client-card, .client-card::before { transition: none; }
  .project:is(:hover, :focus-visible, :focus-within), .client-card:is(:hover, :focus-visible) { scale: none; }
}