/* One continuous backdrop keeps the case-study chapters from reading as slides. */
body[data-project-page="wufu"] {
  background:
    radial-gradient(ellipse 80vw 75vh at 88% 38%, rgba(18, 35, 92, .16), transparent 76%),
    radial-gradient(ellipse 72vw 72vh at 8% 78%, rgba(95, 20, 65, .09), transparent 78%),
    #050507;
  background-attachment: fixed;
}

body[data-project-page="wufu"] .project-hero {
  background:
    radial-gradient(ellipse 62% 56% at 76% 34%, rgba(85, 45, 173, .25), transparent 100%),
    radial-gradient(ellipse 48% 42% at 15% 55%, rgba(188, 39, 74, .12), transparent 100%);
}

body[data-project-page="wufu"] .wufu-case-section {
  background: transparent;
  border-top: 0;
}

/* Matched glows on both sides of each chapter boundary keep the canvas continuous. */
body[data-project-page="wufu"] .wf-overview {
  background: radial-gradient(ellipse 680px 520px at 82% 100%, rgba(112, 47, 137, .18), transparent 100%);
}
body[data-project-page="wufu"] .wf-scene-timeline {
  background:
    radial-gradient(ellipse 680px 520px at 82% 0%, rgba(112, 47, 137, .18), transparent 100%),
    radial-gradient(ellipse 720px 540px at 12% 100%, rgba(39, 69, 153, .19), transparent 100%);
}
body[data-project-page="wufu"] .wf-breakdown {
  background:
    radial-gradient(ellipse 720px 540px at 12% 0%, rgba(39, 69, 153, .19), transparent 100%),
    radial-gradient(ellipse 680px 520px at 88% 100%, rgba(133, 49, 105, .15), transparent 100%);
}
body[data-project-page="wufu"] .wf-journey {
  background:
    radial-gradient(ellipse 680px 520px at 88% 0%, rgba(133, 49, 105, .15), transparent 100%),
    radial-gradient(ellipse 700px 520px at 15% 100%, rgba(126, 77, 34, .14), transparent 100%);
}
body[data-project-page="wufu"] .wf-components {
  background:
    radial-gradient(ellipse 700px 520px at 15% 0%, rgba(126, 77, 34, .14), transparent 100%),
    radial-gradient(ellipse 760px 620px at 83% 55%, rgba(85, 55, 151, .11), transparent 100%);
}

body[data-project-page="gold-bean"] {
  background:
    radial-gradient(ellipse 78vw 76vh at 82% 40%, rgba(103, 70, 18, .13), transparent 78%),
    radial-gradient(ellipse 72vw 72vh at 10% 82%, rgba(21, 61, 101, .12), transparent 78%),
    #050505;
  background-attachment: fixed;
}

body[data-project-page="gold-bean"] .project-hero {
  background:
    radial-gradient(ellipse 64% 58% at 78% 42%, rgba(103, 70, 18, .2), transparent 100%),
    radial-gradient(ellipse 46% 42% at 8% 56%, rgba(21, 61, 101, .18), transparent 100%);
}

body[data-project-page="gold-bean"] :is(.gold-modes, .gold-strategy, .gold-flow, .gold-visuals) {
  background: transparent;
}

body[data-project-page="gold-bean"] .gold-modes {
  background: radial-gradient(ellipse 700px 520px at 82% 100%, rgba(151, 102, 31, .17), transparent 100%);
}
body[data-project-page="gold-bean"] .gold-strategy {
  background:
    radial-gradient(ellipse 700px 520px at 82% 0%, rgba(151, 102, 31, .17), transparent 100%),
    radial-gradient(ellipse 700px 520px at 12% 100%, rgba(33, 82, 130, .16), transparent 100%);
}
body[data-project-page="gold-bean"] .gold-flow {
  background:
    radial-gradient(ellipse 700px 520px at 12% 0%, rgba(33, 82, 130, .16), transparent 100%),
    radial-gradient(ellipse 740px 540px at 85% 100%, rgba(122, 81, 30, .15), transparent 100%);
}
body[data-project-page="gold-bean"] .gold-visuals {
  background:
    radial-gradient(ellipse 740px 540px at 85% 0%, rgba(122, 81, 30, .15), transparent 100%),
    radial-gradient(ellipse 800px 640px at 14% 58%, rgba(55, 71, 133, .1), transparent 100%);
}

body[data-project-page="xhs-spring"] :is(.xhs-strategy, .xhs-visuals) {
  background: transparent;
}

body[data-project-page="xhs-spring"] .xhs-challenge {
  background: radial-gradient(ellipse 700px 520px at 85% 100%, rgba(30, 98, 173, .19), transparent 100%);
}
body[data-project-page="xhs-spring"] .xhs-overview {
  background:
    radial-gradient(ellipse 700px 520px at 85% 0%, rgba(30, 98, 173, .19), transparent 100%),
    radial-gradient(ellipse 700px 520px at 13% 100%, rgba(85, 54, 154, .17), transparent 100%);
}
body[data-project-page="xhs-spring"] .xhs-visuals {
  background:
    radial-gradient(ellipse 700px 520px at 13% 0%, rgba(85, 54, 154, .17), transparent 100%),
    radial-gradient(ellipse 720px 540px at 85% 100%, rgba(25, 69, 150, .17), transparent 100%);
}
body[data-project-page="xhs-spring"] .xhs-strategy {
  background:
    radial-gradient(ellipse 720px 540px at 85% 0%, rgba(25, 69, 150, .17), transparent 100%),
    radial-gradient(ellipse 700px 520px at 15% 100%, rgba(45, 112, 166, .14), transparent 100%);
}

body[data-project-page="xhs-spring"] .xhs-delivery {
  background:
    radial-gradient(ellipse 700px 520px at 15% 0%, rgba(45, 112, 166, .14), transparent 100%),
    radial-gradient(ellipse 85% 42% at 50% 54%, rgba(18, 36, 97, .47), transparent 100%);
}

body[data-project-page] .project-section,
body[data-project-page] .project-footer {
  border-top: 0;
}