/* 首页从简介至页脚共用一张固定视口画布。 */
.intro-section.intro-fluid {
  --ink: #f5edf1;
  --muted: #d6c9d2;
  position: relative;
  color: var(--ink);
  background: #100c14;
}

body.home-fluid { background: #100c14; }
body.profile-fluid {
  --ink: #f5edf1; --muted: #d6c9d2; --paper: #100c14;
  --line: rgb(245 237 241 / .35); --soft-line: rgb(245 237 241 / .18);
  color: var(--ink);
}
.profile-fluid .inner-main { position: relative; z-index: 2; background: transparent; }
.profile-fluid :is(.about-content, .about-page-hero) { background: transparent; }
.profile-fluid .home-fluid-layer { clip-path: inset(0); }
.profile-fluid .page-hero-bottom { border-color: var(--line); }
.profile-fluid .skip-link { color: #100c14; }
.profile-fluid .text-link { border-color: currentColor; }
.profile-fluid .text-link:hover { color: #e9b9da; }
.profile-fluid a:focus-visible { outline-color: currentColor; }
.has-scroll-motion.profile-fluid .motion-ink > .editable-text { background: none; color: inherit; -webkit-text-fill-color: currentColor; }
.home-fluid .hero { isolation: isolate; z-index: 0; }
.home-fluid-layer {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(100vh 0 0 0);
  background:
    radial-gradient(ellipse at 10% 12%, #8a366b80 0%, transparent 55%),
    radial-gradient(ellipse at 88% 80%, #79315f75 0%, transparent 58%),
    linear-gradient(135deg, #1f101d, #0b0a10 64%, #271121);
}
.intro-fluid-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
}
.home-fluid-layer[data-fluid-state="ready"] > .intro-fluid-canvas { opacity: 1; }
.home-fluid-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(9 7 14 / .56), rgb(9 7 14 / .60) 38%, rgb(9 7 14 / .54) 78%, rgb(9 7 14 / .48));
}

body.home-fluid :is(.intro-section, .works-section, .outro-section, .site-footer) {
  --ink: #f5edf1;
  --muted: #d6c9d2;
  --line: rgb(245 237 241 / .35);
  --soft-line: rgb(245 237 241 / .18);
  position: relative;
  z-index: 2;
  color: var(--ink);
  background: transparent;
}
.home-fluid .intro-section {
  /* A transparent section must not cast an outer shadow onto the shared field. */
  box-shadow: none;
  min-height: var(--hero-viewport-height, 100svh);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + clamp(24px, 4svh, 48px));
  padding-bottom: clamp(24px, 4svh, 48px);
}
.home-fluid #selected-work { min-height: var(--hero-viewport-height, 100svh); }
.home-fluid .intro-content > .intro-lead { margin-top: 40px; }
.home-fluid .intro-content > .muted-copy { margin-top: 20px; }
.home-fluid .intro-content > .text-link { margin-top: 32px; }
.home-fluid .site-header.over-fluid {
  color: #f5edf1;
  background: rgb(16 12 20 / .82);
  border-color: rgb(245 237 241 / .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.home-fluid :is(.intro-section, .works-section, .outro-section) .text-link { border-color: currentColor; }
.home-fluid :is(.intro-section, .works-section, .outro-section) .text-link:hover { color: #e9b9da; }
.home-fluid :is(.intro-section, .works-section, .outro-section, .site-footer) a:focus-visible { outline-color: currentColor; }
.home-fluid .work-cursor-preview { --ink: #f5edf1; color: var(--ink); }
.home-fluid .preview-placeholder { --ink: #20221f; color: var(--ink); }
.is-editing .intro-fluid .custom-optional-image:not(.has-image)::after { color: #d7c9d9; }

/* 浅色正文继续沿用原有上浮显现，避免旧渐变把字填成暗色。 */
.has-scroll-motion.home-fluid :is(.intro-section, .works-section, .outro-section) .motion-ink > .editable-text {
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

@media (min-width: 761px) and (max-height: 800px) {
  .home-fluid .intro-section { padding-top: calc(var(--header-height) + 16px); padding-bottom: 16px; }
  .home-fluid .intro-content > .intro-lead { margin-top: 20px; }
  .home-fluid .intro-content > .muted-copy { margin-top: 16px; }
  .home-fluid .intro-content > .text-link { margin-top: 20px; }
}
@media (max-width: 760px) {
  .home-fluid .intro-grid { gap: 24px; }
  .home-fluid .intro-content > .intro-lead { margin-top: 28px; }
  .home-fluid .intro-content > .muted-copy { margin-top: 16px; }
  .home-fluid .intro-content > .text-link { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-fluid-canvas { transition: none; }
}