/* Figma case-study content. All rules are scoped below the preserved hero. */
.wufu-case-chapter { scroll-margin-top: 100px; }
[data-wufu-svg-fit] { position: relative; display: block; }
[data-wufu-svg-fit] > img { position: absolute; left: 0; top: 0; width: auto; height: auto; max-width: none; transform-origin: top left; }
.wufu-case-section {
  position: relative;
  padding: clamp(72px, 7vw, 120px) 0 clamp(64px, 6vw, 100px);
  color: #fffcf6;
  background: radial-gradient(ellipse at 82% 15%, rgba(12, 29, 85, .35), transparent 48%),
              radial-gradient(ellipse at 10% 90%, rgba(2, 22, 68, .32), transparent 50%),
              #000;
  border-top: 1px solid rgba(133, 152, 255, .1);
  scroll-margin-top: 100px;
  isolation: isolate;
}
.wufu-case-inner { width: min(1440px, calc(100% - 64px)); margin-inline: auto; }
html.has-project-js body[data-project-page="wufu"] [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .95s ease, transform 1.05s cubic-bezier(.22,.8,.2,1); transition-delay: var(--wufu-reveal-delay, 0s); }
html.has-project-js body[data-project-page="wufu"] [data-reveal].is-visible { opacity: 1; transform: none; }
.wufu-hero__story, .wf-scene-timeline__switch { --wufu-reveal-delay: .12s; }
.wufu-hero .project-tags, .wf-scene-timeline__scroll { --wufu-reveal-delay: .2s; }
.wf-components__columns article:nth-child(2) { --wufu-reveal-delay: .12s; }
.wf-components__columns article:nth-child(3) { --wufu-reveal-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html.has-project-js body[data-project-page="wufu"] [data-reveal] { opacity: 1; transform: none; transition: none; }
}
.wufu-case-heading { display: flex; flex-direction: column; align-items: center; margin: 0 0 clamp(48px, 5vw, 76px); text-align: center; }
.wufu-case-heading__lockup { display: inline-flex; max-width: 100%; flex-direction: column; }
.wufu-case-heading h2 { margin: 0; color: #f4f7f2; font-family: 'Xiangxiang Display', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-weight: 400; font-size: clamp(42px, 5.2vw, 84px); line-height: 1.08; letter-spacing: -.045em; }
.wufu-case-heading__english { display: flex; justify-content: space-between; width: 100%; margin-top: 14px; color: rgba(244,247,242,.76); font-size: clamp(15px, 1.25vw, 22px); font-weight: 300; line-height: 1.4; letter-spacing: 0; white-space: nowrap; }
.wufu-case-heading__english > span { flex: 0 0 auto; }
.wufu-case-heading > p { max-width: 720px; margin: 34px auto 0; color: rgba(244,247,242,.62); font-size: 22px; font-weight: 300; line-height: 1.75; text-wrap: balance; }
.wufu-case-heading__keep-together { white-space: nowrap; }
.wufu-case-section figure { margin: 0; }
.wufu-case-section img { display: block; }
.wufu-case-section [tabindex='0']:focus-visible { outline: 2px solid #aa82ff; outline-offset: 6px; }

.wf-overview__board { position: relative; width: 100%; aspect-ratio: 1832 / 845; container-type: inline-size; overflow: visible; }
.wf-overview__phone { position: absolute; z-index: 2; left: 37.5546%; top: 0; width: 21.8886%; aspect-ratio: 1339 / 2716; }
.wf-overview__display { position: absolute; z-index: 0; left: 5.5636%; top: 2.9507%; width: 88.7943%; height: 94.7896%; overflow: hidden; border-radius: 6.65% / 3.073%; background: #a50804; }
.wf-overview__screen { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.wf-overview__screen::-webkit-scrollbar { display: none; }
.wf-overview__page { position: relative; width: 100%; height: auto; max-width: none; user-select: none; }
.wf-overview__frame { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.wf-overview__role {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: 50;
  --cone-spread: 25;
  --glow-padding: 40px;
  --fill-opacity: .5;
  --card-bg: #120f17;
  --card-tint: linear-gradient(90deg, rgba(195,12,74,.7), rgba(37,0,100,0));
  --gradient-one: radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #f472b6 0px, transparent 50%);
  --gradient-base: linear-gradient(#c084fc 0 100%);
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 23.1441%;
  height: 12.3077%;
  padding: 0 1.4%;
  overflow: visible;
  isolation: isolate;
  transform: translate3d(0, 0, .01px);
  border: 1px solid #f28bc8;
  border-radius: 999px;
  background: var(--card-tint), var(--card-bg);
  box-shadow: inset 4px -1px 18px -3px rgba(255,230,240,.64),
              rgba(0, 0, 0, .1) 0 1px 2px, rgba(0, 0, 0, .1) 0 2px 4px,
              rgba(0, 0, 0, .1) 0 4px 8px, rgba(0, 0, 0, .1) 0 8px 16px,
              rgba(0, 0, 0, .1) 0 16px 32px, rgba(0, 0, 0, .1) 0 32px 64px;
}
.wf-overview__role::before,
.wf-overview__role::after,
.wf-overview__role > .wf-overview__edge-light {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .25s ease-out;
}
.wf-overview__role:not(:hover):not(.is-touch-active)::before,
.wf-overview__role:not(:hover):not(.is-touch-active)::after,
.wf-overview__role:not(:hover):not(.is-touch-active) > .wf-overview__edge-light {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}
@media (hover: none) {
  .wf-overview__role:not(.is-touch-active)::before,
  .wf-overview__role:not(.is-touch-active)::after,
  .wf-overview__role:not(.is-touch-active) > .wf-overview__edge-light { opacity: 0; }
}
.wf-overview__role::before {
  border: 1px solid transparent;
  background:
    var(--card-tint) padding-box,
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(transparent 0 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
  mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
}
.wf-overview__role::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box, var(--gradient-two) padding-box,
    var(--gradient-three) padding-box, var(--gradient-four) padding-box,
    var(--gradient-five) padding-box, var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box, var(--gradient-base) padding-box;
  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}
.wf-overview__role > .wf-overview__edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}
.wf-overview__edge-light::before {
  content: '';
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px hsl(40deg 80% 80% / 100%),
    inset 0 0 1px 0 hsl(40deg 80% 80% / 60%),
    inset 0 0 3px 0 hsl(40deg 80% 80% / 50%),
    inset 0 0 6px 0 hsl(40deg 80% 80% / 40%),
    inset 0 0 15px 0 hsl(40deg 80% 80% / 30%),
    inset 0 0 25px 2px hsl(40deg 80% 80% / 20%),
    inset 0 0 50px 2px hsl(40deg 80% 80% / 10%),
    0 0 1px 0 hsl(40deg 80% 80% / 60%),
    0 0 3px 0 hsl(40deg 80% 80% / 50%),
    0 0 6px 0 hsl(40deg 80% 80% / 40%),
    0 0 15px 0 hsl(40deg 80% 80% / 30%),
    0 0 25px 2px hsl(40deg 80% 80% / 20%),
    0 0 50px 2px hsl(40deg 80% 80% / 10%);
}
.wf-overview__role > div, .wf-overview__role-icon { position: relative; z-index: 2; }
.wf-overview__embers { position: absolute; z-index: 0; inset: 1px; overflow: hidden; border-radius: inherit; pointer-events: none; }
.wf-overview__embers i { position: absolute; width: var(--ember-size, 2.4px); height: var(--ember-size, 2.4px); border-radius: 50%; background: #fff; box-shadow: 0 0 5.6px 1.6px rgba(255,255,255,.85), 0 0 12px 1.6px rgba(255,255,255,.4); opacity: 0; animation: wf-overview-ember 6.4s ease-in-out infinite; }
.wf-overview__embers i:nth-child(1) { left: 14%; top: 77%; animation-delay: calc(-1.2s + var(--ember-phase, 0s)); }
.wf-overview__embers i:nth-child(2) { left: 39%; top: 62%; animation-delay: calc(-4.3s + var(--ember-phase, 0s)); animation-duration: 7.2s; }
.wf-overview__embers i:nth-child(3) { left: 68%; top: 79%; animation-delay: calc(-2.8s + var(--ember-phase, 0s)); animation-duration: 5.8s; }
.wf-overview__embers i:nth-child(4) { left: 88%; top: 67%; animation-delay: calc(-5.6s + var(--ember-phase, 0s)); animation-duration: 7.8s; }
@keyframes wf-overview-ember {
  0% { transform: translate3d(0, 7px, 0) scale(.65); opacity: 0; }
  18% { opacity: .8; }
  45% { transform: translate3d(2px, -6px, 0) scale(1); opacity: 1; }
  75% { opacity: .72; }
  100% { transform: translate3d(var(--ember-drift, 5px), -22px, 0) scale(.55); opacity: 0; }
}
.wf-overview__role--quality { left: 7.0415%; top: 18.2249%; }
.wf-overview__role--style { left: 66.8122%; top: 19.4083%; --ember-phase: -2.1s; }
.wf-overview__role--rules { left: 9.8799%; top: 45.2071%; --ember-phase: -4.4s; }
.wf-overview__role--ui { left: 62.8821%; top: 54.7929%; --ember-phase: -1.5s; }
.wf-overview__role--rules, .wf-overview__role--ui { --card-tint: linear-gradient(90deg, rgba(73,12,195,.7), rgba(74,19,170,0)); border-color: #a18bf2; }
.wf-overview__role h3 { margin: 0; font-size: 1.965cqw; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.wf-overview__role p { margin: 0; color: rgba(255,255,255,.64); font-size: 1.092cqw; line-height: 1.5; white-space: nowrap; }
.wf-overview__role-icon { position: relative; display: grid; place-items: center; width: 3.657cqw; height: 3.657cqw; flex: 0 0 3.657cqw; margin-right: .55cqw; }
.wf-overview__role-icon > img { width: 78%; height: 78%; max-width: 100%; object-fit: contain; transform: none; }
.wf-overview__role--style .wf-overview__role-icon > img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.wf-overview__role-icon .wf-overview__icon-glow { position: absolute; right: -.1cqw; top: -.15cqw; transform: scale(.75); z-index: -1; }
.wf-overview__entry { position: absolute; z-index: 2; left: -23%; bottom: 5.5%; width: 146%; aspect-ratio: 575 / 93; border: 0; border-radius: 3.5% / 22%; overflow: hidden; }
.wf-overview__entry img { width: 100%; height: 100%; object-fit: cover; }
.wf-overview__entry { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px) scale(.58); transform-origin: center center; transition: opacity .5s ease, transform .85s cubic-bezier(.18,1.28,.35,1), visibility 0s .85s; }
.wf-overview__board.is-entry-visible .wf-overview__entry { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition-delay: .18s, .18s, 0s; }
@media (prefers-reduced-motion: reduce) {
  .wf-overview__entry { transform: none; transition: none; }
  .wf-overview__embers { display: none; }
}
.wf-overview__bubble { position: absolute; z-index: 0; margin: 0; padding: .65cqw 1cqw; border-radius: 999px; background: rgba(255,0,217,.038); box-shadow: inset 0 0 9px rgba(255,255,255,.16); color: rgba(255,255,255,.26); font-size: 1.092cqw; line-height: 1.4; white-space: nowrap; animation: wf-overview-danmaku 8s linear infinite; }
.wf-overview__bubble--a { top: 34.911%; left: 4%; --bubble-travel: calc(32cqw - 100%); animation-duration: 7.2s; animation-delay: -6.12s; }
.wf-overview__bubble--b { top: 66.154%; left: 4%; --bubble-travel: calc(32cqw - 100%); animation-duration: 8.8s; animation-delay: -7s; }
.wf-overview__bubble--c { top: 39.408%; left: 62%; --bubble-travel: calc(34cqw - 100%); animation-duration: 7.6s; animation-delay: -3.36s; }
.wf-overview__bubble--d { top: 78.698%; left: 62%; --bubble-travel: calc(34cqw - 100%); animation-duration: 8.4s; animation-delay: -2.96s; }
@keyframes wf-overview-danmaku {
  0% { transform: translateX(var(--bubble-travel)); opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
.wf-overview__spark { position: absolute; z-index: 1; mix-blend-mode: screen; filter: url(#wufu-spark-black-to-alpha); object-fit: contain; transform-origin: center; animation: wf-overview-spin 14s linear infinite; }
.wf-overview__spark--a { left: 7.041%; top: 78.698%; width: 5.732%; aspect-ratio: 105 / 110; animation-duration: 16s; }
.wf-overview__spark--b { left: 79.258%; top: 0; width: 6.059%; aspect-ratio: 111 / 117; opacity: .62; animation-duration: 12s; animation-direction: reverse; }
.wf-overview__spark--c { left: 32.8057%; top: 8.876%; width: 3.93%; aspect-ratio: 1; opacity: .62; animation-duration: 10s; }
@keyframes wf-overview-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .wf-overview__spark { animation: none; }
  .wf-overview__bubble { animation: none; }
  .wf-overview__bubble--a { left: 4.258%; }
  .wf-overview__bubble--b { left: 16.812%; }
  .wf-overview__bubble--c { left: 63.755%; }
  .wf-overview__bubble--d { left: 75.982%; }
}

.wf-journey__panel { padding: 0; }
.wf-journey__scroll { overflow: visible; padding: 88px 3px 8px; scrollbar-width: none; -ms-overflow-style: none; }
.wf-journey__scroll::-webkit-scrollbar { display: none; }
.wf-journey__steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5.65%; min-width: 940px; padding: 0; margin: 0; list-style: none; transform: translateY(0); transition: transform .8s cubic-bezier(.22,.8,.2,1); }
.wf-journey--settled .wf-journey__steps { transform: translateY(-70px); }
.wf-journey__steps li { position: relative; text-align: center; min-width: 0; }
.wf-journey--reveal-ready .wf-journey__steps li { opacity: 0; transform: translate3d(-28px, 18px, 0) scale(.96); transition: opacity .9s ease, transform 1.05s cubic-bezier(.2,.8,.2,1); }
.wf-journey--reveal-ready .wf-journey__steps li.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.wf-journey__firework { position: absolute; z-index: 2; left: 50%; top: -82px; width: 132px; height: 78px; max-width: none; pointer-events: none; transform: translateX(-50%); }
.wf-journey__steps h4 { display: grid; place-items: center; min-height: 50px; margin: 0 0 30px; padding: 9px 3px; border: 1px solid #b295ff; border-radius: 9px; background: linear-gradient(120deg,#6337a8,#28217d); color: #fff; font-size: clamp(15px,1.5vw,22px); line-height: 1.4; font-weight: 600; }
.wf-journey__steps li > img { width: 100%; aspect-ratio: 206 / 447; object-fit: cover; border: 1px solid rgba(111,161,255,.31); border-radius: 8px; }
.wf-journey__steps p { margin: 26px -12px 0; color: rgba(255,255,255,.75); font-size: clamp(12px,1.05vw,16px); line-height: 1.55; }
.wf-journey__arrow { position: absolute; top: 53%; left: 100%; display: grid; place-items: center; width: 47%; }
.wf-journey__arrow img { max-width: none; transform: rotate(-90deg) scale(.7); }
@media (prefers-reduced-motion: reduce) {
  .wf-journey__scroll { padding-top: 0; }
  .wf-journey__steps, .wf-journey--settled .wf-journey__steps { transform: none; transition: none; }
  .wf-journey--reveal-ready .wf-journey__steps li { opacity: 1; transform: none; transition: none; }
  .wf-journey__firework { display: none; }
}

@media (max-width: 1000px) {
  .wf-overview__role h3 { font-size: 1.86cqw; }
}
@media (max-width: 1050px) {
  .wf-journey__scroll { overflow-x: auto; overflow-y: hidden; }
  .wufu-case-section { padding: 64px 0 68px; scroll-margin-top: 84px; }
  .wufu-case-inner { width: calc(100% - 36px); }
  .wufu-case-heading { margin-bottom: 46px; }
  .wufu-case-heading br { display: none; }
  .wf-overview__board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px; aspect-ratio: auto; padding-bottom: 12px; }
  .wf-overview__phone { position: relative; grid-column: 1 / -1; grid-row: 1; left: auto; top: auto; width: clamp(220px, 53%, 300px); max-width: 100%; margin: 0 auto 24px !important; }
  .wf-overview__role { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 75px; padding: 11px 9px; border-radius: 20px; }
  .wf-overview__role h3 { font-size: clamp(12px,3vw,18px); white-space: normal; }
  .wf-overview__role p { margin-top: 4px; font-size: clamp(11px, 1.35vw, 13px); white-space: normal; }
  .wf-overview__role-icon { width: 26px; height: 34px; flex-basis: 26px; margin-right: 6px; }
  .wf-overview__role-icon > img { width: 100%; height: 100%; object-fit: contain; transform: none; }
  .wf-overview__role--style .wf-overview__role-icon > img { width: 100%; height: 100%; }
  .wf-overview__role-icon .wf-overview__icon-glow { inset: -10%; width: 120%; height: 120%; transform: none; }
  .wf-overview__entry { left: -23%; bottom: 5.5%; width: 146%; border-radius: 3.5% / 22%; }
  .wf-overview__bubble { padding: 6px 9px; font-size: 9px; }
  .wf-overview__bubble--a { top: 22cqw; left: 0; }
  .wf-overview__bubble--b { top: 60cqw; left: 0; }
  .wf-overview__bubble--c { top: 39cqw; left: auto; right: 0; max-width: 24%; white-space: normal; }
  .wf-overview__bubble--d { top: 79cqw; left: auto; right: 0; max-width: 22%; white-space: normal; }
  .wf-overview__spark--a { top: 78cqw; left: 7%; width: 12%; }
  .wf-overview__spark--b { top: 6cqw; left: 81%; width: 11%; }
  .wf-overview__spark--c { top: 5cqw; left: 6%; width: 10%; }
  .wf-overview__bubble, .wf-overview__spark { display: none; }
  .wf-journey__steps { min-width: 1050px; gap: 5.5%; }
}
@media (max-width: 720px) {
  .wufu-case-heading h2 { font-size: clamp(42px, 12vw, 64px); }
  .wufu-case-heading__english { margin-top: 10px; font-size: 12px; }
  .wufu-case-heading > p { font-size: 17px; }
}
@media (max-width: 520px) {
  .wufu-case-section { padding: 52px 0 58px; }
  .wufu-case-heading { margin-bottom: 36px; }
  .wufu-case-heading__english { max-width: 100%; line-height: 1.55; }
  .wufu-case-heading > p { margin-top: 24px; }
  .wf-overview__board { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wf-overview__phone { grid-column: 1; }
  .wf-overview__role { min-height: 72px; padding: 11px 18px; }
  .wf-overview__role-icon { width: 34px; height: 34px; flex-basis: 34px; margin-right: 12px; }
  .wf-overview__role h3 { font-size: clamp(15px, 4vw, 18px); }
  .wf-overview__role p { font-size: clamp(11px, 2.8vw, 13px); }
}