/**
 * NAM Cards Loop — Figma Frame 1314 (2474:17353)
 * Design canvas: 1571.4196 x 791.8673
 */

/* Frame 1314 */
.nam-loop {
  --nam-w: 1571.4196px;
  --nam-h: 791.8673px;
  --nam-pad: 32.938px;
  --nam-gap: 32.938px;
  --nam-radius: 21.959px;
  --nam-bg: #121212;
  --nam-card: #1b1b1b;
  --nam-bottom-shell: #282828;
  --nam-muted: #9d9d9d;
  --nam-dim: #666;
  --nam-text: #dfdfdf;
  --nam-pill: #343434;
  --nam-download: #20e9b5;
  --nam-top-gap: 35.683px;
  --nam-tone-w: 736.303px;
  --nam-tone-h: 144.218px;
  --nam-detail-w: 1406.324px;
  --nam-detail-h: 461px;
  --nam-detail-gap: 49.393px;
  --nam-detail-step: 1455.717px;
  --nam-marquee-duration: 45s;
  /* Soft ease — longer slide, gentle accel/decel (not linear/snappy) */
  --nam-slide-ms: 700ms;
  --nam-slide-ease: cubic-bezier(0.33, 0.08, 0.2, 1);

  width: var(--nam-w);
  height: var(--nam-h);
  background: var(--nam-bg);
  border-radius: var(--nam-radius);
  padding: var(--nam-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nam-gap);
  overflow: hidden;
  position: relative;
}

/* Top row — Frame 1317 `2478:18618` */
.nam-loop__top {
  width: 1505.543px;
  height: var(--nam-tone-h);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.nam-loop__top-track {
  display: flex;
  align-items: center;
  /* Margin on cards (not gap) so duplicated set is exactly 50% for seamless loop */
  gap: 0;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: nam-loop-marquee var(--nam-marquee-duration) linear infinite;
}

@keyframes nam-loop-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* TONE CARD — instance scale as in Frame 1314 */
.nam-loop__tone {
  width: var(--nam-tone-w);
  height: var(--nam-tone-h);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: var(--nam-top-gap);
}

.nam-loop__tone-inner {
  background: var(--nam-card);
  border-radius: 16px;
  padding: 10.979px;
  display: flex;
  align-items: center;
  gap: 21.959px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.nam-loop__tone-thumb {
  aspect-ratio: 70 / 70;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.nam-loop__tone-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 16px;
}

.nam-loop__tone-details {
  flex: 1 0 0;
  min-width: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10.979px;
}

.nam-loop__tone-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.nam-loop__tone-meta {
  display: flex;
  align-items: center;
  gap: 21.959px;
  flex-shrink: 0;
}

.nam-loop__tone-category {
  margin: 0;
  font-size: 32.94px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--nam-muted);
  white-space: nowrap;
}

.nam-loop__tone-downloads {
  display: flex;
  align-items: center;
  gap: 10.979px;
  flex-shrink: 0;
}

.nam-loop__tone-dl-icon {
  width: 32.938px;
  height: 32.938px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nam-loop__tone-dl-icon img {
  width: 21.959px;
  height: 21.959px;
  display: block;
}

.nam-loop__tone-dl-count {
  margin: 0;
  font-size: 32.94px;
  font-weight: 500;
  line-height: normal;
  color: var(--nam-dim);
  white-space: nowrap;
}

.nam-loop__tone-status {
  width: 37.055px;
  height: 32.938px;
  position: relative;
  flex-shrink: 0;
}

.nam-loop__tone-status img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.nam-loop__tone-status--cloud img {
  width: 31.566px;
  height: 23.331px;
}

.nam-loop__tone-status--folder img {
  width: 34.495px;
  height: 26.734px;
}

.nam-loop__tone-name {
  margin: 0;
  width: 100%;
  font-size: 45.2px;
  font-weight: 600;
  line-height: normal;
  color: var(--nam-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottom shell — Frame 1311 `2473:16930` */
.nam-loop__bottom {
  width: 100%;
  background: var(--nam-bottom-shell);
  border-radius: var(--nam-radius);
  padding: 43.917px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.nam-loop__bottom-viewport {
  width: 100%;
  height: var(--nam-detail-h);
  overflow: hidden;
  position: relative;
}

.nam-loop__bottom-track {
  display: flex;
  align-items: flex-start;
  gap: var(--nam-detail-gap);
  height: var(--nam-detail-h);
  will-change: transform;
  transition: transform var(--nam-slide-ms) var(--nam-slide-ease);
}

.nam-loop__bottom-track.is-instant {
  transition: none;
}

/* Detail Container `2500:8457` */
.nam-loop__detail {
  width: var(--nam-detail-w);
  height: var(--nam-detail-h);
  background: var(--nam-card);
  border-radius: 21.952px;
  padding: 21.952px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.nam-loop__detail-row {
  display: flex;
  align-items: flex-start;
  gap: 32.929px;
  width: 100%;
  flex: 1 0 0;
  min-height: 0;
}

.nam-loop__detail-thumb {
  width: 417.095px;
  height: 417.095px;
  border-radius: 21.952px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.nam-loop__detail-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 21.952px;
}

.nam-loop__detail-info {
  flex: 1 0 0;
  min-width: 1px;
  height: 417.095px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.nam-loop__detail-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32.929px;
  width: 100%;
  flex-shrink: 0;
}

.nam-loop__detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.nam-loop__detail-header-left {
  display: flex;
  align-items: center;
  gap: 43.905px;
  flex-shrink: 0;
}

.nam-loop__detail-type {
  display: flex;
  align-items: center;
  gap: 21.952px;
  flex-shrink: 0;
}

.nam-loop__detail-big-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nam-loop__detail-big-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.nam-loop__detail-category {
  margin: 0;
  font-size: 32.929px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: var(--nam-muted);
  white-space: nowrap;
}

.nam-loop__detail-model {
  margin: 0;
  font-size: 32.929px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: var(--nam-dim);
  white-space: nowrap;
}

.nam-loop__detail-info-icon {
  width: 32.929px;
  height: 32.929px;
  position: relative;
  flex-shrink: 0;
}

.nam-loop__detail-info-icon img {
  position: absolute;
  left: calc(50% - 0.37px);
  top: calc(50% - 0.37px);
  width: 28.538px;
  height: 28.538px;
  transform: translate(-50%, -50%);
  display: block;
}

.nam-loop__detail-title {
  margin: 0;
  width: 100%;
  font-size: 54.881px;
  font-weight: 700;
  line-height: normal;
  color: var(--nam-text);
}

.nam-loop__detail-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 21.952px;
  width: 100%;
  flex-shrink: 0;
}

.nam-loop__detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.nam-loop__detail-files {
  margin: 0;
  font-size: 32.929px;
  font-weight: 500;
  line-height: normal;
  color: var(--nam-dim);
  white-space: nowrap;
}

.nam-loop__detail-status {
  display: flex;
  align-items: center;
  gap: 21.952px;
  flex-shrink: 0;
}

.nam-loop__detail-status-icon {
  width: 27.44px;
  height: 27.44px;
  position: relative;
  flex-shrink: 0;
}

.nam-loop__detail-status-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.nam-loop__detail-status-label {
  margin: 0;
  font-size: 32.929px;
  font-weight: 600;
  line-height: normal;
  color: var(--nam-dim);
  white-space: nowrap;
}

.nam-loop__detail-testing {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32.929px;
  flex-shrink: 0;
}

.nam-loop__detail-testing-label {
  margin: 0;
  font-size: 32.929px;
  font-weight: 500;
  line-height: normal;
  color: var(--nam-muted);
  white-space: nowrap;
}

.nam-loop__detail-download {
  margin: 0;
  font-size: 32.929px;
  font-weight: 600;
  line-height: normal;
  color: var(--nam-download);
  white-space: nowrap;
}

.nam-loop__detail-pill {
  background: var(--nam-pill);
  border-radius: 21.952px;
  padding: 10.976px;
  display: flex;
  align-items: center;
  gap: 10.976px;
  width: 100%;
  flex: 1 0 0;
  min-width: 1px;
}

.nam-loop__detail-pill-text {
  margin: 0;
  flex: 1 0 0;
  min-width: 1px;
  font-size: 32.929px;
  font-weight: 500;
  line-height: normal;
  color: var(--nam-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nam-loop__detail-chevron {
  width: 30.185px;
  height: 21.56px;
  position: relative;
  flex-shrink: 0;
}

.nam-loop__detail-chevron-inner {
  position: absolute;
  left: calc(50% + 0.54px);
  top: calc(50% - 0.54px);
  width: 20.482px;
  height: 14.014px;
  transform: translate(-50%, -50%) rotate(-90deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nam-loop__detail-chevron-inner img {
  width: 14.014px;
  height: 20.482px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .nam-loop__top-track {
    animation: none;
  }

  .nam-loop__bottom-track {
    transition: none;
  }
}


/* Fit into a sized host (e.g. WizeHost hero loader slot) */
.nam-loop-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.nam-loop-embed__scale {
  width: 1571.4196px;
  height: 791.8673px;
  transform-origin: top left;
  transform: scale(var(--nam-fit-scale, 0.375));
  will-change: transform;
}

.nam-loop-embed .nam-loop {
  border-radius: 0;
}