/* ============================================================
   V8 Full-page Liquid Glass · 可回滚试验层
   删除 index.html 中本文件的 link 即恢复 V7。
   ============================================================ */

:root {
  --v8-page-a: rgba(58, 179, 255, .44);
  --v8-page-b: rgba(114, 99, 255, .25);
  --v8-page-c: rgba(255, 148, 85, .28);
  --v8-scene-wash: rgba(230, 242, 255, .03);
  --v8-vessel: color-mix(in srgb, var(--card) 16%, transparent);
  --v8-vessel-edge: rgba(255, 255, 255, .72);
  --v8-vessel-spec: rgba(255, 255, 255, .94);
  --v8-vessel-mid: rgba(255, 255, 255, .31);
  --v8-vessel-shade: rgba(15, 35, 58, .13);
  --v8-vessel-drop: rgba(13, 35, 61, .24);
  --v8-solid: color-mix(in srgb, var(--card) 62%, transparent);
}

:root[data-theme="graphite"],
:root[data-theme="midnight"],
:root[data-theme="terra"] {
  --v8-page-a: rgba(60, 145, 235, .42);
  --v8-page-b: rgba(24, 47, 91, .30);
  --v8-page-c: rgba(151, 62, 132, .28);
  --v8-scene-wash: rgba(4, 10, 24, .24);
  --v8-vessel: color-mix(in srgb, var(--card) 18%, transparent);
  --v8-vessel-edge: rgba(255, 255, 255, .31);
  --v8-vessel-spec: rgba(255, 255, 255, .56);
  --v8-vessel-mid: rgba(255, 255, 255, .14);
  --v8-vessel-shade: rgba(0, 0, 0, .32);
  --v8-vessel-drop: rgba(0, 0, 0, .54);
  --v8-solid: color-mix(in srgb, var(--card) 66%, transparent);
}

html {
  background: var(--bg);
}

body {
  background:
    radial-gradient(circle at 9% 11%, var(--v8-page-a), transparent 28%),
    radial-gradient(circle at 89% 26%, var(--v8-page-c), transparent 27%),
    radial-gradient(circle at 18% 78%, rgba(54, 225, 190, .30), transparent 26%),
    radial-gradient(circle at 82% 82%, var(--v8-page-b), transparent 28%),
    linear-gradient(var(--v8-scene-wash), var(--v8-scene-wash)),
    url("../images/more-water-20260715/01-hero-shallow-water.png") center top / cover fixed;
  background-blend-mode: screen, soft-light, screen, soft-light, normal, normal;
}

body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -14vh -10vw;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 18% 26%, transparent 0 30px, color-mix(in srgb, var(--accent) 28%, transparent) 31px 33px, rgba(255, 255, 255, .20) 34px 35px, transparent 36px 64px),
    repeating-radial-gradient(ellipse at 82% 68%, transparent 0 45px, rgba(255, 255, 255, .22) 46px 48px, color-mix(in srgb, var(--accent) 16%, transparent) 49px 50px, transparent 51px 80px);
  mask-image: linear-gradient(110deg, transparent 2%, #000 22%, #000 78%, transparent 98%);
  -webkit-mask-image: linear-gradient(110deg, transparent 2%, #000 22%, #000 78%, transparent 98%);
}

.promo-page {
  position: relative;
  z-index: 1;
  padding: clamp(10px, 1.5vw, 28px);
}

.promo-page > section:not([hidden]) {
  --muted: color-mix(in srgb, var(--ink) 66%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 1880px);
  margin: 0 auto clamp(14px, 1.5vw, 28px);
  border: 1px solid var(--v8-vessel-edge);
  border-radius: clamp(26px, 3vw, 54px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .015) 42%, rgba(255, 255, 255, .055)),
    var(--v8-vessel);
  box-shadow:
    inset 0 1px 1px var(--v8-vessel-spec),
    inset 0 4px 9px var(--v8-vessel-mid),
    inset 0 -22px 48px var(--v8-vessel-shade),
    18px 24px 82px var(--v8-vessel-drop),
    -12px -14px 36px rgba(255, 255, 255, .18);
  backdrop-filter: blur(5px) saturate(205%) brightness(1.07);
  -webkit-backdrop-filter: blur(5px) saturate(205%) brightness(1.07);
}

.promo-page > section:not([hidden])::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(1.5px) saturate(195%) brightness(1.08);
  -webkit-backdrop-filter: blur(1.5px) saturate(195%) brightness(1.08);
}

.promo-page > section:not([hidden])::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 76% -12%, rgba(255, 255, 255, .24), transparent 36%),
    linear-gradient(108deg, transparent 54%, rgba(255, 255, 255, .075) 62%, transparent 70%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .98),
    inset 0 3px 7px rgba(255, 255, 255, .34),
    inset 0 -3px 9px rgba(255, 255, 255, .12),
    inset 0 -28px 54px rgba(0, 0, 0, .13);
}

/* Hero、视频和案例图需要保留干净的媒体阅读面。 */
.hero__kv,
.audience__visual,
.workflow-experience__system,
.ui-frame,
.mp-card,
.model-studio__feature,
.model-studio__loop,
.portrait-sample,
.portrait-result,
.pc-compare,
.video-generation__showcase,
.prompt-video,
.site-demo,
.day-card,
.deliver-card,
.signup__grid {
  background: var(--v8-solid);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--v8-vessel-edge) 62%, transparent),
    0 22px 60px color-mix(in srgb, var(--ink) 10%, transparent);
  backdrop-filter: blur(8px) saturate(155%);
  -webkit-backdrop-filter: blur(8px) saturate(155%);
}

.hero,
.value,
.audience,
.mentor,
.workflow-band,
.workflow-experience,
.cases,
.visual-sys,
.model-photo,
.product-case,
.distill,
.category-flow,
.video-generation,
.site-building,
.timetable,
.delivery,
.past,
.video-carousel,
.signup,
.logo-roller {
  background-color: transparent;
  color: var(--ink);
}

.hero__metrics > div,
.value-card,
.workflow-experience__signal,
.signup__status,
.logo-roller__item,
.build-note {
  background: color-mix(in srgb, var(--card) 56%, transparent);
  border-color: color-mix(in srgb, var(--v8-vessel-edge) 66%, transparent);
}

/* Uiverse dangerous-dolphin：渐变描边、局部亮点与小型标签组。
   orange-earwig：只借一明一暗的双向体积阴影，不采用实体新拟态底。 */
.hero__edition span,
.workflow-experience__eyebrow,
.case-kicker,
.video-generation__head .en-caps,
.site-building__eyebrow,
.site-building__kicker,
.model-photo__head .en-caps,
.model-studio__head .en-caps,
.portrait-lab__head .en-caps,
.product-case__head .en-caps,
.video-carousel__head .en-caps {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(15, 20, 29, .76), rgba(15, 20, 29, .76)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .13) 36%, color-mix(in srgb, var(--accent) 70%, transparent)) border-box;
  color: rgba(255, 255, 255, .94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -7px 12px rgba(0, 0, 0, .16),
    8px 9px 22px rgba(0, 0, 0, .13),
    -6px -6px 18px rgba(255, 255, 255, .13);
  backdrop-filter: blur(4px) saturate(185%);
  -webkit-backdrop-filter: blur(4px) saturate(185%);
}

.hero__edition span::after,
.workflow-experience__eyebrow::after,
.case-kicker::after,
.video-generation__head .en-caps::after,
.site-building__eyebrow::after,
.site-building__kicker::after,
.model-photo__head .en-caps::after,
.model-studio__head .en-caps::after,
.portrait-lab__head .en-caps::after,
.product-case__head .en-caps::after,
.video-carousel__head .en-caps::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 8px;
  width: 22px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .94), rgba(255, 255, 255, .16) 48%, transparent 74%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .promo-page {
    padding: 8px;
  }

  .promo-page > section:not([hidden]) {
    margin-bottom: 10px;
    border-radius: 28px;
    backdrop-filter: blur(5px) saturate(185%);
    -webkit-backdrop-filter: blur(5px) saturate(185%);
  }

  .hero__edition span,
  .workflow-experience__eyebrow,
  .case-kicker,
  .video-generation__head .en-caps,
  .site-building__eyebrow,
  .site-building__kicker,
  .model-photo__head .en-caps,
  .model-studio__head .en-caps,
  .portrait-lab__head .en-caps,
  .product-case__head .en-caps,
  .video-carousel__head .en-caps {
    min-height: 26px;
    padding: 5px 10px;
  }

  .promo-page > section:not([hidden])::before {
    filter: none !important;
    backdrop-filter: blur(2px) saturate(150%);
    -webkit-backdrop-filter: blur(2px) saturate(150%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body::after {
    display: none;
  }

  .promo-page > section:not([hidden]),
  .hero__kv,
  .audience__visual,
  .workflow-experience__system,
  .ui-frame,
  .mp-card,
  .model-studio__feature,
  .model-studio__loop,
  .portrait-sample,
  .portrait-result,
  .pc-compare,
  .video-generation__showcase,
  .prompt-video,
  .site-demo,
  .day-card,
  .deliver-card,
  .signup__grid {
    background: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .promo-page > section:not([hidden])::before {
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .promo-page > section:not([hidden]) {
    border: 2px solid color-mix(in srgb, var(--ink) 65%, transparent);
    background: color-mix(in srgb, var(--card) 94%, transparent);
  }
}