:root {
  --ink: #050505;
  --white: #f3f3f0;
  --muted: rgba(255, 255, 255, 0.64);
  --line: rgba(255, 255, 255, 0.18);
  --orange: #f06a24;
  --max: 1700px;
  --pad: clamp(24px, 4vw, 76px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  overflow: visible;
}

img {
  display: block;
}

.pf-wrap {
  width: min(calc(100% - var(--pad) * 2), var(--max));
  margin-inline: auto;
}

.showcase-intro {
  position: relative;
  min-height: 115svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(120px, 15vh, 220px) 0;
  background:
    radial-gradient(circle at 74% 24%, rgba(240, 106, 36, 0.12), transparent 28%),
    #050505;
  border-top: 1px solid var(--line);
}

.showcase-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 8.33vw 8.33vw;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 75%, transparent);
  pointer-events: none;
}

.showcase-intro__grid {
  position: relative;
  z-index: 1;
}

.showcase-intro__eyebrow {
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: rgba(255,255,255,.6);
  font-size: 13px;
}

.showcase-intro h2 {
  margin: clamp(70px, 10vh, 130px) 0;
  font-size: clamp(58px, 7vw, 96px);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.showcase-intro h2 span,
.showcase-intro h2 strong {
  display: block;
}

.showcase-intro h2 strong {
  margin-left: clamp(0px, 16vw, 280px);
  color: var(--orange);
  font-weight: 600;
}

.showcase-intro__statement {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(48px, 9vw, 150px);
  align-items: end;
}

.showcase-intro__statement > p {
  max-width: 53ch;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.85;
  text-wrap: pretty;
}

.showcase-intro nav {
  border-top: 1px solid var(--line);
}

.showcase-intro nav a {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--white);
  font-size: 15px;
  text-decoration: none;
  transition: padding 420ms var(--ease), color 240ms ease;
}

.showcase-intro nav a:hover,
.showcase-intro nav a:focus-visible {
  padding-inline: 16px;
  color: var(--orange);
  outline: none;
}

.showcase-intro nav span {
  color: rgba(255,255,255,.42);
}

.showcase-intro__marquee {
  position: absolute;
  bottom: 20px;
  left: 0;
  display: flex;
  width: max-content;
  color: rgba(255,255,255,.09);
  font-size: clamp(70px, 9vw, 150px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -0.04em;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  pointer-events: none;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.project {
  position: relative;
  isolation: isolate;
  background: var(--ink);
}

.project--lihoo { z-index: 1; }
.project--nabo { z-index: 2; }
.project--bex { z-index: 3; }
.project--biduo { z-index: 4; }
.project--omnik { z-index: 5; }

.project-scene {
  position: relative;
  z-index: 2;
  height: 300svh;
}

.scene-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}

.scene-fill {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--media-x, 0), var(--media-y, 0), 0) scale(var(--scene-scale, 1.035));
  will-change: transform, opacity;
}

.scene-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.58), transparent 45%, rgba(0,0,0,.25));
}

.scene-heading {
  position: absolute;
  z-index: 12;
  top: clamp(42px, 7vh, 88px);
  left: var(--pad);
  max-width: min(720px, 46vw);
  opacity: var(--heading-alpha, 1);
  transform: translate3d(0, var(--heading-y, 0), 0);
  will-change: transform, opacity;
}

.scene-heading--bottom {
  top: auto;
  bottom: clamp(62px, 10vh, 120px);
}

.scene-heading span {
  display: block;
  margin-bottom: clamp(24px, 4vh, 46px);
  font-size: 13px;
}

.scene-heading h2 {
  margin: 0;
  font-size: clamp(76px, 10vw, 176px);
  font-weight: 500;
  line-height: .78;
  letter-spacing: -0.04em;
}

.scene-heading p {
  max-width: 36ch;
  margin: 34px 0 0;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.45;
}

.scene-heading--light {
  color: #fff;
  text-shadow: 0 3px 20px rgba(0,0,0,.35);
}

.scene-frame {
  position: absolute;
  z-index: 5;
  margin: 0;
  overflow: hidden;
  background: #111;
  box-shadow: 0 34px 100px rgba(0,0,0,.38);
  will-change: transform, opacity;
}

.scene-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate3d(var(--media-x, 0), var(--media-y, 0), 0);
  transition: transform 900ms var(--ease);
}

.scene-word {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-size: clamp(110px, 19vw, 360px);
  font-weight: 700;
  line-height: .7;
  letter-spacing: -0.06em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
}

.scene-progress {
  position: absolute;
  z-index: 20;
  left: var(--pad);
  right: var(--pad);
  bottom: 24px;
  height: 1px;
  background: rgba(255,255,255,.28);
}

.scene-progress span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: #fff;
}

.scene-lihoo__forest {
  opacity: var(--bg-alpha, 1);
}

.scene-lihoo__world {
  top: 12vh;
  right: 6vw;
  width: min(51vw, 920px);
  aspect-ratio: 16 / 9;
  opacity: var(--alpha-a, 0);
  transform: translate3d(var(--x-a, 260px), var(--y-a, 70px), 0) rotate(var(--rot-a, 7deg)) scale(var(--scale-a, .9));
}

.scene-lihoo__identity {
  left: 10vw;
  bottom: 8vh;
  width: min(44vw, 760px);
  aspect-ratio: 16 / 9;
  opacity: var(--alpha-b, 0);
  transform: translate3d(var(--x-b, -260px), var(--y-b, 70px), 0) rotate(var(--rot-b, -6deg)) scale(var(--scale-b, .9));
}

.scene-lihoo__ip {
  right: 12vw;
  bottom: 4vh;
  width: min(31vw, 540px);
  aspect-ratio: 16 / 9;
  opacity: var(--alpha-c, 0);
  transform: translate3d(var(--x-c, 210px), var(--y-c, 80px), 0) rotate(var(--rot-c, 5deg)) scale(var(--scale-c, .9));
}

.scene-lihoo__word {
  left: -2vw;
  bottom: 8vh;
  color: rgba(255,255,255,.12);
  transform: translateX(var(--word-x, 0));
}

.scene-nabo__red {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, #f7463d 0, #de1f26 46%, #980d16 100%);
}

.scene-nabo__red::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .28;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 74%, transparent);
}

.scene-nabo__hero {
  z-index: 4;
  inset: 4vh 4vw;
  opacity: var(--hero-alpha, 1);
  border-radius: 2px;
  transform: scale(var(--scene-scale, 1.08));
}

.scene-nabo__store {
  z-index: 7;
  top: 9vh;
  right: 6vw;
  width: min(58vw, 1060px);
  aspect-ratio: 16 / 9;
  opacity: var(--alpha-b, 0);
  transform: translate3d(var(--x-b, 280px), var(--y-b, 50px), 0) rotate(var(--rot-b, 4deg)) scale(var(--scale-b, .92));
}

.scene-nabo__ip {
  z-index: 8;
  left: 8vw;
  top: 17vh;
  width: min(34vw, 610px);
  aspect-ratio: 16 / 9;
  opacity: var(--alpha-c, 0);
  transform: translate3d(var(--x-c, -220px), var(--y-c, 80px), 0) rotate(var(--rot-c, -5deg)) scale(var(--scale-c, .9));
}

.scene-nabo__word {
  z-index: 1;
  top: 26vh;
  left: -2vw;
  color: rgba(255,255,255,.16);
  transform: translateX(var(--word-x, 0));
}

.scene-bex__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 48%, rgba(255,90,0,.5), transparent 34%),
    radial-gradient(circle at 22% 70%, rgba(255,40,0,.22), transparent 27%),
    #050505;
}

.scene-bex__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255,112,30,.16) 49%, transparent 56%);
  transform: translateX(var(--glow-x, -40%));
}

.scene-bex__track {
  position: absolute;
  z-index: 6;
  left: 42vw;
  top: 23vh;
  display: flex;
  gap: clamp(24px, 3vw, 56px);
  width: max-content;
  transform: translate3d(var(--track-x, 0), 0, 0);
  will-change: transform;
}

.scene-bex__track .scene-frame {
  position: relative;
  width: min(66vw, 1120px);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.2);
}

.scene-bex__track .scene-frame:nth-child(even) {
  margin-top: 8vh;
}

.scene-bex__word {
  right: -4vw;
  bottom: 7vh;
  color: rgba(255,106,26,.18);
  transform: translateX(var(--word-x, 0));
}

.scene-biduo__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(74,255,125,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,255,125,.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, #083d28, #01150e 52%, #020604 100%);
  background-size: 48px 48px, 48px 48px, auto;
}

.scene-biduo__grid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--scan-y, 0%);
  height: 2px;
  background: #4dff7d;
  box-shadow: 0 0 32px 10px rgba(77,255,125,.35);
}

.scene-biduo__cover {
  top: 9vh;
  left: 35vw;
  width: min(58vw, 1040px);
  aspect-ratio: 16 / 9;
  opacity: var(--hero-alpha, 1);
  transform: perspective(1200px) rotateY(-7deg) scale(var(--scene-scale, 1.08));
}

.scene-biduo__campaign {
  left: 7vw;
  bottom: 7vh;
  width: min(50vw, 860px);
  aspect-ratio: 16 / 9;
  opacity: var(--alpha-b, 0);
  transform: translate3d(var(--x-b, -250px), var(--y-b, 80px), 0) rotate(var(--rot-b, -4deg)) scale(var(--scale-b, .92));
}

.scene-biduo__material {
  right: 7vw;
  bottom: 8vh;
  width: min(42vw, 720px);
  aspect-ratio: 16 / 9;
  opacity: var(--alpha-c, 0);
  transform: translate3d(var(--x-c, 230px), var(--y-c, 70px), 0) rotate(var(--rot-c, 5deg)) scale(var(--scale-c, .9));
}

.scene-biduo__word {
  left: -3vw;
  top: 27vh;
  color: rgba(77,255,125,.12);
  transform: translateX(var(--word-x, 0));
}

.scene-omnik__space {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 53% 46%, rgba(100,80,255,.66), transparent 17%),
    radial-gradient(circle at 53% 46%, rgba(39,35,153,.58), transparent 38%),
    radial-gradient(circle at 16% 20%, rgba(0,144,255,.2), transparent 25%),
    #030317;
}

.scene-omnik__space::before,
.scene-omnik__space::after {
  content: "";
  position: absolute;
  left: 53%;
  top: 48%;
  width: min(70vw, 1200px);
  aspect-ratio: 1;
  border: 1px solid rgba(157,145,255,.28);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--orbit-rot, 0deg)) scaleY(.34);
}

.scene-omnik__space::after {
  width: min(48vw, 820px);
  border-color: rgba(0,174,255,.36);
  transform: translate(-50%, -50%) rotate(var(--orbit-rot-inverse, 0deg)) scaleY(.5);
}

.scene-omnik__core {
  z-index: 5;
  left: 31vw;
  top: 14vh;
  width: min(48vw, 860px);
  aspect-ratio: 16 / 9;
  opacity: var(--hero-alpha, 1);
  transform: scale(var(--scene-scale, 1.08));
  box-shadow: 0 0 110px rgba(106,83,255,.3);
}

.scene-omnik__platform,
.scene-omnik__product,
.scene-omnik__social {
  width: min(30vw, 520px);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(169,160,255,.34);
}

.scene-omnik__platform {
  left: 8vw;
  top: 14vh;
  opacity: var(--alpha-a, 0);
  transform: translate3d(var(--x-a, -230px), var(--y-a, 80px), 0) rotate(var(--rot-a, -6deg)) scale(var(--scale-a, .9));
}

.scene-omnik__product {
  right: 7vw;
  top: 13vh;
  opacity: var(--alpha-b, 0);
  transform: translate3d(var(--x-b, 240px), var(--y-b, 70px), 0) rotate(var(--rot-b, 6deg)) scale(var(--scale-b, .9));
}

.scene-omnik__social {
  right: 18vw;
  bottom: 5vh;
  opacity: var(--alpha-c, 0);
  transform: translate3d(var(--x-c, 160px), var(--y-c, 100px), 0) rotate(var(--rot-c, 4deg)) scale(var(--scale-c, .88));
}

.scene-omnik__word {
  left: -4vw;
  bottom: 5vh;
  color: rgba(137,123,255,.13);
  font-size: clamp(90px, 14vw, 250px);
  transform: translateX(var(--word-x, 0));
}

.project-story {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: clamp(120px, 16vw, 260px) 0;
}

.project-story--light {
  background: #f1f2eb;
  color: #0b1710;
}

.project-story--red {
  background: #df2628;
  color: #fff;
}

.project-story--dark {
  background: #070707;
  color: #f5f4ef;
}

.project-story--acid {
  background: #07160f;
  color: #e8ffee;
}

.project-story--violet {
  background: #070717;
  color: #f0efff;
}

.project-story__lead {
  display: grid;
  grid-template-columns: .52fr 1.48fr;
  gap: clamp(40px, 8vw, 140px);
  align-items: start;
  padding-bottom: clamp(80px, 11vw, 180px);
}

.project-story__lead > p {
  margin: 14px 0 0;
  font-size: 14px;
}

.project-story__lead h3 {
  max-width: 1120px;
  margin: 0;
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.project-story--red .project-story__lead h3,
.project-story--acid .project-story__lead h3,
.project-story--violet .project-story__lead h3 {
  max-width: 1240px;
}

.project-story__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid currentColor;
}

.project-story__columns article {
  padding: 30px clamp(22px, 3vw, 48px) 0 0;
}

.project-story__columns article + article {
  padding-left: clamp(22px, 3vw, 48px);
  border-left: 1px solid currentColor;
}

.project-story__columns span {
  display: block;
  margin-bottom: 54px;
  opacity: .5;
  font-size: 12px;
}

.project-story__columns h4 {
  margin: 0 0 24px;
  font-size: 17px;
  font-weight: 600;
}

.project-story__columns p {
  max-width: 42ch;
  margin: 0;
  opacity: .78;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.85;
  text-wrap: pretty;
}

.project-story__media {
  display: grid;
  gap: clamp(18px, 2.3vw, 42px);
  margin-top: clamp(100px, 13vw, 220px);
  align-items: start;
}

.project-story__media figure {
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.project-story__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: filter 700ms var(--ease);
}

.project-story__media figure:hover img {
  filter: brightness(1.035) contrast(1.015);
}

.project-story__media--lihoo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-story__media--lihoo figure:first-child {
  grid-column: 1 / -1;
}

.project-story__media--nabo {
  grid-template-columns: 1.18fr .82fr;
  align-items: start;
}

.project-story__media--nabo figure:first-child {
  grid-column: 1;
  grid-row: 1 / 3;
}

.project-story__media--nabo figure:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.project-story__media--nabo figure:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.project-story__media--bex,
.project-story__media--omnik {
  grid-template-columns: 1.2fr .8fr;
  align-items: start;
}

.project-story__media--bex figure:first-child,
.project-story__media--omnik figure:first-child {
  width: 100%;
}

.project-story__media--bex figure:last-child,
.project-story__media--omnik figure:last-child {
  margin-top: 14vw;
  width: 100%;
}

.project-story__media--biduo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-story__media--biduo figure:first-child {
  grid-column: 1 / -1;
  width: 100%;
}

.project-story__media--biduo figure:last-child {
  width: 100%;
  margin: 0;
}

.project-story--orange .project-story__columns {
  border-color: rgba(240,106,36,.7);
}

.project-story--orange .project-story__columns article + article {
  border-color: rgba(240,106,36,.7);
}

.capabilities {
  position: relative;
  background: #f2f2ef;
  color: #0a0a0a;
  padding-top: clamp(120px, 16vw, 260px);
}

.capabilities__head {
  padding-bottom: clamp(100px, 12vw, 200px);
}

.capabilities__head p {
  margin: 0 0 48px;
  color: rgba(0,0,0,.54);
}

.capabilities__head h2 {
  max-width: 1250px;
  margin: 0;
  font-size: clamp(58px, 7vw, 96px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -0.04em;
}

.capabilities__split {
  border-top: 1px solid rgba(0,0,0,.22);
}

.capability {
  position: relative;
  display: grid;
  grid-template-columns: .35fr 1fr .75fr;
  gap: clamp(28px, 6vw, 110px);
  align-items: center;
  min-height: 58svh;
  padding: clamp(50px, 7vw, 110px) max(var(--pad), calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid rgba(0,0,0,.22);
  transition: color 600ms var(--ease), background-color 600ms var(--ease);
}

.capability--vision:hover,
.capability--vision:focus-within {
  background: #f06a24;
  color: #080808;
}

.capability--technology {
  background: #090909;
  color: #f3f3f0;
}

.capability--technology:hover,
.capability--technology:focus-within {
  background: #1a2cff;
}

.capability__number {
  align-self: start;
  font-size: 14px;
  opacity: .5;
}

.capability__body span {
  display: block;
  margin-bottom: 30px;
  opacity: .55;
}

.capability__body h3 {
  margin: 0 0 36px;
  font-size: clamp(60px, 7vw, 96px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -0.04em;
}

.capability__body p,
.capability__statement {
  max-width: 42ch;
  margin: 0;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.75;
  opacity: .68;
}

.capability__statement {
  align-self: end;
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  opacity: 1;
}

.process {
  background: #060606;
  color: #f3f3f0;
  padding: clamp(130px, 16vw, 270px) 0;
}

.process__inner {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(70px, 11vw, 190px);
}

.process__head {
  position: sticky;
  top: 10vh;
  align-self: start;
}

.process__head > p {
  margin: 0 0 42px;
  color: rgba(255,255,255,.48);
}

.process__head h2 {
  margin: 0 0 56px;
  font-size: clamp(58px, 6vw, 96px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -0.04em;
}

.process__head > span {
  display: block;
  max-width: 44ch;
  color: rgba(255,255,255,.62);
  font-size: 17px;
  line-height: 1.8;
}

.process__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.process__steps li {
  min-height: 33svh;
  display: grid;
  grid-template-columns: .22fr 1fr;
  gap: 24px;
  align-items: start;
  padding: clamp(42px, 5vw, 82px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 450ms var(--ease), color 300ms ease;
}

.process__steps li:hover {
  padding-left: 22px;
  color: var(--orange);
}

.process__steps li > span {
  opacity: .45;
  font-size: 13px;
}

.process__steps h3 {
  margin: 0 0 26px;
  font-size: clamp(40px, 4vw, 70px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.process__steps p {
  max-width: 40ch;
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 17px;
  line-height: 1.75;
}

.contact {
  position: relative;
  min-height: 108svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #050505;
  color: #f3f3f0;
  border-top: 1px solid var(--line);
}

.contact__orb {
  position: absolute;
  left: 64%;
  top: 38%;
  width: min(64vw, 1050px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 38%, rgba(255,255,255,.26), transparent 2%),
    radial-gradient(circle, rgba(240,106,36,.32), rgba(240,106,36,.08) 34%, transparent 67%);
  filter: blur(8px);
  transform: translate(-50%, -50%) scale(var(--contact-scale, 1));
  pointer-events: none;
}

.contact__inner {
  position: relative;
  z-index: 1;
  padding: 120px 0 50px;
}

.contact__inner > p {
  margin: 0 0 48px;
  color: rgba(255,255,255,.5);
}

.contact h2 {
  max-width: 1350px;
  margin: 0 0 clamp(90px, 13vh, 160px);
  font-size: clamp(58px, 7vw, 96px);
  font-weight: 400;
  line-height: .91;
  letter-spacing: -0.04em;
}

.contact h2 span {
  color: var(--orange);
}

.contact__inner > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 27px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #fff;
  font-size: clamp(22px, 2.4vw, 42px);
  text-decoration: none;
  transition: padding 420ms var(--ease), color 240ms ease;
}

.contact__inner > a:hover,
.contact__inner > a:focus-visible {
  padding-inline: 18px;
  color: var(--orange);
  outline: none;
}

.contact footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 24px;
  margin-top: 100px;
  color: rgba(255,255,255,.52);
  font-size: 13px;
}

.contact footer img {
  width: 150px;
  max-height: 60px;
  object-fit: contain;
  object-position: left center;
}

.contact footer p {
  margin: 0;
  text-align: center;
}

.contact footer span {
  text-align: right;
}

.reveal-item {
  opacity: 1;
  transform: translateY(0);
}

.motion-ready .reveal-item:not(.is-visible) {
  opacity: 1;
  transform: translateY(58px);
  filter: none;
}

.motion-ready .reveal-item {
  transition: transform 1.2s var(--ease);
}

/* Immersive project reels */
.project-story {
  padding: 0;
  overflow: visible;
}

.project-story__summary {
  position: relative;
  z-index: 3;
  padding: clamp(120px, 16vw, 260px) 0;
}

.project-reel {
  --reel-progress: 0%;
  position: relative;
  z-index: 2;
  height: calc((var(--frames) * .72 + 1) * 100svh);
  min-height: 240svh;
  color: #fff;
}

.project-reel__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.project-reel__ambient,
.project-reel__stage::before,
.project-reel__stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.project-reel__ambient {
  z-index: -3;
  transform: translate3d(var(--ambient-x, 0), var(--ambient-y, 0), 0) scale(1.08);
  transition: transform 900ms var(--ease);
}

.project-reel__stage::before,
.project-reel__stage::after {
  content: "";
  z-index: -2;
}

.project-reel__stage::after {
  z-index: 8;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, .34);
}

.project-reel__meta {
  position: absolute;
  z-index: 12;
  top: clamp(28px, 4vw, 64px);
  left: clamp(28px, 5vw, 92px);
  right: clamp(28px, 5vw, 92px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 500;
}

.project-reel__meta strong {
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.project-reel__slides {
  position: absolute;
  inset: 0;
  z-index: 3;
  perspective: 1800px;
  transform-style: preserve-3d;
}

.project-reel__slide {
  --slide-x: 0vw;
  --slide-y: 0vh;
  --slide-scale: .9;
  --slide-rotate: 0deg;
  --slide-opacity: 0;
  --slide-blur: 12px;
  position: absolute;
  inset: clamp(96px, 10vh, 132px) clamp(38px, 6vw, 110px) clamp(78px, 9vh, 116px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  opacity: 0;
  transform: translate3d(var(--slide-x), var(--slide-y), 0) scale(var(--slide-scale)) rotate(var(--slide-rotate));
  filter: blur(var(--slide-blur));
  will-change: transform, opacity, filter;
}

.project-reel__slide:first-child {
  opacity: 1;
  transform: none;
  filter: none;
}

.reel-ready .project-reel__slide {
  opacity: var(--slide-opacity);
  transform: translate3d(var(--slide-x), var(--slide-y), 0) scale(var(--slide-scale)) rotate(var(--slide-rotate));
  filter: blur(var(--slide-blur));
}

.project-reel__slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(88vw, 1600px);
  max-height: 76svh;
  object-fit: contain;
  box-shadow: 0 38px 90px rgba(0, 0, 0, .34);
}

.project-reel__slide--portrait img {
  max-height: 80svh;
}

.project-reel__progress {
  position: absolute;
  z-index: 12;
  left: clamp(28px, 5vw, 92px);
  right: clamp(28px, 5vw, 92px);
  bottom: clamp(30px, 4vw, 62px);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .24);
}

.project-reel__progress span {
  display: block;
  width: var(--reel-progress);
  height: 100%;
  background: currentColor;
  transform-origin: left center;
}

.project-reel--lihoo .project-reel__stage {
  background: #07140d;
}

.project-reel--lihoo .project-reel__ambient {
  background: linear-gradient(rgba(2, 13, 8, .72), rgba(2, 13, 8, .84)), url("./assets/cases/lihoo-opening.webp") center / cover no-repeat;
  filter: saturate(.72) blur(5px);
}

.project-reel--lihoo .project-reel__stage::before {
  background: radial-gradient(circle at 50% 47%, rgba(140, 197, 96, .2), transparent 44%);
}

.project-reel--lihoo .project-reel__meta,
.project-reel--lihoo .project-reel__progress {
  color: #eff7e9;
}

.project-reel--nabo .project-reel__stage {
  background: #d6232d;
}

.project-reel--nabo .project-reel__ambient {
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .15), transparent 44%);
}

.project-reel--nabo .project-reel__stage::before {
  content: "NABO";
  inset: auto -3vw -8vh;
  color: rgba(255, 255, 255, .095);
  font-size: clamp(220px, 37vw, 720px);
  font-weight: 800;
  line-height: .72;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.project-reel--nabo .project-reel__slide img {
  box-shadow: 0 38px 80px rgba(84, 2, 10, .4);
}

.project-reel--bex .project-reel__stage {
  background: #080706;
}

.project-reel--bex .project-reel__ambient {
  background:
    radial-gradient(circle at var(--bex-glow-x, 38%) 48%, rgba(255, 79, 0, .56), transparent 27%),
    radial-gradient(circle at 70% 28%, rgba(121, 40, 10, .36), transparent 24%),
    #080706;
}

.project-reel--bex .project-reel__stage::before {
  inset: 16% 8%;
  border-radius: 50%;
  background: rgba(255, 94, 18, .12);
  filter: blur(90px);
  transform: translateX(var(--bex-orbit-x, 0));
}

.project-reel--bex .project-reel__slide img {
  box-shadow: 0 42px 100px rgba(0, 0, 0, .72);
}

.project-reel--biduo .project-reel__stage {
  background: #03150d;
}

.project-reel--biduo .project-reel__ambient {
  background:
    linear-gradient(rgba(0, 14, 8, .72), rgba(0, 14, 8, .9)),
    url("./assets/cases/biduo-cover-frame.webp") center / cover no-repeat;
  filter: blur(7px) saturate(1.2);
}

.project-reel--biduo .project-reel__stage::before {
  background: linear-gradient(180deg, transparent 0 45%, rgba(62, 255, 162, .2) 50%, transparent 55%);
  transform: translateY(var(--scan-y, -70%));
}

.project-reel--biduo .project-reel__meta,
.project-reel--biduo .project-reel__progress {
  color: #9bffc3;
}

.project-reel--omnik .project-reel__stage {
  background: #060616;
}

.project-reel--omnik .project-reel__ambient {
  background:
    radial-gradient(circle at 50% 50%, rgba(116, 62, 255, .42), transparent 24%),
    radial-gradient(circle at 72% 28%, rgba(30, 104, 255, .22), transparent 20%),
    #060616;
}

.project-reel--omnik .project-reel__stage::before {
  inset: 9% 21%;
  border: 1px solid rgba(159, 129, 255, .28);
  border-radius: 50%;
  transform: rotate(var(--orbit-rot, 0deg)) scale(1.15);
}

.project-reel--omnik .project-reel__stage::after {
  inset: 18% 31%;
  z-index: -1;
  border: 1px solid rgba(89, 147, 255, .22);
  border-radius: 50%;
  transform: rotate(var(--orbit-inverse, 0deg));
  box-shadow: none;
}

.project-reel--omnik .project-reel__meta,
.project-reel--omnik .project-reel__progress {
  color: #d9d0ff;
}

@media (max-width: 900px) {
  .project-reel {
    height: calc((var(--frames) * .58 + 1) * 100svh);
  }

  .project-reel__slide {
    inset: 92px 18px 72px;
  }

  .project-reel__slide img {
    max-width: calc(100vw - 36px);
    max-height: 70svh;
  }

  .project-reel--nabo .project-reel__stage::before {
    font-size: 54vw;
  }
}

.project-story__columns article:nth-child(2),
.project-story__media figure:nth-child(2) {
  transition-delay: 90ms;
}

.project-story__columns article:nth-child(3),
.project-story__media figure:nth-child(3) {
  transition-delay: 180ms;
}

@media (max-width: 1100px) {
  .showcase-intro__statement,
  .project-story__lead,
  .process__inner {
    grid-template-columns: 1fr;
  }

  .project-story__columns {
    grid-template-columns: 1fr;
  }

  .project-story__columns article,
  .project-story__columns article + article {
    padding: 28px 0 42px;
    border-left: 0;
    border-bottom: 1px solid currentColor;
  }

  .project-story__columns span {
    margin-bottom: 24px;
  }

  .capability {
    grid-template-columns: .2fr 1fr;
  }

  .capability__statement {
    grid-column: 2;
  }

  .process__head {
    position: static;
  }
}

@media (max-width: 760px) {
  :root { --pad: 20px; }

  .showcase-intro {
    min-height: auto;
  }

  .showcase-intro h2 strong {
    margin-left: 0;
  }

  .project-scene {
    height: 220svh;
  }

  .scene-heading {
    top: 30px;
    max-width: calc(100vw - 40px);
  }

  .scene-heading--bottom {
    top: auto;
    bottom: 58px;
  }

  .scene-heading h2 {
    font-size: clamp(62px, 22vw, 110px);
  }

  .scene-heading p {
    margin-top: 18px;
    font-size: 16px;
  }

  .scene-lihoo__world,
  .scene-nabo__store,
  .scene-biduo__cover,
  .scene-omnik__core {
    width: 78vw;
    right: 5vw;
    left: auto;
  }

  .scene-lihoo__identity,
  .scene-nabo__ip,
  .scene-biduo__campaign,
  .scene-omnik__platform {
    width: 67vw;
    left: 5vw;
  }

  .scene-lihoo__ip,
  .scene-biduo__material,
  .scene-omnik__product,
  .scene-omnik__social {
    width: 58vw;
    right: 5vw;
  }

  .scene-bex__track {
    left: 18vw;
    top: 35vh;
  }

  .scene-bex__track .scene-frame {
    width: 82vw;
  }

  .project-story__media,
  .project-story__media--lihoo,
  .project-story__media--nabo,
  .project-story__media--bex,
  .project-story__media--biduo,
  .project-story__media--omnik {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .project-story__media figure,
  .project-story__media--lihoo figure:first-child,
  .project-story__media--lihoo figure:not(:first-child),
  .project-story__media--nabo figure:first-child,
  .project-story__media--nabo figure:not(:first-child),
  .project-story__media--bex figure:first-child,
  .project-story__media--bex figure:last-child,
  .project-story__media--biduo figure:first-child,
  .project-story__media--biduo figure:last-child,
  .project-story__media--omnik figure:first-child,
  .project-story__media--omnik figure:last-child {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
    margin-top: 0;
  }

  .capability {
    grid-template-columns: 1fr;
    min-height: 70svh;
  }

  .capability__statement {
    grid-column: auto;
  }

  .process__steps li {
    grid-template-columns: 1fr;
  }

  .contact footer {
    grid-template-columns: 1fr;
  }

  .contact footer p,
  .contact footer span {
    text-align: left;
  }
}

/* BEX EXHIBITION V2 FINAL: complete artwork inside a cinematic digital gallery. */
.project-reel--bex {
  --bex-orange: #ff5a1f;
  --bex-orange-soft: rgba(255, 90, 31, .34);
  --bex-ink: #050403;
  height: calc(var(--frames) * 100svh);
  min-height: 1600svh;
  background: var(--bex-ink);
}

.project-reel--bex .project-reel__stage {
  isolation: isolate;
  overflow: hidden;
  perspective: 1900px;
  background: #030303;
}

.project-reel--bex .project-reel__stage::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 9% 91%, rgba(255, 255, 255, .06)),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 18% 76%, rgba(255, 86, 24, .06));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    inset 0 -1px rgba(255, 90, 31, .18);
}

.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  display: block;
  position: absolute;
  z-index: 1;
  inset: auto -2vw -9vh auto;
  color: rgba(255, 90, 31, .045);
  font-size: clamp(250px, 39vw, 740px);
  font-weight: 820;
  line-height: .72;
  letter-spacing: -.04em;
  pointer-events: none;
  transform: translate3d(calc(var(--ambient-x, 0px) * -.2), 0, 0);
}

.project-reel--bex .project-reel__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  overflow: hidden;
  filter: none;
  transform: none;
  background:
    radial-gradient(circle at calc(50% + var(--ambient-x, 0px)) calc(48% + var(--ambient-y, 0px)), rgba(255, 92, 28, .22), transparent 31%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 100, 36, .13), transparent 43%),
    linear-gradient(112deg, #030303 0%, #100704 47%, #030303 100%);
}

.project-reel--bex .project-reel__ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, .035) 8.1% 8.2%, transparent 8.3% 91.7%, rgba(255, 255, 255, .035) 91.8% 91.9%, transparent 92%),
    linear-gradient(180deg, transparent 0 11%, rgba(255, 92, 28, .6) 11.1% 11.2%, transparent 11.3%);
  opacity: .76;
  box-shadow: inset 0 0 190px rgba(0, 0, 0, .88);
}

.project-reel--bex .project-reel__ambient::after {
  content: "";
  position: absolute;
  left: 3vw;
  right: 3vw;
  bottom: -25vh;
  height: 51vh;
  transform: perspective(900px) rotateX(68deg);
  transform-origin: center top;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 92, 28, .16), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .78));
  border-top: 1px solid rgba(255, 112, 55, .34);
  box-shadow: 0 -18px 70px rgba(255, 75, 8, .08);
}

.project-reel--bex .project-reel__meta {
  top: clamp(22px, 3.2vh, 38px);
  left: clamp(28px, 4vw, 76px);
  right: clamp(28px, 4vw, 76px);
  z-index: 14;
  align-items: center;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(12px, .85vw, 15px);
}

.project-reel--bex .project-reel__meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 13px);
  height: 1px;
  background: linear-gradient(90deg, var(--bex-orange), rgba(255, 255, 255, .16) 18%, rgba(255, 255, 255, .05) 74%, transparent);
}

.project-reel--bex .project-reel__meta span {
  font-weight: 520;
  letter-spacing: -.01em;
}

.project-reel--bex .project-reel__meta strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 520;
}

.project-reel--bex .project-reel__slides {
  z-index: 6;
  perspective: 1900px;
  transform-style: preserve-3d;
}

.project-reel--bex .project-reel__slide,
.reel-ready .project-reel--bex .project-reel__slide {
  inset: clamp(76px, 8vh, 94px) clamp(52px, 5.5vw, 106px) clamp(68px, 8vh, 94px);
  display: grid;
  place-items: center;
  overflow: visible;
  opacity: 0;
  clip-path: none;
  filter: blur(12px) brightness(.62);
  transform:
    translate3d(0, 8vh, -340px)
    rotateX(6deg)
    scale(.935);
  transition:
    opacity 520ms cubic-bezier(.16, 1, .3, 1),
    transform 760ms cubic-bezier(.16, 1, .3, 1),
    filter 620ms cubic-bezier(.16, 1, .3, 1);
  transform-origin: 50% 64%;
  will-change: transform, opacity, filter;
}

.project-reel--bex .project-reel__slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(88vw, 1720px);
  aspect-ratio: 1600 / 690;
  max-height: calc(100svh - clamp(156px, 16vh, 192px));
  background: #080706;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    0 0 0 7px rgba(11, 9, 8, .9),
    0 0 0 8px rgba(255, 116, 61, .15),
    0 44px 110px rgba(0, 0, 0, .76),
    0 0 72px rgba(255, 77, 15, .12);
}

.project-reel--bex .project-reel__slide::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: min(88vw, 1720px);
  aspect-ratio: 1600 / 690;
  max-height: calc(100svh - clamp(156px, 16vh, 192px));
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .055), transparent 18% 74%, rgba(255, 90, 31, .025));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}

.project-reel--bex .project-reel__slide.is-active {
  opacity: 1;
  filter: none;
  transform:
    translate3d(calc(var(--pointer-x, 0px) * .24), calc(var(--pointer-y, 0px) * .18), 0)
    rotateX(var(--bex-rot-x, 0deg))
    rotateY(var(--bex-rot-y, 0deg))
    scale(1);
}

.project-reel--bex .project-reel__slide img,
.project-reel--bex .project-reel__slide--portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(88vw, 1720px);
  height: auto;
  max-width: none;
  max-height: calc(100svh - clamp(156px, 16vh, 192px));
  object-fit: contain;
  clip-path: none;
  transform: none;
  background: #080706;
  box-shadow: none;
}

.project-reel--bex .project-reel__progress {
  left: clamp(28px, 4vw, 76px);
  right: clamp(28px, 4vw, 76px);
  bottom: clamp(25px, 3.2vh, 40px);
  z-index: 14;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}

.project-reel--bex .project-reel__progress span {
  background: var(--bex-orange);
  box-shadow: 0 0 18px rgba(255, 82, 19, .72);
}

@media (max-width: 900px) {
  .project-reel--bex .project-reel__slide,
  .reel-ready .project-reel--bex .project-reel__slide {
    inset: 72px 14px 60px;
  }

  .project-reel--bex .project-reel__slide img,
  .project-reel--bex .project-reel__slide--portrait img,
  .project-reel--bex .project-reel__slide::before,
  .project-reel--bex .project-reel__slide::after {
    width: calc(100vw - 30px);
    max-height: calc(100svh - 148px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-reel--bex .project-reel__slide,
  .reel-ready .project-reel--bex .project-reel__slide,
  .project-reel--bex .project-reel__slide.is-active {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .project-scene {
    height: 100svh;
  }

  .scene-frame {
    transform: none !important;
  }

  .scene-frame:not(:first-of-type) {
    opacity: .55;
  }

  .project-reel {
    height: auto;
    min-height: 0;
  }

  .project-reel__stage {
    position: relative;
    height: auto;
    min-height: 100svh;
    padding: 110px 5vw 90px;
  }

  .project-reel__slides {
    position: relative;
    display: grid;
    gap: 28px;
  }

  .project-reel__slide,
  .project-reel__slide:first-child,
  .reel-ready .project-reel__slide {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .project-reel__progress {
    display: none;
  }
}

/* BEX full-page snap gallery: one complete artwork per wheel gesture. */
.project--bex > .project-scene {
  display: none;
}

.project-reel--bex {
  height: calc(var(--frames) * 100svh);
  min-height: 1600svh;
}

.project-reel--bex .project-reel__stage {
  isolation: isolate;
  background: #050403;
}

.project-reel--bex .project-reel__stage::before {
  display: none;
}

.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  color: rgba(255, 91, 22, .065);
  box-shadow: none;
}

.project-reel--bex .project-reel__ambient {
  opacity: 1;
  filter: none;
  transform: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(116, 33, 9, .18), transparent 42%),
    linear-gradient(180deg, #0b0806, #030303 76%);
}

.project-reel--bex .project-reel__slides {
  perspective: none;
  transform-style: flat;
}

.project-reel--bex .project-reel__slide,
.reel-ready .project-reel--bex .project-reel__slide {
  inset: clamp(72px, 7vh, 92px) clamp(42px, 3.2vw, 64px) clamp(58px, 6vh, 76px);
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: var(--slide-opacity, 0);
  clip-path: none;
  filter: none;
  transform: none;
  transition: opacity 100ms linear;
  transition-delay: 0ms;
  will-change: opacity;
}

.project-reel--bex .project-reel__slide.is-active {
  transition-delay: 110ms;
}

.project-reel--bex .project-reel__slide img {
  width: auto;
  height: auto;
  max-width: calc(100vw - clamp(84px, 6.4vw, 128px));
  max-height: calc(100svh - clamp(130px, 13vh, 168px));
  object-fit: contain;
  clip-path: none;
  transform: none;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .58);
}

.project-reel--bex .project-reel__meta,
.project-reel--bex .project-reel__progress {
  z-index: 12;
}

@media (max-width: 760px) {
  .project-reel--bex .project-reel__slide,
  .reel-ready .project-reel--bex .project-reel__slide {
    inset: 70px 12px 58px;
  }

  .project-reel--bex .project-reel__slide img {
    max-width: calc(100vw - 24px);
    max-height: calc(100svh - 128px);
  }
}

/* BEX EXHIBITION V2 CASCADE LOCK. Keep this block last. */
.project-reel--bex .project-reel__stage {
  perspective: 1900px;
  background: #030303;
}

.project-reel--bex .project-reel__stage::before {
  display: block;
  inset: 0;
  height: auto;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 9% 91%, rgba(255, 255, 255, .06)),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 18% 76%, rgba(255, 86, 24, .06));
  opacity: 1;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -1px rgba(255, 90, 31, .18);
}

.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  inset: auto -2vw -9vh auto;
  color: rgba(255, 90, 31, .045);
  font-size: clamp(250px, 39vw, 740px);
  font-weight: 820;
  line-height: .72;
  letter-spacing: -.04em;
  transform: translate3d(calc(var(--ambient-x, 0px) * -.2), 0, 0);
}

.project-reel--bex .project-reel__ambient {
  inset: 0;
  opacity: 1;
  filter: none;
  transform: none;
  background:
    radial-gradient(circle at calc(50% + var(--ambient-x, 0px)) calc(48% + var(--ambient-y, 0px)), rgba(255, 92, 28, .22), transparent 31%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 100, 36, .13), transparent 43%),
    linear-gradient(112deg, #030303 0%, #100704 47%, #030303 100%);
}

.project-reel--bex .project-reel__slides {
  perspective: 1900px;
  transform-style: preserve-3d;
}

.project-reel--bex .project-reel__slide,
.reel-ready .project-reel--bex .project-reel__slide {
  inset: clamp(76px, 8vh, 94px) clamp(52px, 5.5vw, 106px) clamp(68px, 8vh, 94px);
  overflow: visible;
  opacity: 0;
  filter: blur(12px) brightness(.62);
  transform: translate3d(0, 8vh, -340px) rotateX(6deg) scale(.935);
  transition:
    opacity 520ms cubic-bezier(.16, 1, .3, 1),
    transform 760ms cubic-bezier(.16, 1, .3, 1),
    filter 620ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: 0ms;
  transform-origin: 50% 64%;
  will-change: transform, opacity, filter;
}

.project-reel--bex .project-reel__slide.is-active {
  opacity: 1;
  filter: none;
  transform:
    translate3d(calc(var(--pointer-x, 0px) * .24), calc(var(--pointer-y, 0px) * .18), 0)
    rotateX(var(--bex-rot-x, 0deg))
    rotateY(var(--bex-rot-y, 0deg))
    scale(1);
  transition-delay: 80ms;
}

.project-reel--bex .project-reel__slide img,
.project-reel--bex .project-reel__slide--portrait img {
  width: min(88vw, 1720px);
  height: auto;
  max-width: none;
  max-height: calc(100svh - clamp(156px, 16vh, 192px));
  object-fit: contain;
  clip-path: none;
  transform: none;
  background: #080706;
  box-shadow: none;
}

.project-reel--bex .project-reel__meta,
.project-reel--bex .project-reel__progress {
  z-index: 14;
}

@media (max-width: 900px) {
  .project-reel--bex .project-reel__slide,
  .reel-ready .project-reel--bex .project-reel__slide {
    inset: 72px 14px 60px;
  }

  .project-reel--bex .project-reel__slide img,
  .project-reel--bex .project-reel__slide--portrait img,
  .project-reel--bex .project-reel__slide::before,
  .project-reel--bex .project-reel__slide::after {
    width: calc(100vw - 30px);
    max-height: calc(100svh - 148px);
  }
}

/* Motion rebuild v2: complete artwork, spatial transitions outside the work. */
.project-reel {
  height: calc((var(--frames) * 1.02 + 1) * 100svh);
}

.project-reel__stage {
  --edge-pad: clamp(28px, 4.8vw, 92px);
  background: #050505;
  perspective: 2200px;
}

.project-reel__stage::before,
.project-reel__stage::after {
  transition: none;
}

.project-reel__meta {
  top: clamp(24px, 3.5vh, 44px);
  left: var(--edge-pad);
  right: var(--edge-pad);
  letter-spacing: -.01em;
}

.project-reel__meta span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 20px currentColor;
  vertical-align: 1px;
}

.project-reel__slides {
  z-index: 5;
  perspective: 2200px;
}

.project-reel__slide,
.reel-ready .project-reel__slide {
  inset: clamp(72px, 8vh, 92px) clamp(22px, 3.2vw, 60px) clamp(58px, 7vh, 78px);
  overflow: visible;
  opacity: var(--slide-opacity, 0);
  clip-path: var(--slide-clip, inset(0));
  transform:
    translate3d(
      calc(var(--slide-x, 0vw) + var(--pointer-x, 0px)),
      calc(var(--slide-y, 0vh) + var(--pointer-y, 0px)),
      var(--slide-z, 0px)
    )
    rotateX(var(--slide-rx, 0deg))
    rotateY(var(--slide-ry, 0deg))
    rotateZ(var(--slide-rz, 0deg))
    scale(var(--slide-scale, 1));
  filter: blur(var(--slide-blur, 0px));
  transform-origin: 50% 50%;
  will-change: transform, opacity, clip-path, filter;
}

.project-reel__slide img,
.project-reel__slide--portrait img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1760px);
  max-height: 78svh;
  object-fit: contain;
  clip-path: inset(1px);
  background: transparent;
  box-shadow: 0 38px 100px rgba(0, 0, 0, .46);
}

.project-reel__progress {
  left: var(--edge-pad);
  right: var(--edge-pad);
  bottom: clamp(24px, 3.5vh, 44px);
  height: 1px;
}

.project-reel__ambient {
  inset: -4%;
  opacity: .86;
  transform: translate3d(var(--ambient-x, 0), var(--ambient-y, 0), 0) scale(1.08);
}

/* Lihuo: the forest becomes a breathing aperture while each board stays whole. */
.project-reel--lihoo .project-reel__stage {
  background: #020b06;
}

.project-reel--lihoo .project-reel__ambient {
  background:
    linear-gradient(180deg, rgba(0, 10, 5, .42), rgba(0, 8, 4, .88)),
    url("./assets/cases/lihoo-opening.webp") center / cover no-repeat;
  filter: saturate(.88) contrast(1.08);
}

.project-reel--lihoo .project-reel__stage::before {
  z-index: 2;
  inset: 8vh 18vw;
  border: 1px solid rgba(199, 236, 164, .22);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(204, 246, 173, .14) 0 1%, transparent 2% 45%, rgba(149, 206, 105, .1) 46% 47%, transparent 48% 100%);
  opacity: var(--portal-energy, .25);
  transform: scale(var(--portal-scale, .82)) rotate(var(--portal-rotate, 0deg));
  box-shadow: 0 0 150px rgba(116, 187, 82, .18), inset 0 0 90px rgba(173, 223, 133, .08);
}

.project-reel--lihoo .project-reel__stage::after {
  content: "LIHOO";
  z-index: 1;
  inset: auto -1vw -2vh;
  color: rgba(204, 232, 184, .065);
  font-size: clamp(180px, 30vw, 570px);
  font-weight: 700;
  line-height: .72;
  letter-spacing: -.08em;
}

.project-reel--lihoo .project-reel__slide img {
  box-shadow: 0 44px 120px rgba(0, 0, 0, .62), 0 0 80px rgba(124, 185, 88, .12);
}

/* Nabo: a red retail facade opens around complete presentation boards. */
.project-reel--nabo .project-reel__stage {
  background: #b80e18;
}

.project-reel--nabo .project-reel__ambient {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 128, 99, .34), transparent 34%),
    linear-gradient(135deg, #e52a32 0%, #ae0712 58%, #6f0008 100%);
  filter: none;
}

.project-reel--nabo .project-reel__stage::before {
  z-index: 2;
  inset: 7vh 5vw 5vh;
  border: 1px solid rgba(255, 255, 255, .18);
  background:
    linear-gradient(90deg,
      rgba(94, 0, 7, .96) 0 var(--door-left, 0%),
      transparent var(--door-left, 0%) calc(100% - var(--door-right, 0%)),
      rgba(94, 0, 7, .96) calc(100% - var(--door-right, 0%)) 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .025), 0 30px 100px rgba(66, 0, 5, .34);
}

.project-reel--nabo .project-reel__stage::after {
  content: "NABO / RETAIL IDENTITY";
  z-index: 1;
  inset: auto 3vw -2vh;
  color: rgba(255, 255, 255, .075);
  font-size: clamp(100px, 16vw, 310px);
  font-weight: 760;
  line-height: .78;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.project-reel--nabo .project-reel__slide img {
  max-width: min(90vw, 1700px);
  max-height: 77svh;
  box-shadow: 0 46px 120px rgba(72, 0, 6, .54);
}

/* BEX: flat cinematic pages. No deck, no slicing, no perspective distortion. */
.project-reel--bex .project-reel__stage {
  background: #090706;
}

.project-reel--bex .project-reel__ambient {
  background:
    radial-gradient(circle at var(--bex-glow-x, 34%) 48%, rgba(255, 83, 20, .46), transparent 26%),
    linear-gradient(120deg, #070605 0%, #160904 52%, #050403 100%);
  filter: none;
}

.project-reel--bex .project-reel__stage::before {
  z-index: 2;
  inset: auto 5vw 8vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 96, 31, .9), transparent);
  opacity: .65;
  box-shadow: 0 0 34px rgba(255, 79, 15, .72);
}

.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  z-index: 1;
  inset: -3vh auto auto 1.5vw;
  color: rgba(255, 91, 25, .09);
  font-size: clamp(260px, 42vw, 790px);
  font-weight: 820;
  line-height: .78;
  letter-spacing: -.08em;
}

.project-reel--bex .project-reel__slide {
  inset-left: 1.5vw;
  inset-right: 1.5vw;
}

.project-reel--bex .project-reel__slide img {
  width: min(94vw, 1820px);
  max-width: none;
  max-height: 79svh;
  object-fit: contain;
  box-shadow: 0 50px 140px rgba(0, 0, 0, .76);
}

/* Biduo: one real poster per hold, treated like a luminous campaign object. */
.project-reel--biduo .project-reel__stage {
  background: #001109;
}

.project-reel--biduo .project-reel__ambient {
  background:
    radial-gradient(circle at 50% 48%, rgba(24, 213, 112, .2), transparent 33%),
    linear-gradient(135deg, #00190d, #020705 72%);
  filter: none;
}

.project-reel--biduo .project-reel__stage::before {
  z-index: 2;
  inset: 9vh 28vw 7vh;
  border: 1px solid rgba(79, 255, 158, .16);
  background:
    linear-gradient(rgba(80, 255, 160, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 255, 160, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: var(--poster-grid-alpha, .5);
  transform: perspective(900px) rotateX(58deg) translateY(24%) scale(1.4);
  transform-origin: center bottom;
}

.project-reel--biduo .project-reel__stage::after {
  content: "CAMPAIGN POSTERS";
  z-index: 1;
  inset: auto 1vw -1vh;
  color: rgba(72, 255, 153, .07);
  font-size: clamp(92px, 13vw, 250px);
  font-weight: 760;
  line-height: .8;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.project-reel--biduo .project-reel__slide--poster img {
  width: auto;
  height: min(79svh, 890px);
  max-width: 62vw;
  max-height: 79svh;
  aspect-ratio: 500 / 890;
  object-fit: contain;
  clip-path: inset(1px);
  box-shadow: 0 48px 130px rgba(0, 0, 0, .78), 0 0 58px rgba(43, 255, 141, .13);
}

.project-reel--biduo .project-reel__meta,
.project-reel--biduo .project-reel__progress {
  color: #73ffac;
}

@media (max-width: 900px) {
  .project-reel {
    height: calc((var(--frames) * .82 + 1) * 100svh);
  }

  .project-reel__slide,
  .reel-ready .project-reel__slide {
    inset: 76px 12px 60px;
  }

  .project-reel__slide img,
  .project-reel--nabo .project-reel__slide img,
  .project-reel--bex .project-reel__slide img {
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: 72svh;
  }

  .project-reel--biduo .project-reel__slide--poster img {
    height: 72svh;
    max-width: 82vw;
    max-height: 72svh;
  }
}

/* Motion-led project rebuild: full artwork at every hold point. */
.project--lihoo > .project-scene,
.project--nabo > .project-scene,
.project--bex > .project-scene,
.project--biduo > .project-scene {
  display: none;
}

.project--lihoo .project-story,
.project--nabo .project-story,
.project--bex .project-story,
.project--biduo .project-story {
  padding-top: 0;
}

.project-reel {
  height: calc((var(--frames) * .9 + 1) * 100svh);
  min-height: 260svh;
}

.project-reel__stage {
  perspective: 1800px;
  isolation: isolate;
  contain: paint;
}

.project-reel__stage::after {
  position: absolute;
  z-index: 1;
  right: -1.5vw;
  bottom: -5.5vh;
  color: rgba(255, 255, 255, .075);
  font-size: clamp(180px, 28vw, 560px);
  font-weight: 800;
  line-height: .72;
  letter-spacing: -.04em;
  pointer-events: none;
  white-space: nowrap;
}

.project-reel__ambient {
  transform: translate3d(calc(var(--ambient-x, 0px) * .45), calc(var(--ambient-y, 0px) * .45), 0) scale(1.035);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.project-reel__meta {
  z-index: 20;
  mix-blend-mode: normal;
}

.project-reel__slides {
  z-index: 5;
  transform-style: preserve-3d;
}

.project-reel__slide,
.reel-ready .project-reel__slide {
  --slide-z: 0px;
  --slide-rx: 0deg;
  --slide-ry: 0deg;
  --slide-clip: inset(0 round 2px);
  clip-path: var(--slide-clip);
  opacity: var(--slide-opacity, 0);
  transform:
    translate3d(
      calc(var(--slide-x, 0vw) + var(--pointer-x, 0px)),
      calc(var(--slide-y, 0vh) + var(--pointer-y, 0px)),
      var(--slide-z)
    )
    rotateX(var(--slide-rx))
    rotateY(var(--slide-ry))
    scale(var(--slide-scale, 1));
  transform-origin: 50% 50%;
  filter: none;
  backface-visibility: hidden;
  will-change: transform, opacity, clip-path;
}

.project-reel__slide img {
  max-width: min(92vw, 1760px);
  max-height: 74svh;
  clip-path: inset(2px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .42);
}

.project-reel__progress {
  z-index: 20;
}

.project-reel--lihoo .project-reel__stage {
  background: #031109;
}

.project-reel--lihoo .project-reel__stage::after {
  content: "LIHOO";
}

.project-reel--lihoo .project-reel__stage::before {
  z-index: 2;
  inset: 9vh 17vw;
  border: 1px solid rgba(159, 212, 115, .24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 188, 81, .14), transparent 64%);
  opacity: var(--portal-energy, .4);
  transform: scale(var(--portal-scale, .78));
  box-shadow: 0 0 130px rgba(100, 183, 72, .14);
}

.project-reel--lihoo .project-reel__ambient {
  background:
    linear-gradient(rgba(1, 14, 7, .76), rgba(1, 14, 7, .9)),
    url("./assets/cases/lihoo-opening.webp") center / cover no-repeat;
  filter: saturate(.82) contrast(1.08);
}

.project-reel--lihoo .project-reel__slide img {
  box-shadow: 0 40px 110px rgba(0, 0, 0, .58), 0 0 70px rgba(101, 164, 72, .1);
}

.project-reel--nabo .project-reel__stage {
  background: #bd111b;
}

.project-reel--nabo .project-reel__stage::after {
  content: "NABO";
  color: rgba(255, 255, 255, .085);
}

.project-reel--nabo .project-reel__stage::before {
  z-index: 9;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0 8%, rgba(105, 0, 8, .78) 8% 8.6%,
      transparent 8.6% 28%, rgba(255, 255, 255, .13) 28% 28.5%,
      transparent 28.5% 70%, rgba(105, 0, 8, .78) 70% 70.6%,
      transparent 70.6% 92%, rgba(255, 255, 255, .13) 92% 92.5%, transparent 92.5%);
  opacity: var(--shutter-alpha, 0);
  transform: scaleX(var(--shutter-scale, .82));
  pointer-events: none;
}

.project-reel--nabo .project-reel__ambient {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 114, 82, .38), transparent 33%),
    linear-gradient(135deg, #e12730, #9d0812 76%);
}

.project-reel--nabo .project-reel__slide img {
  box-shadow: 0 42px 100px rgba(72, 0, 6, .56);
}

.project-reel--bex .project-reel__stage {
  background: #070605;
}

.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  color: rgba(255, 83, 18, .11);
}

.project-reel--bex .project-reel__stage::before {
  z-index: 2;
  inset: 10% 13%;
  border-radius: 50%;
  background: rgba(255, 76, 11, .2);
  filter: blur(100px);
  opacity: var(--bex-energy, .55);
  transform: translate3d(var(--bex-orbit-x, 0), 0, 0) scale(1.15);
}

.project-reel--bex .project-reel__ambient {
  background:
    radial-gradient(circle at var(--bex-glow-x, 38%) 48%, rgba(255, 75, 7, .48), transparent 29%),
    radial-gradient(circle at 72% 24%, rgba(91, 27, 6, .4), transparent 25%),
    #070605;
}

.project-reel--bex .project-reel__slide img {
  max-width: min(94vw, 1820px);
  max-height: 75svh;
  box-shadow: 0 48px 130px rgba(0, 0, 0, .76);
}

.project-reel--biduo .project-reel__stage {
  background: #02180e;
}

.project-reel--biduo .project-reel__stage::after {
  content: "币多多";
  color: rgba(67, 255, 148, .085);
  font-size: clamp(160px, 22vw, 430px);
}

.project-reel--biduo .project-reel__stage::before {
  z-index: 3;
  inset: -10% 0;
  background: linear-gradient(180deg, transparent 0 47%, rgba(71, 255, 154, .22) 50%, transparent 53%);
  opacity: .8;
  transform: translateY(var(--scan-y, -72%));
  pointer-events: none;
}

.project-reel--biduo .project-reel__ambient {
  background:
    radial-gradient(circle at 50% 44%, rgba(22, 132, 78, .28), transparent 35%),
    linear-gradient(145deg, #00170c, #040806 78%);
  filter: none;
}

.project-reel__slide--poster {
  perspective: 1500px;
}

.campaign-poster {
  position: relative;
  width: min(25.5vw, 460px);
  aspect-ratio: 500 / 890;
  overflow: hidden;
  background: #07120c;
  clip-path: inset(2px round 3px);
  box-shadow: 0 46px 120px rgba(0, 0, 0, .72), 0 0 52px rgba(46, 255, 141, .09);
}

.campaign-poster::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 320%;
  aspect-ratio: 1600 / 6938;
  background: url("./assets/cases/biduo-campaign.webp") 0 0 / 100% 100% no-repeat;
  transform: translate(var(--poster-x), var(--poster-y));
  transform-origin: 0 0;
}

@media (max-width: 900px) {
  .project-reel {
    height: calc((var(--frames) * .72 + 1) * 100svh);
  }

  .project-reel__slide img {
    max-width: calc(100vw - 30px);
    max-height: 69svh;
  }

  .campaign-poster {
    width: min(68vw, 430px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project--lihoo > .project-scene,
  .project--nabo > .project-scene,
  .project--bex > .project-scene,
  .project--biduo > .project-scene {
    display: none;
  }

  .campaign-poster {
    width: min(64vw, 460px);
  }
}

/* Complete-frame presentation: one artwork owns the viewport. */
.project-scene {
  height: calc((var(--scene-count, 3) * .72 + 1) * 100svh);
  min-height: 280svh;
}

.scene-heading,
.scene-heading--bottom {
  top: clamp(24px, 3.2vh, 42px);
  bottom: auto;
  left: var(--pad);
  right: var(--pad);
  max-width: none;
  opacity: var(--heading-alpha, 1);
  pointer-events: none;
}

.scene-heading span {
  margin-bottom: 10px;
  font-size: 12px;
  opacity: .76;
}

.scene-heading h2 {
  font-size: clamp(44px, 5vw, 82px);
  line-height: .88;
}

.scene-heading p {
  max-width: 48ch;
  margin-top: 12px;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.4;
}

.scene-word {
  display: none;
}

.scene-gallery {
  --gallery-card-width: min(78vw, 1460px);
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 20vh;
  display: flex;
  align-items: center;
  gap: 8vw;
  width: max-content;
  height: 68svh;
  transform: translate3d(var(--gallery-x, -39vw), 0, 0);
  will-change: transform;
}

.scene-gallery .scene-frame,
.scene-bex__track.scene-gallery .scene-frame {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 var(--gallery-card-width);
  width: var(--gallery-card-width) !important;
  height: 68svh !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  opacity: 1 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
}

.scene-gallery .scene-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(4px);
  transform: translate3d(var(--media-x, 0), var(--media-y, 0), 0) scale(1.002);
  transition: transform 420ms var(--ease);
}

.scene-gallery--biduo {
  --gallery-card-width: min(80vw, 1500px);
}

.scene-gallery--biduo .scene-biduo__campaign {
  flex-basis: min(88vw, 1640px);
  width: min(88vw, 1640px) !important;
}

.scene-gallery--nabo .scene-frame {
  box-shadow: 0 34px 100px rgba(91, 0, 8, .42);
}

.scene-gallery--bex .scene-frame,
.scene-gallery--omnik .scene-frame {
  box-shadow: 0 38px 110px rgba(0, 0, 0, .62);
}

.scene-lihoo__forest {
  filter: saturate(.8) brightness(.52);
}

.scene-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .16) 28%, rgba(0, 0, 0, .34));
}

.project-story__columns p {
  opacity: .92;
}

.project-story--light .project-story__lead > p,
.project-story--light .project-story__columns span {
  color: #53645a;
  opacity: 1;
}

.project-story--light .project-story__columns p {
  color: #34463c;
  opacity: 1;
}

.project-story--light .project-story__columns,
.project-story--light .project-story__columns article + article {
  border-color: #819087;
}

.project-reel {
  height: calc((var(--frames) * .64 + 1) * 100svh);
}

.project-reel__slides {
  perspective: none;
}

.project-reel__slide,
.reel-ready .project-reel__slide {
  --slide-opacity: 0;
  --slide-scale: 1;
  inset: clamp(82px, 9vh, 116px) clamp(24px, 4vw, 72px) clamp(66px, 8vh, 100px);
  overflow: hidden;
  opacity: var(--slide-opacity);
  transform: scale(var(--slide-scale));
  filter: none;
  will-change: auto;
}

.project-reel__slide.is-active {
  z-index: 3;
  will-change: transform;
}

.project-reel__slide img,
.project-reel__slide--portrait img {
  max-width: min(92vw, 1680px);
  max-height: 80svh;
  clip-path: inset(4px);
  object-fit: contain;
}

.project-reel__ambient {
  opacity: .54;
  filter: blur(18px) brightness(.58) saturate(.82);
  transform: translate3d(var(--ambient-x, 0), var(--ambient-y, 0), 0) scale(1.16);
}

.project-reel--nabo .project-reel__ambient,
.project-reel--bex .project-reel__ambient,
.project-reel--omnik .project-reel__ambient {
  filter: none;
}

.project-reel__stage::after {
  box-shadow: inset 0 0 110px rgba(0, 0, 0, .24);
}

@media (max-width: 760px) {
  .project-scene {
    height: calc((var(--scene-count, 3) * .58 + 1) * 100svh);
    min-height: 230svh;
  }

  .scene-gallery {
    --gallery-card-width: 90vw;
    top: 24vh;
    gap: 9vw;
    height: 62svh;
  }

  .scene-gallery .scene-frame,
  .scene-bex__track.scene-gallery .scene-frame,
  .scene-gallery--biduo .scene-biduo__campaign {
    flex-basis: var(--gallery-card-width);
    width: var(--gallery-card-width) !important;
    height: 62svh !important;
  }

  .scene-heading h2 {
    font-size: clamp(42px, 14vw, 64px);
  }

  .project-reel__slide img,
  .project-reel__slide--portrait img {
    max-width: calc(100vw - 24px);
    max-height: 72svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-scene {
    height: auto;
    min-height: 0;
  }

  .scene-pin {
    position: relative;
    height: auto;
    min-height: 100svh;
  }

  .scene-gallery {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    width: auto;
    height: auto;
    padding: 170px 20px 72px;
    transform: none !important;
  }

  .scene-gallery .scene-frame,
  .scene-bex__track.scene-gallery .scene-frame,
  .scene-gallery--biduo .scene-biduo__campaign {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    opacity: 1 !important;
  }
}

/* Final cascade for the scroll-directed project stages. */
.project-reel {
  height: calc((var(--frames) * .9 + 1) * 100svh);
  min-height: 260svh;
}

.project-reel__slides {
  perspective: 1800px;
  transform-style: preserve-3d;
}

.project-reel__slide,
.reel-ready .project-reel__slide {
  overflow: visible;
  opacity: var(--slide-opacity, 0);
  clip-path: var(--slide-clip, inset(0 round 2px));
  transform:
    translate3d(
      calc(var(--slide-x, 0vw) + var(--pointer-x, 0px)),
      calc(var(--slide-y, 0vh) + var(--pointer-y, 0px)),
      var(--slide-z, 0px)
    )
    rotateX(var(--slide-rx, 0deg))
    rotateY(var(--slide-ry, 0deg))
    scale(var(--slide-scale, 1));
  transform-origin: 50% 50%;
  filter: none;
  backface-visibility: hidden;
  will-change: transform, opacity, clip-path;
}

.project-reel__slide img,
.project-reel__slide--portrait img {
  max-width: min(92vw, 1760px);
  max-height: 74svh;
  clip-path: inset(2px);
  object-fit: contain;
}

.project-reel--bex .project-reel__slide img {
  max-width: min(94vw, 1820px);
  max-height: 75svh;
}

.project-reel__ambient {
  opacity: .72;
  transform: translate3d(calc(var(--ambient-x, 0px) * .45), calc(var(--ambient-y, 0px) * .45), 0) scale(1.035);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.project-reel--lihoo .project-reel__ambient {
  filter: saturate(.82) contrast(1.08);
}

.project-reel--biduo .project-reel__ambient {
  filter: none;
}

.project-reel__stage::after {
  box-shadow: none;
}

@media (max-width: 900px) {
  .project-reel {
    height: calc((var(--frames) * .72 + 1) * 100svh);
  }

  .project-reel__slide img,
  .project-reel__slide--portrait img {
    max-width: calc(100vw - 30px);
    max-height: 69svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-reel {
    height: auto;
    min-height: 0;
  }

  .project-reel__stage {
    position: relative;
    height: auto;
    min-height: 100svh;
    padding: 110px 5vw 90px;
  }

  .project-reel__slides {
    position: relative;
    display: grid;
    gap: 28px;
  }

  .project-reel__slide,
  .project-reel__slide:first-child,
  .reel-ready .project-reel__slide {
    position: relative;
    inset: auto;
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}

/* Final motion override. Keep this block last. */
.project-reel { height: calc((var(--frames) * 1.02 + 1) * 100svh); }

.project-reel__stage {
  --edge-pad: clamp(28px, 4.8vw, 92px);
  perspective: 2200px;
}

.project-reel__meta {
  top: clamp(24px, 3.5vh, 44px);
  left: var(--edge-pad);
  right: var(--edge-pad);
}

.project-reel__slides { z-index: 5; perspective: 2200px; }

.project-reel__slide,
.reel-ready .project-reel__slide {
  inset: clamp(72px, 8vh, 92px) clamp(22px, 3.2vw, 60px) clamp(58px, 7vh, 78px);
  overflow: visible;
  opacity: var(--slide-opacity, 0);
  clip-path: var(--slide-clip, inset(0));
  transform: translate3d(calc(var(--slide-x, 0vw) + var(--pointer-x, 0px)), calc(var(--slide-y, 0vh) + var(--pointer-y, 0px)), var(--slide-z, 0px)) rotateX(var(--slide-rx, 0deg)) rotateY(var(--slide-ry, 0deg)) rotateZ(var(--slide-rz, 0deg)) scale(var(--slide-scale, 1));
  filter: blur(var(--slide-blur, 0px));
  transform-origin: 50% 50%;
}

.project-reel__slide img,
.project-reel__slide--portrait img {
  width: auto;
  height: auto;
  max-width: min(92vw, 1760px);
  max-height: 78svh;
  object-fit: contain;
  clip-path: inset(1px);
}

.project-reel__progress {
  left: var(--edge-pad);
  right: var(--edge-pad);
  bottom: clamp(24px, 3.5vh, 44px);
  height: 1px;
}

.project-reel__ambient {
  inset: -4%;
  opacity: .86;
  transform: translate3d(var(--ambient-x, 0), var(--ambient-y, 0), 0) scale(1.08);
}

.project-reel--lihoo .project-reel__stage { background: #020b06; }
.project-reel--lihoo .project-reel__ambient {
  background: linear-gradient(180deg, rgba(0, 10, 5, .42), rgba(0, 8, 4, .88)), url("./assets/cases/lihoo-opening.webp") center / cover no-repeat;
  filter: saturate(.88) contrast(1.08);
}
.project-reel--lihoo .project-reel__stage::before {
  z-index: 2;
  inset: 8vh 18vw;
  border: 1px solid rgba(199, 236, 164, .22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 246, 173, .14) 0 1%, transparent 2% 45%, rgba(149, 206, 105, .1) 46% 47%, transparent 48% 100%);
  opacity: var(--portal-energy, .25);
  transform: scale(var(--portal-scale, .82)) rotate(var(--portal-rotate, 0deg));
  box-shadow: 0 0 150px rgba(116, 187, 82, .18), inset 0 0 90px rgba(173, 223, 133, .08);
}
.project-reel--lihoo .project-reel__stage::after {
  content: "LIHOO";
  z-index: 1;
  inset: auto -1vw -2vh;
  color: rgba(204, 232, 184, .065);
  font-size: clamp(180px, 30vw, 570px);
  font-weight: 700;
  line-height: .72;
  letter-spacing: -.08em;
}

.project-reel--nabo .project-reel__stage { background: #b80e18; }
.project-reel--nabo .project-reel__ambient {
  background: radial-gradient(circle at 50% 45%, rgba(255, 128, 99, .34), transparent 34%), linear-gradient(135deg, #e52a32 0%, #ae0712 58%, #6f0008 100%);
  filter: none;
}
.project-reel--nabo .project-reel__stage::before {
  z-index: 2;
  inset: 7vh 5vw 5vh;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(90deg, rgba(94, 0, 7, .96) 0 var(--door-left, 0%), transparent var(--door-left, 0%) calc(100% - var(--door-right, 0%)), rgba(94, 0, 7, .96) calc(100% - var(--door-right, 0%)) 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .025), 0 30px 100px rgba(66, 0, 5, .34);
}
.project-reel--nabo .project-reel__stage::after {
  content: "NABO / RETAIL IDENTITY";
  z-index: 1;
  inset: auto 3vw -2vh;
  color: rgba(255, 255, 255, .075);
  font-size: clamp(100px, 16vw, 310px);
  font-weight: 760;
  line-height: .78;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.project-reel--nabo .project-reel__slide img { max-width: min(90vw, 1700px); max-height: 77svh; }

.project-reel--bex .project-reel__stage { background: #090706; }
.project-reel--bex .project-reel__ambient {
  background: radial-gradient(circle at var(--bex-glow-x, 34%) 48%, rgba(255, 83, 20, .46), transparent 26%), linear-gradient(120deg, #070605 0%, #160904 52%, #050403 100%);
  filter: none;
}
.project-reel--bex .project-reel__stage::before {
  z-index: 2;
  inset: auto 5vw 8vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 96, 31, .9), transparent);
  opacity: .65;
  box-shadow: 0 0 34px rgba(255, 79, 15, .72);
}
.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  z-index: 1;
  inset: -3vh auto auto 1.5vw;
  color: rgba(255, 91, 25, .09);
  font-size: clamp(260px, 42vw, 790px);
  font-weight: 820;
  line-height: .78;
  letter-spacing: -.08em;
}
.project-reel--bex .project-reel__slide img { width: min(94vw, 1820px); max-width: none; max-height: 79svh; object-fit: contain; }

.project-reel--biduo .project-reel__stage { background: #001109; }
.project-reel--biduo .project-reel__ambient {
  background: radial-gradient(circle at 50% 48%, rgba(24, 213, 112, .2), transparent 33%), linear-gradient(135deg, #00190d, #020705 72%);
  filter: none;
}
.project-reel--biduo .project-reel__stage::before {
  z-index: 2;
  inset: 9vh 28vw 7vh;
  border: 1px solid rgba(79, 255, 158, .16);
  background: linear-gradient(rgba(80, 255, 160, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 255, 160, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: var(--poster-grid-alpha, .5);
  transform: perspective(900px) rotateX(58deg) translateY(24%) scale(1.4);
  transform-origin: center bottom;
}
.project-reel--biduo .project-reel__stage::after {
  content: "CAMPAIGN POSTERS";
  z-index: 1;
  inset: auto 1vw -1vh;
  color: rgba(72, 255, 153, .07);
  font-size: clamp(92px, 13vw, 250px);
  font-weight: 760;
  line-height: .8;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.project-reel--biduo .project-reel__slide--poster img {
  width: auto;
  height: min(79svh, 890px);
  max-width: 62vw;
  max-height: 79svh;
  aspect-ratio: 500 / 890;
  object-fit: contain;
  clip-path: inset(1px);
}

@media (max-width: 900px) {
  .project-reel { height: calc((var(--frames) * .82 + 1) * 100svh); }
  .project-reel__slide, .reel-ready .project-reel__slide { inset: 76px 12px 60px; }
  .project-reel__slide img,
  .project-reel--nabo .project-reel__slide img,
  .project-reel--bex .project-reel__slide img { width: auto; max-width: calc(100vw - 24px); max-height: 72svh; }
  .project-reel--biduo .project-reel__slide--poster img { height: 72svh; max-width: 82vw; max-height: 72svh; }
}

/* BEX SNAP FINAL OVERRIDE: one complete artwork, one wheel gesture, one stop. */
.project--bex > .project-scene {
  display: none;
}

.project-reel--bex {
  height: calc(var(--frames) * 100svh);
  min-height: 1600svh;
}

.project-reel--bex .project-reel__stage {
  isolation: isolate;
  perspective: none;
  background: #050403;
}

.project-reel--bex .project-reel__stage::before {
  display: none;
}

.project-reel--bex .project-reel__stage::after {
  content: "BEX";
  z-index: 1;
  inset: -3vh auto auto 1.5vw;
  color: rgba(255, 91, 22, .055);
  font-size: clamp(260px, 42vw, 790px);
  font-weight: 820;
  line-height: .78;
  letter-spacing: -.08em;
  box-shadow: none;
}

.project-reel--bex .project-reel__ambient {
  inset: 0;
  opacity: 1;
  filter: none;
  transform: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(116, 33, 9, .18), transparent 42%),
    linear-gradient(180deg, #0b0806, #030303 76%);
}

.project-reel--bex .project-reel__slides {
  z-index: 5;
  perspective: none;
  transform-style: flat;
}

.project-reel--bex .project-reel__slide,
.reel-ready .project-reel--bex .project-reel__slide {
  inset: clamp(72px, 7vh, 92px) clamp(42px, 3.2vw, 64px) clamp(58px, 6vh, 76px);
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: var(--slide-opacity, 0);
  clip-path: none;
  filter: none;
  transform: none;
  transition: opacity 100ms linear;
  transition-delay: 0ms;
  will-change: opacity;
}

.project-reel--bex .project-reel__slide.is-active {
  transition-delay: 110ms;
}

.project-reel--bex .project-reel__slide img,
.project-reel--bex .project-reel__slide--portrait img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - clamp(84px, 6.4vw, 128px));
  max-height: calc(100svh - clamp(130px, 13vh, 168px));
  object-fit: contain;
  clip-path: none;
  transform: none;
  background: transparent;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .58);
}

.project-reel--bex .project-reel__meta,
.project-reel--bex .project-reel__progress {
  z-index: 12;
}

@media (max-width: 760px) {
  .project-reel--bex .project-reel__slide,
  .reel-ready .project-reel--bex .project-reel__slide {
    inset: 70px 12px 58px;
  }

  .project-reel--bex .project-reel__slide img,
  .project-reel--bex .project-reel__slide--portrait img {
    max-width: calc(100vw - 24px);
    max-height: calc(100svh - 128px);
  }
}