/* ====================================================================
   service.html v2 — 架构图谱主题
   依赖: tokens.css / ct.css
   ==================================================================== */

/* ==================== Hero · 左文右图(架构图谱) — 100vh ==================== */
.ct-svc-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--ct-header-h) 0 var(--ct-space-8);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(
    ellipse at 80% 30%,
    rgba(19, 26, 46, 0.6),
    var(--ct-bg) 65%
  );
}
.ct-svc-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--ct-space-9);
  align-items: center;
  width: 100%;
}

/* 3D 丝带 canvas — 整张 hero 后景, 内容压在上层 */
.ct-svc-hero__ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Scroll 提示 — 复用首页风格 */
.ct-svc-hero__scroll {
  position: absolute;
  bottom: var(--ct-space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ct-space-2);
  color: var(--ct-text-mute);
  font-size: var(--ct-fs-xs);
  letter-spacing: 0.3em;
}
.ct-svc-hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--ct-gold), transparent);
  position: relative;
  overflow: hidden;
}
.ct-svc-hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, var(--ct-gold) 50%, transparent);
  animation: ct-svc-scroll-line 2s ease-in-out infinite;
}
@keyframes ct-svc-scroll-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.ct-svc-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-5);
  max-width: 560px;
}
.ct-svc-hero__title { margin: 0; }
.ct-svc-hero__lead {
  font-size: var(--ct-fs-body-lg);
  max-width: 50ch;
}
.ct-svc-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-3);
  margin-top: var(--ct-space-3);
}
.ct-svc-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== 架构图谱 SVG ==================== */
.ct-arch-diagram {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  position: relative;
}
.ct-arch-diagram__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* halo 4 圈 — 不同方向 + 不同速度 */
.ct-arch-diagram__halo {
  transform-origin: 300px 300px;
}
.ct-arch-diagram__halo--1 { animation: ct-arch-halo-spin 240s linear infinite; }
.ct-arch-diagram__halo--2 { animation: ct-arch-halo-spin 200s linear infinite reverse; }
.ct-arch-diagram__halo--3 { animation: ct-arch-halo-spin 160s linear infinite; }
.ct-arch-diagram__halo--4 { animation: ct-arch-halo-spin 130s linear infinite reverse; }
@keyframes ct-arch-halo-spin {
  to { transform: rotate(360deg); }
}

/* 4 条流光连线 (stroke-dasharray + dashoffset 流动) */
.ct-arch-diagram__beam {
  stroke-dasharray: 8 12;
  animation: ct-arch-beam-flow 3s linear infinite;
}
.ct-arch-diagram__beam:nth-of-type(odd)  { animation-direction: normal; }
.ct-arch-diagram__beam:nth-of-type(even) { animation-direction: reverse; }
@keyframes ct-arch-beam-flow {
  to { stroke-dashoffset: -40; }
}

/* 4 个角节点 - 呼吸 pulse */
.ct-arch-diagram__node {
  transform-box: fill-box;
  transform-origin: center;
}
.ct-arch-diagram__node circle:first-child {
  animation: ct-arch-node-pulse 4s ease-in-out infinite;
}
.ct-arch-diagram__node--1 circle:first-child { animation-delay: 0s; }
.ct-arch-diagram__node--2 circle:first-child { animation-delay: 1s; }
.ct-arch-diagram__node--3 circle:first-child { animation-delay: 2s; }
.ct-arch-diagram__node--4 circle:first-child { animation-delay: 3s; }
@keyframes ct-arch-node-pulse {
  0%, 100% {
    stroke: rgba(201,160,92,0.35);
    filter: drop-shadow(0 0 4px rgba(201,160,92,0.3));
  }
  50% {
    stroke: rgba(232,184,114,0.85);
    filter: drop-shadow(0 0 14px rgba(232,184,114,0.7));
  }
}


@media (max-width: 991px) {
  .ct-svc-hero { min-height: auto; padding: calc(var(--ct-header-h) + var(--ct-space-7)) 0 var(--ct-space-9); }
  .ct-svc-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--ct-space-7);
    text-align: center;
  }
  .ct-svc-hero__content { align-items: center; max-width: 100%; }
  .ct-svc-hero__lead { margin: 0 auto; }
  .ct-svc-hero__cta { justify-content: center; }
  .ct-arch-diagram { max-width: 420px; }
  .ct-svc-hero__scroll { display: none; }
}
@media (max-width: 640px) {
  .ct-arch-diagram { max-width: 320px; }
}

/* ==================== Mini-stats Bar (Hero → Services 过渡) ==================== */
.ct-mini-stats-band {
  padding: var(--ct-space-7) 0;
}
/* 底部金色光带 — 与 ct-section::before (顶部光带) 镜像, reveal 时展开 */
.ct-mini-stats-band::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ct-gold) 50%, transparent);
  transition: width 1.4s var(--ct-ease-out), left 1.4s var(--ct-ease-out);
  opacity: 0;
}
.ct-mini-stats-band.is-revealed::after {
  width: 80%;
  left: 10%;
  opacity: 1;
}
.ct-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ct-space-7);
}
.ct-mini-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-2);
  position: relative;
  padding-left: var(--ct-space-5);
}
.ct-mini-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--ct-gold), transparent);
}
.ct-mini-stat__num {
  font-family: var(--ct-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  color: var(--ct-text);
  line-height: 1;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.ct-mini-stat__num em {
  font-style: normal;
  font-size: 0.55em;
  color: var(--ct-gold);
  font-weight: 500;
  margin-left: 2px;
}
.ct-mini-stat__label {
  font-size: var(--ct-fs-sm);
  color: var(--ct-text-soft);
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .ct-mini-stats { grid-template-columns: repeat(2, 1fr); gap: var(--ct-space-5); }
}

/* ==================== Core Services (非对称 grid, featured 跨两行) ==================== */
.ct-svc-core {
  padding-top: var(--ct-section-py);
}
.ct-svc-core__layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--ct-space-9);
  align-items: stretch;
}
.ct-svc-core__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ct-space-4);
}
.ct-svc-core__title { margin: 0; }
.ct-svc-core__lead {
  margin: 0;
  max-width: 46ch;
}

/* 4 个 ✓ checklist */
.ct-svc-core__list {
  list-style: none;
  margin: var(--ct-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-4);
}
.ct-svc-core__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ct-space-3);
}
.ct-svc-core__check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ct-gold-soft);
  border: 1px solid var(--ct-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ct-gold);
  font-size: 12px;
  margin-top: 3px;
}
.ct-svc-core__list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-svc-core__list-text strong {
  font-family: var(--ct-font-display);
  font-size: var(--ct-fs-h6);
  font-weight: 600;
  color: var(--ct-text);
  letter-spacing: -0.01em;
}
.ct-svc-core__list-text span {
  color: var(--ct-text-mute);
  font-size: var(--ct-fs-sm);
  line-height: 1.55;
}

/* 底部强调 badge */
.ct-svc-core__badge {
  margin-top: var(--ct-space-5);
  padding: var(--ct-space-5) var(--ct-space-6);
  border: 1px solid var(--ct-border-gold);
  background: linear-gradient(135deg, var(--ct-gold-soft), transparent 70%);
  border-radius: var(--ct-radius-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-5);
  align-self: flex-start;
}
.ct-svc-core__badge-num {
  font-family: var(--ct-font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  color: var(--ct-gold);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.ct-svc-core__badge-num em {
  font-size: 0.5em;
  font-style: normal;
  color: var(--ct-gold);
}
.ct-svc-core__badge-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-svc-core__badge-label strong {
  font-family: var(--ct-font-display);
  font-size: var(--ct-fs-h6);
  color: var(--ct-text);
  font-weight: 600;
}
.ct-svc-core__badge-label span {
  color: var(--ct-text-mute);
  font-size: var(--ct-fs-sm);
}

/* 右侧:iPhone mockup */
.ct-svc-core__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* iPhone 截图 — 高度匹配左侧文字, 宽度自适应保持比例 */
.ct-phone-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

@media (max-width: 991px) {
  .ct-svc-core__layout { grid-template-columns: 1fr; }
  .ct-svc-core__visual { display: none; }
}

/* ==================== Comparison Tabs ==================== */
.ct-svc-compare {
  background: var(--ct-bg-deep);
  padding-top: var(--ct-section-py-sm);
}
.ct-tabs {
  max-width: 960px;
  margin: 0 auto;
}
.ct-tabs__bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--ct-border);
  margin-bottom: var(--ct-space-7);
}
.ct-tabs__tab {
  background: transparent;
  border: 0;
  padding: var(--ct-space-4) var(--ct-space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ct-space-2);
  cursor: pointer;
  font-family: var(--ct-font-ui);
  font-size: var(--ct-fs-sm);
  font-weight: 500;
  color: var(--ct-text-mute);
  letter-spacing: 0.02em;
  transition: color var(--ct-dur) var(--ct-ease-out);
}
.ct-tabs__tab i {
  font-size: 22px;
  color: var(--ct-text-mute);
  transition: color var(--ct-dur) var(--ct-ease-out), transform var(--ct-dur) var(--ct-ease-out);
}
.ct-tabs__tab:hover {
  color: var(--ct-text);
}
.ct-tabs__tab:hover i { color: var(--ct-gold); transform: translateY(-2px); }
.ct-tabs__tab.is-active {
  color: var(--ct-gold);
}
.ct-tabs__tab.is-active i { color: var(--ct-gold); }
/* Indicator 滑动条 */
.ct-tabs__indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 25%;
  background: var(--ct-gold);
  box-shadow: 0 0 12px var(--ct-gold-glow-strong);
  transition: transform 0.4s var(--ct-ease-out);
  pointer-events: none;
}

/* Tab Panels */
.ct-tabs__panels {
  position: relative;
  min-height: 220px;
}
.ct-tabs__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.4s var(--ct-ease-out),
    transform 0.4s var(--ct-ease-out);
}
.ct-tabs__panel.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ct-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-surface);
  overflow: hidden;
}
.ct-compare-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-2);
  padding: var(--ct-space-5) var(--ct-space-6);
  border-right: 1px solid var(--ct-border);
  border-bottom: 1px solid var(--ct-border);
}
.ct-compare-grid > div:nth-child(2n) { border-right: none; }
.ct-compare-grid > div:nth-last-child(-n+2) { border-bottom: none; }
.ct-compare-grid dt {
  font-size: var(--ct-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ct-text-mute);
  font-weight: 600;
}
.ct-compare-grid dd {
  margin: 0;
  font-family: var(--ct-font-display);
  font-size: var(--ct-fs-h4);
  font-weight: 600;
  color: var(--ct-text);
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .ct-tabs__bar { grid-template-columns: repeat(2, 1fr); }
  .ct-tabs__indicator { width: 50%; }
  .ct-compare-grid { grid-template-columns: 1fr; }
  .ct-compare-grid > div { border-right: none; }
}

/* ==================== Stepper (水平 1→2→3→4 正方形卡片) ==================== */
.ct-svc-process {
  padding-top: var(--ct-section-py-sm);
  padding-bottom: var(--ct-space-10);
}
.ct-stepper {
  list-style: none;
  margin: var(--ct-space-8) auto 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ct-space-8);
  align-items: stretch;
}
/* 底线: 藏在卡片后 (z-index 0), 卡片不透明遮挡中间, 视觉上仅 gap 段可见 */
.ct-stepper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc((100% - 3 * var(--ct-space-8)) / 8);
  right: calc((100% - 3 * var(--ct-space-8)) / 8);
  height: 1px;
  background: rgba(232, 184, 114, 0.28);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
}
/* 流动光弹: 彗星拖尾, 也藏在卡片后, 经过 gap 时自然显形 */
.ct-stepper::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc((100% - 3 * var(--ct-space-8)) / 8);
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 160, 92, 0.10) 30%,
    rgba(201, 160, 92, 0.30) 65%,
    rgba(232, 184, 114, 0.55) 90%,
    rgba(232, 184, 114, 0.75) 100%);
  border-radius: 2px;
  transform: translate(-100%, -50%);
  filter:
    drop-shadow(0 0 4px rgba(201, 160, 92, 0.35))
    drop-shadow(0 0 10px rgba(201, 160, 92, 0.20));
  z-index: 0;
  pointer-events: none;
  animation: ct-stepper-flow 11s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ct-stepper-flow {
  0%   { left: calc((100% - 3 * var(--ct-space-8)) / 8); }
  100% { left: calc(100% - (100% - 3 * var(--ct-space-8)) / 8); }
}
/* 正方形卡片: 不透明底色 + 金色微渐变, 用于遮挡背后底线/流光 */
.ct-stepper__step {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(180deg, rgba(232, 184, 114, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%),
    var(--ct-bg);
  border: 1px solid rgba(232, 184, 114, 0.16);
  border-radius: 16px;
  padding: var(--ct-space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--ct-space-4);
  transition: all var(--ct-dur) var(--ct-ease-out);
}
.ct-stepper__step:hover {
  border-color: var(--ct-border-gold);
  background:
    linear-gradient(180deg, rgba(232, 184, 114, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%),
    var(--ct-bg);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(232, 184, 114, 0.20);
}
.ct-stepper__bullet {
  width: 56px;
  height: 56px;
  border-radius: var(--ct-radius-full);
  background: var(--ct-bg);
  border: 1px solid var(--ct-border-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ct-gold);
  font-family: var(--ct-font-ui);
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
  transition: all var(--ct-dur) var(--ct-ease-out);
}
.ct-stepper__step:hover .ct-stepper__bullet {
  background: var(--ct-gold);
  color: var(--ct-text-on-gold);
  border-color: var(--ct-gold);
  box-shadow: 0 0 24px var(--ct-gold-glow-strong);
}
.ct-stepper__body {
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-2);
}
.ct-stepper__title {
  font-family: var(--ct-font-display);
  font-size: var(--ct-fs-h4);
  font-weight: 600;
  color: var(--ct-text);
  margin: 0;
  line-height: 1.3;
}
.ct-stepper__desc {
  font-size: var(--ct-fs-sm);
  color: var(--ct-text-soft);
  line-height: 1.55;
  margin: 0;
}

/* 平板及以下: 单列竖向, 卡片去正方形改为水平条 */
@media (max-width: 991px) {
  .ct-stepper {
    grid-template-columns: 1fr;
    gap: var(--ct-space-4);
    max-width: 720px;
  }
  .ct-stepper::before,
  .ct-stepper::after {
    display: none;
  }
  .ct-stepper__step {
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: var(--ct-space-5);
    gap: var(--ct-space-5);
    justify-content: flex-start;
  }
  .ct-stepper__bullet {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
  .ct-stepper__body {
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  .ct-stepper__title {
    font-size: var(--ct-fs-h3);
  }
  .ct-stepper__desc {
    font-size: var(--ct-fs-body);
    max-width: 56ch;
  }
}

@media (max-width: 640px) {
  .ct-stepper__step {
    padding: var(--ct-space-4);
    gap: var(--ct-space-4);
  }
  .ct-stepper__bullet {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }
  .ct-stepper__title {
    font-size: var(--ct-fs-body-lg);
  }
  .ct-stepper__desc {
    font-size: var(--ct-fs-sm);
  }
}

/* ==================== Final CTA ==================== */
.ct-svc-cta {
  position: relative;
  overflow: hidden;
  background: var(--ct-bg-deep);
  text-align: center;
  padding: var(--ct-space-11) 0;
  isolation: isolate;
}

.ct-svc-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ct-space-5);
}
.ct-svc-cta__title { margin: 0; }
.ct-svc-cta__lead { text-align: center; margin: 0 auto; max-width: 640px; }

@media (max-width: 640px) {
  .ct-svc-cta { padding: var(--ct-space-9) 0; }
}

/* ==================== Skyline Band (复用首页星河带, 视差 + 景深 + 上下融合渐变) ==================== */
.ct-skyline-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ct-bg);
}
.ct-skyline-band > .ct-section {
  position: relative;
  z-index: 2;
  background: transparent;
}
.ct-skyline-band__bg {
  position: absolute;
  inset: -50% 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ct-skyline-band__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.ct-skyline-band__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--ct-bg)         0%,
    var(--ct-bg)         5%,
    rgba(11, 16, 32, 0.95) 10%,
    rgba(11, 16, 32, 0.7)  16%,
    rgba(11, 16, 32, 0.35) 22%,
    rgba(11, 16, 32, 0.12) 28%,
    transparent           34%,
    transparent           66%,
    rgba(11, 16, 32, 0.12) 72%,
    rgba(11, 16, 32, 0.35) 78%,
    rgba(11, 16, 32, 0.7)  84%,
    rgba(11, 16, 32, 0.95) 90%,
    var(--ct-bg)          95%,
    var(--ct-bg)         100%
  );
}
.ct-skyline-band__stars {
  position: absolute;
  inset: 0;
}
.ct-skyline-band__stars::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow: var(--ct-stars-shadow, none);
  animation: ct-band-stars-twinkle 5s ease-in-out infinite;
}
.ct-skyline-band__stars--mid::before {
  filter: drop-shadow(0 0 3px rgba(232, 184, 114, 0.6));
  animation: ct-band-stars-twinkle 4s ease-in-out infinite reverse;
}
@keyframes ct-band-stars-twinkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.ct-skyline-band__particles {
  position: absolute;
  inset: 0;
}
/* 静止发光星光点 — 不平移, 仅微弱呼吸 */
.ct-skyline-band__particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ct-gold-light);
  box-shadow: 0 0 10px var(--ct-gold-glow-strong),
              0 0 22px rgba(232, 184, 114, 0.35);
  opacity: 0.9;
  animation: ct-band-twinkle 4s ease-in-out infinite;
}
@keyframes ct-band-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
/* 流星: 头部 + 拖尾线, 上下方向运动 */
.ct-skyline-band__particle--fall {
  top: 0;
  bottom: auto;
  width: 2px;
  height: 2px;
  box-shadow: 0 0 8px var(--ct-gold-glow-strong);
  animation: ct-band-meteor-fall 8s linear infinite;
}
.ct-skyline-band__particle--fall::before {
  content: '';
  position: absolute;
  top: -72px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 72px;
  background: linear-gradient(to top, rgba(232, 184, 114, 0.8), transparent);
  pointer-events: none;
}
@keyframes ct-band-meteor-fall {
  0%   { transform: translateY(-100px); opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateY(200vh); opacity: 0; }
}

.ct-skyline-band__particle--rise {
  top: auto;
  bottom: 0;
  width: 2px;
  height: 2px;
  box-shadow: 0 0 8px var(--ct-gold-glow-strong);
  animation: ct-band-meteor-rise 9s linear infinite;
}
.ct-skyline-band__particle--rise::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 72px;
  background: linear-gradient(to bottom, rgba(232, 184, 114, 0.8), transparent);
  pointer-events: none;
}
@keyframes ct-band-meteor-rise {
  0%   { transform: translateY(100px); opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateY(-200vh); opacity: 0; }
}