/* ===== 模板商城 · 电影级列表 ===== */

/* --- Marquee --- */
.tpl-marquee {
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  padding: 0.85rem 0;
  position: relative;
}

.tpl-marquee__fade {
  bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 12%;
  z-index: 2;
}

.tpl-marquee__fade--left {
  background: linear-gradient(90deg, #050505, transparent);
  left: 0;
}

.tpl-marquee__fade--right {
  background: linear-gradient(270deg, #050505, transparent);
  right: 0;
}

.tpl-marquee__track {
  animation: tpl-marquee 36s linear infinite;
  display: flex;
  gap: 2.5rem;
  width: max-content;
}

@keyframes tpl-marquee {
  to {
    transform: translateX(-50%);
  }
}

.tpl-marquee__item {
  align-items: center;
  color: rgba(var(--c-yellow-rgb), 0.38);
  display: inline-flex;
  font-size: 0.72rem;
  gap: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tpl-marquee__item em {
  color: color-mix(in srgb, var(--marquee-accent, #78bed2) 70%, white);
  font-style: normal;
  font-weight: 600;
}

/* --- Spotlight --- */
.tpl-spotlight {
  overflow: hidden;
  padding:
    calc(var(--vh, 1vh) * 9)
    max(var(--p), env(safe-area-inset-right, 0px))
    calc(var(--vh, 1vh) * 6)
    max(var(--p), env(safe-area-inset-left, 0px));
  position: relative;
}

.tpl-spotlight::before {
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(198, 167, 106, 0.08), transparent 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.tpl-spotlight__head,
.tpl-catalog__head {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.tpl-spotlight__head.is-visible,
.tpl-catalog__head.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tpl-spotlight__head {
  margin-bottom: 2.5rem;
  max-width: 40rem;
  position: relative;
}

.tpl-spotlight__label {
  color: rgba(198, 167, 106, 0.75);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  margin: 0 0 0.85rem;
}

.tpl-spotlight__title {
  font-family: var(--tpl-serif, "Noto Serif SC", serif);
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.tpl-spotlight__sub {
  color: rgba(var(--c-yellow-rgb), 0.58);
  line-height: 1.65;
  margin: 0;
}

.tpl-spotlight__stage {
  display: grid;
  gap: 1.5rem;
  opacity: 0;
  position: relative;
  transform: translateY(24px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.tpl-spotlight__stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 900px) {
  .tpl-spotlight__stage {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
  }
}

.tpl-spotlight__panels {
  min-height: 22rem;
  position: relative;
}

.tpl-spotlight__panel {
  display: grid;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(12px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.tpl-spotlight__panel.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  transform: translateY(0);
}

@media (min-width: 760px) {
  .tpl-spotlight__panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.tpl-spotlight__visual {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
}

.tpl-spotlight__glow {
  background: radial-gradient(
    circle at 30% 20%,
    color-mix(in srgb, var(--spot-accent, #78bed2) 35%, transparent),
    transparent 55%
  );
  inset: 0;
  opacity: 0.65;
  pointer-events: none;
  position: absolute;
}

.tpl-spotlight__visual img {
  animation: tpl-kenburns 18s ease-in-out infinite alternate;
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  object-position: top center;
  width: 100%;
}

@keyframes tpl-kenburns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

.tpl-spotlight__copy {
  align-content: center;
  display: grid;
  gap: 0.85rem;
}

.tpl-spotlight__live {
  background: color-mix(in srgb, #c8f542 16%, transparent);
  border: 1px solid color-mix(in srgb, #c8f542 40%, transparent);
  border-radius: 999px;
  color: #d8ff8a;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  margin-right: 0.55rem;
  padding: 0.18rem 0.5rem;
  vertical-align: middle;
}

.tpl-spotlight__eyebrow {
  color: var(--spot-accent, #78bed2);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}

.tpl-spotlight__name {
  font-family: var(--tpl-serif, "Noto Serif SC", serif);
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0;
}

.tpl-spotlight__hook {
  color: rgba(var(--c-yellow-rgb), 0.62);
  line-height: 1.65;
  margin: 0;
}

.tpl-spotlight__features {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.tpl-spotlight__features li {
  color: rgba(var(--c-yellow-rgb), 0.72);
  font-size: 0.85rem;
  padding-left: 1rem;
  position: relative;
}

.tpl-spotlight__features li::before {
  color: var(--spot-accent, #78bed2);
  content: "—";
  left: 0;
  position: absolute;
}

.tpl-spotlight__foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.tpl-spotlight__price {
  color: var(--tpl-gold-bright, #e8d4a8);
  font-size: 1.35rem;
  font-weight: 600;
}

.tpl-spotlight__nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tpl-spotlight__thumb {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.35rem;
  color: rgba(var(--c-yellow-rgb), 0.7);
  cursor: pointer;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 4.5rem 1fr;
  padding: 0.55rem;
  text-align: left;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

.tpl-spotlight__thumb:hover,
.tpl-spotlight__thumb.is-active {
  background: color-mix(in srgb, var(--spot-accent, #78bed2) 8%, transparent);
  border-color: color-mix(in srgb, var(--spot-accent, #78bed2) 45%, transparent);
  transform: translateX(4px);
}

.tpl-spotlight__thumb img {
  border-radius: 0.25rem;
  height: 3.25rem;
  object-fit: cover;
  width: 100%;
}

.tpl-spotlight__thumb span {
  font-size: 0.78rem;
  line-height: 1.4;
}

/* --- Catalog --- */
.tpl-catalog {
  padding:
    calc(var(--vh, 1vh) * 8)
    max(var(--p), env(safe-area-inset-right, 0px))
    calc(var(--vh, 1vh) * 10)
    max(var(--p), env(safe-area-inset-left, 0px));
  position: relative;
}

.tpl-catalog::before {
  background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(120, 190, 210, 0.06), transparent 65%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.tpl-catalog__head {
  margin-bottom: 2rem;
  max-width: 44rem;
  position: relative;
}

.tpl-catalog__label {
  color: rgba(120, 190, 210, 0.75);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  margin: 0 0 1rem;
}

.tpl-catalog__title {
  font-family: var(--tpl-serif, "Noto Serif SC", serif);
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.tpl-catalog__title-accent {
  background: linear-gradient(135deg, var(--tpl-gold-bright, #e8d4a8), rgba(120, 190, 210, 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tpl-catalog__sub {
  color: rgba(var(--c-yellow-rgb), 0.58);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}

.tpl-catalog__toolbar {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

@media (min-width: 820px) {
  .tpl-catalog__toolbar {
    align-items: center;
    grid-template-columns: minmax(12rem, 18rem) 1fr;
  }
}

.tpl-catalog__search {
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.tpl-catalog__search:focus-within {
  border-color: rgba(120, 190, 210, 0.45);
  box-shadow: 0 0 0 3px rgba(120, 190, 210, 0.08);
}

.tpl-catalog__search-icon {
  color: rgba(var(--c-yellow-rgb), 0.4);
  font-size: 0.9rem;
}

.tpl-catalog__search input {
  background: transparent;
  border: 0;
  color: rgba(var(--c-yellow-rgb), 0.9);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
  width: 100%;
}

.tpl-catalog__search input::placeholder {
  color: rgba(var(--c-yellow-rgb), 0.35);
}

.tpl-catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tpl-catalog__filter {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(var(--c-yellow-rgb), 0.72);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0.45rem 1rem;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}

.tpl-catalog__filter:hover,
.tpl-catalog__filter.is-active {
  background: color-mix(in srgb, var(--filter-accent, #78bed2) 14%, transparent);
  border-color: color-mix(in srgb, var(--filter-accent, #78bed2) 50%, transparent);
  color: rgba(var(--c-yellow-rgb), 0.95);
  transform: translateY(-1px);
}

.tpl-catalog__count {
  color: rgba(var(--c-yellow-rgb), 0.42);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin: 0 0 1.25rem;
  position: relative;
}

.tpl-catalog__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
}

@media (min-width: 768px) {
  .tpl-catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .tpl-catalog__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tpl-catalog__empty {
  color: rgba(var(--c-yellow-rgb), 0.5);
  grid-column: 1 / -1;
  padding: 3rem 0;
  text-align: center;
}

/* --- Premium cards --- */
.tpl-card {
  color: inherit;
  display: block;
  perspective: 900px;
  text-decoration: none;
}

.tpl-card[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 0.06s);
}

.tpl-card[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tpl-card__tilt {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.45rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    border-color 0.3s,
    box-shadow 0.35s,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.tpl-card:hover .tpl-card__tilt {
  border-color: color-mix(in srgb, var(--card-accent, #78bed2) 45%, transparent);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 0 50px color-mix(in srgb, var(--card-accent, #78bed2) 10%, transparent);
}

.tpl-card__browser {
  align-items: center;
  background: rgba(12, 12, 12, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 0.35rem;
  left: 0;
  padding: 0.45rem 0.65rem;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.tpl-card__browser span {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  height: 0.42rem;
  width: 0.42rem;
}

.tpl-card__browser span:first-child {
  background: rgba(198, 120, 100, 0.75);
}

.tpl-card__visual {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding-top: 1.65rem;
  position: relative;
}

.tpl-card__shine {
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 48%,
    transparent 58%
  );
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-120%);
  transition: opacity 0.2s;
  z-index: 2;
}

.tpl-card:hover .tpl-card__shine {
  animation: tpl-card-shine 0.85s ease;
  opacity: 1;
}

@keyframes tpl-card-shine {
  to {
    transform: translateX(120%);
  }
}

.tpl-card--live .tpl-card__tilt {
  border-color: color-mix(in srgb, #c8f542 35%, rgba(255, 255, 255, 0.08));
}

.tpl-card--live:hover .tpl-card__tilt {
  border-color: color-mix(in srgb, #c8f542 55%, transparent);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 0 40px color-mix(in srgb, #c8f542 14%, transparent);
}

.tpl-card__badge--live {
  align-items: center;
  background: rgba(8, 8, 9, 0.82);
  border: 1px solid color-mix(in srgb, #c8f542 45%, transparent);
  color: #d8ff8a;
  display: inline-flex;
  gap: 0.35rem;
}

.tpl-card__live-dot {
  animation: tpl-live-pulse 1.8s ease-in-out infinite;
  background: #c8f542;
  border-radius: 50%;
  box-shadow: 0 0 8px #c8f542;
  height: 0.38rem;
  width: 0.38rem;
}

@keyframes tpl-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

.tpl-card__badge {
  background: linear-gradient(135deg, rgba(198, 167, 106, 0.92), rgba(160, 130, 70, 0.92));
  border-radius: 999px;
  color: #1a1408;
  font-size: 0.62rem;
  font-weight: 600;
  left: 0.75rem;
  letter-spacing: 0.12em;
  padding: 0.28rem 0.6rem;
  position: absolute;
  top: 0.75rem;
  z-index: 2;
}

.tpl-card__badge--soft {
  background: rgba(5, 5, 5, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(var(--c-yellow-rgb), 0.75);
}

.tpl-card__visual img {
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    object-position 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}

.tpl-card:hover .tpl-card__visual img {
  object-position: center 18%;
  transform: scale(1.03);
}

.tpl-card__industry {
  backdrop-filter: blur(10px);
  background: rgba(5, 5, 5, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  bottom: 0.75rem;
  color: rgba(var(--c-yellow-rgb), 0.9);
  font-size: 0.72rem;
  left: 0.75rem;
  padding: 0.28rem 0.65rem;
  position: absolute;
  z-index: 2;
}

.tpl-card__hover-cta {
  backdrop-filter: blur(8px);
  background: rgba(5, 5, 5, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  bottom: 0.75rem;
  color: rgba(var(--c-yellow-rgb), 0.95);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  opacity: 0;
  padding: 0.35rem 0.75rem;
  position: absolute;
  right: 0.75rem;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
  z-index: 2;
}

.tpl-card:hover .tpl-card__hover-cta {
  opacity: 1;
  transform: translateY(0);
}

.tpl-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1rem 1.15rem;
}

.tpl-card__name {
  font-family: var(--tpl-serif, "Noto Serif SC", serif);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0;
}

.tpl-card__tagline {
  color: rgba(var(--c-yellow-rgb), 0.52);
  flex: 1;
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0;
}

.tpl-card__meta {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
}

.tpl-card__platform {
  color: rgba(241, 234, 222, 0.72);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tpl-card__price {
  color: var(--tpl-gold-bright, #e8d4a8);
  font-size: 1.05rem;
  font-weight: 600;
}

.tpl-card.is-hidden {
  display: none;
}

/* --- Streetwear album --- */
.tpl-album {
  overflow: hidden;
  padding:
    calc(var(--vh, 1vh) * 7)
    max(var(--p), env(safe-area-inset-right, 0px))
    calc(var(--vh, 1vh) * 5)
    max(var(--p), env(safe-area-inset-left, 0px));
  position: relative;
}

.tpl-album::before {
  background:
    radial-gradient(ellipse 55% 45% at 15% 20%, color-mix(in srgb, var(--album-accent, #c8f542) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 80%, rgba(198, 167, 106, 0.06), transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.tpl-album__head {
  margin-bottom: 1.75rem;
  max-width: 42rem;
  position: relative;
  z-index: 1;
}

.tpl-album__label {
  color: color-mix(in srgb, var(--album-accent, #c8f542) 75%, white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.tpl-album__title {
  font-family: var(--tpl-serif, "Noto Serif SC", serif);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.55rem;
}

.tpl-album__sub {
  color: rgba(var(--c-yellow-rgb), 0.55);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

.tpl-album__track-wrap {
  margin-inline: calc(-1 * max(var(--p), env(safe-area-inset-left, 0px)));
  overflow-x: auto;
  padding-bottom: 0.5rem;
  position: relative;
  scrollbar-width: thin;
  z-index: 1;
}

.tpl-album__track {
  display: flex;
  gap: 1rem;
  padding-inline: max(var(--p), env(safe-area-inset-left, 0px));
  width: max-content;
}

.tpl-card--compact {
  flex-shrink: 0;
  width: min(72vw, 280px);
}

.tpl-card--compact .tpl-card__visual {
  aspect-ratio: 3 / 4;
}

.tpl-card--compact .tpl-card__name {
  font-size: 0.98rem;
}

.tpl-card--compact .tpl-card__tagline {
  display: -webkit-box;
  font-size: 0.76rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tpl-card__badge--album {
  background: color-mix(in srgb, var(--album-accent, #c8f542) 18%, rgba(0, 0, 0, 0.55));
  border: 1px solid color-mix(in srgb, var(--album-accent, #c8f542) 35%, transparent);
  color: color-mix(in srgb, var(--album-accent, #c8f542) 85%, white);
}

@media (max-width: 640px) {
  .tpl-catalog__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  .tpl-catalog__filters::-webkit-scrollbar {
    display: none;
  }

  .tpl-catalog__filter {
    flex-shrink: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .tpl-marquee__track,
  .tpl-hero__orbit-ring,
  .tpl-orbit-card--a,
  .tpl-orbit-card--b,
  .tpl-orbit-card--c {
    animation: none;
  }

  .tpl-card[data-reveal] {
    opacity: 1;
    transform: none;
  }
}