/* 客户案例 page. Modules are stacked sections inside .cases-page; each keeps
   its rules under its own block name so later modules stay independent. */
html { scroll-behavior: smooth; }
.cases-page { background: #030305; }

/* Module 1 · 让企业AI落地真实可见
   Reference layout: full-bleed 16:9 media, centred title group at 14.5% of
   the banner height, and a scroll cue near the bottom (tablet/desktop only). */
.cases-hero {
  position: relative;
  height: clamp(640px, 56.25vw, 1080px);
  overflow: hidden;
  isolation: isolate;
  background: #030305;
}

.cases-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Final media slots: desktop video and phone still, both cropped to fill. */
.cases-hero__video,
.cases-hero__mobile-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.cases-hero__mobile-image { display: none; }

/* Keeps the title readable over any artwork and blends into the next section. */
.cases-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #030305b3 0%, #03030540 22%, #03030500 40%, #03030500 82%, #030305 100%);
}

/* Placeholder composition. Remove .cases-hero__placeholder once media arrives. */
.cases-hero__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, #835bff2e, #835bff00 70%),
    radial-gradient(45% 35% at 50% 84%, #ff507f1c, #ff507f00 70%),
    linear-gradient(180deg, #0b0913 0%, #090719 55%, #030305 100%);
}
.cases-stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
}
.cases-stage__arch {
  position: absolute;
  top: -62%;
  left: -12%;
  right: -12%;
  height: 96%;
  border: 1px solid #d5c1ff1f;
  border-bottom-color: #d5c1ff5c;
  border-radius: 50%;
  box-shadow: 0 34px 90px -30px #835bff66, inset 0 -40px 70px -40px #835bff4d;
}
.cases-stage__floor {
  position: absolute;
  top: 74%;
  left: -10%;
  right: -10%;
  height: 60%;
  border-top: 1px solid #d5c1ff1f;
  border-radius: 50%;
  background: radial-gradient(closest-side, #835bff26, #835bff00);
}
.cases-stage__cards {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}
.cases-stage__card {
  --x: 50%;
  --turn: 0deg;
  --lift: 0%;
  position: absolute;
  top: 48%;
  left: var(--x);
  width: 13.5%;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding-top: 2.4vw;
  border: 1px dashed #d5c1ff59;
  border-radius: 14px;
  background: linear-gradient(160deg, #2a1d4acc, #120f22eb 60%, #0b0913f2);
  box-shadow: inset 0 1px 0 #ffffff12, 0 24px 60px -24px #000, 0 0 44px -12px #835bff4d;
  color: #d5c1ff;
  text-align: center;
  transform: translate(-50%, var(--lift)) rotateY(var(--turn));
  animation: cases-card-float 7s ease-in-out infinite;
  animation-delay: calc(var(--card) * -1.4s);
}
.cases-stage__card:nth-child(1) { --x: 11%; --turn: 18deg; --lift: -5%; }
.cases-stage__card:nth-child(2) { --x: 30.5%; --turn: 8deg; --lift: -1.5%; }
.cases-stage__card:nth-child(4) { --x: 69.5%; --turn: -8deg; --lift: -1.5%; }
.cases-stage__card:nth-child(5) { --x: 89%; --turn: -18deg; --lift: -5%; }
.cases-stage__card-label {
  font-size: clamp(12px, 1.1vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.cases-stage__card-note {
  color: #a09caa;
  font-size: clamp(11px, .85vw, 14px);
  line-height: 1.3;
}
.cases-stage__pedestal {
  position: absolute;
  top: 77%;
  left: 50%;
  width: 30%;
  aspect-ratio: 5 / 1;
  translate: -50% -50%;
}
.cases-stage__pedestal span {
  position: absolute;
  inset: 0;
  border: 1px solid #d5c1ff40;
  border-radius: 50%;
}
.cases-stage__pedestal span:nth-child(1) {
  background: radial-gradient(closest-side, #835bff59, #835bff14 70%, #835bff00);
  box-shadow: 0 0 70px #835bff40;
}
.cases-stage__pedestal span:nth-child(2) {
  inset: 18% 20%;
  border-color: #ff806c66;
  box-shadow: inset 0 0 30px #ff507f40;
  animation: cases-ring 5s ease-in-out infinite;
}
.cases-stage__pedestal span:nth-child(3) {
  inset: 36%;
  border: 0;
  background: linear-gradient(90deg, #ff507f66, #ffbd7066);
  filter: blur(6px);
}
/* The supplied mark includes an asymmetric glow; centre the solid emblem. */
.cases-stage__brand {
  position: absolute;
  top: 72%;
  left: 50%;
  width: 12%;
  max-width: none;
  height: auto;
  translate: -45% -62%;
  filter: drop-shadow(0 18px 40px #000c);
  animation: cases-brand-float 6s ease-in-out infinite;
}
.cases-stage__orb {
  position: absolute;
  width: 2.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f5f3fa, #a58bff 38%, #4a2f9a 75%, #1b1233);
  box-shadow: 0 0 30px #835bff80;
  animation: cases-brand-float 5s ease-in-out infinite;
}
.cases-stage__orb--left { top: 74%; left: 6%; }
.cases-stage__orb--right { top: 66%; left: 83%; width: 1.6%; animation-delay: -2.5s; }
.cases-hero__placeholder-tag {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 4px 12px;
  border: 1px dashed #d5c1ff4d;
  border-radius: 999px;
  background: #0b0913cc;
  color: #b2aebc;
  font-size: 12px;
  line-height: 1.5;
}

.cases-hero__content {
  position: absolute;
  z-index: 2;
  top: max(14.5%, 150px);
  left: 0;
  right: 0;
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cases-hero__title {
  margin: 0 0 14px;
  color: #f5f3fa;
  font-family: "Inter Tight", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.cases-hero__title-accent {
  background-image: linear-gradient(100deg, #ff507f 3%, #ff806c 52%, #ffbd70 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cases-hero__intro {
  margin: 0 0 24px;
  color: #b2aebc;
  font-size: 16px;
  line-height: 22px;
}

/* Reference hover: a soft light follows the pointer inside the button. */
.cases-hero__button .primary-button-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s ease;
}
.cases-hero__button:active .primary-button-wrap { transform: scale(.97); }
.cases-hero__glow {
  position: absolute;
  top: var(--glow-y, 50%);
  left: var(--glow-x, 50%);
  z-index: -1;
  width: 84px;
  height: 84px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ff806c 0%, #835bff 55%, #835bff00 72%);
  filter: blur(16px);
  opacity: var(--glow-opacity, 0);
  pointer-events: none;
  transition: opacity .3s ease;
}

.cases-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 88px;
  width: max-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #a09caa;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: color .3s ease;
}
.cases-hero__scroll:hover { color: #f5f3fa; }
.cases-hero__mouse {
  position: relative;
  box-sizing: border-box;
  width: 24px;
  height: 36px;
  border: 2px solid #d5c1ff;
  border-radius: 12px;
}
.cases-hero__mouse::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(#ff806c, #ffbd70);
  animation: cases-scroll-cue 2s linear infinite;
}

/* Reserved anchor area for the next approved module. */
.cases-slot {
  display: flex;
  justify-content: center;
  padding: 96px 20px 120px;
}
.cases-slot__label {
  margin: 0;
  padding: 18px 28px;
  border: 1px dashed #d5c1ff40;
  border-radius: 16px;
  color: #a09caa;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

/* Entrance: media settles first, then title, intro, button and cue in turn.
   Later modules fade up as they scroll into view. */
html.w-mod-js .cases-hero__media {
  opacity: 0;
  scale: 1.06;
  transition: opacity 1.2s ease, scale 1.6s cubic-bezier(.2, .7, .2, 1);
}
html.w-mod-js .cases-hero__content > *,
html.w-mod-js .cases-hero__scroll {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1), color .3s ease;
}
html.w-mod-js .cases-hero__intro { transition-delay: .15s; }
html.w-mod-js .cases-hero__button { transition-delay: .3s; }
html.w-mod-js .cases-hero__scroll { transition-delay: .7s, .7s, 0s; }
html.w-mod-js .cases-hero.is-revealed .cases-hero__media { opacity: 1; scale: 1; }
html.w-mod-js .cases-hero.is-revealed .cases-hero__content > *,
html.w-mod-js .cases-hero.is-revealed .cases-hero__scroll { opacity: 1; translate: 0 0; }
html.w-mod-js [data-cases-reveal]:not(.cases-hero) {
  opacity: 0;
  translate: 0 32px;
  transition: opacity .8s ease, translate .9s cubic-bezier(.2, .7, .2, 1);
}
html.w-mod-js [data-cases-reveal].is-revealed:not(.cases-hero) { opacity: 1; translate: 0 0; }

@keyframes cases-card-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@keyframes cases-brand-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes cases-ring {
  0%, 100% { opacity: .55; scale: 1; }
  50% { opacity: 1; scale: 1.04; }
}
@keyframes cases-scroll-cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(150%); }
}

/* Tablet and small desktop: the reference's 44px title and 15px-high cue. */
@media (max-width: 1259px) {
  .cases-hero__content { top: 140px; }
  .cases-hero__title { font-size: 44px; margin-bottom: 12px; }
  .cases-stage__card { top: 53%; width: 13.5%; }
  .cases-stage__brand { top: 78%; width: 12%; }
  .cases-hero__scroll { bottom: 35px; gap: 10px; font-size: 14px; }
  .cases-hero__mouse { width: 22px; height: 32px; }
}

/* Phones: the reference swaps the video for a 740 × 816 still and drops the cue. */
@media (max-width: 767px) {
  /* Fixed width: with auto width, the min-height would widen the banner. */
  .cases-hero {
    width: 100%;
    height: auto;
    min-height: 440px;
    aspect-ratio: 740 / 816;
  }
  .cases-hero__video { display: none; }
  .cases-hero__mobile-image { display: block; }
  .cases-hero__content { top: 108px; width: calc(100% - 40px); }
  .cases-hero__title { margin-bottom: 8px; font-size: 26px; line-height: 1.35; }
  .cases-hero__intro { margin-bottom: 20px; font-size: 14px; }
  .cases-hero__scroll { display: none; }
  .cases-stage__arch { top: -72%; }
  .cases-stage__floor { top: 80%; }
  .cases-stage__card { top: 64%; width: 17%; gap: 2px; border-radius: 8px; }
  .cases-stage__card:nth-child(1) { --x: 9%; }
  .cases-stage__card:nth-child(2) { --x: 29.5%; }
  .cases-stage__card:nth-child(4) { --x: 70.5%; }
  .cases-stage__card:nth-child(5) { --x: 91%; }
  .cases-stage__card-label { font-size: 10px; }
  .cases-stage__card-note { display: none; }
  .cases-stage__pedestal { top: 93%; width: 62%; }
  .cases-stage__brand { top: 87%; width: 17%; }
  .cases-stage__orb--left { top: 86%; left: 5%; width: 4%; }
  .cases-stage__orb--right { top: 60%; width: 3%; }
  .cases-hero__placeholder-tag { right: auto; left: 8px; bottom: 8px; padding: 2px 8px; font-size: 10px; }
  .cases-slot { padding: 56px 20px 72px; }
  .cases-slot__label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html.w-mod-js .cases-hero__media,
  html.w-mod-js .cases-hero__content > *,
  html.w-mod-js .cases-hero__scroll,
  html.w-mod-js [data-cases-reveal]:not(.cases-hero) {
    opacity: 1;
    scale: none;
    translate: none;
    transition: none;
  }
  .cases-stage__card,
  .cases-stage__brand,
  .cases-stage__orb,
  .cases-stage__pedestal span,
  .cases-hero__mouse::after { animation: none; }
  .cases-hero__button .primary-button-wrap { transition: none; }
}