/*
 * Cuberto-inspired components — independent recreation for this demo.
 * References: https://cuberto.com/ and the user's two screenshots.
 * All component selectors use the cbx- prefix. No framework or web font required.
 */
:root {
  --cbx-header-height: clamp(76px, 4.94vw, 102px);
  --cbx-header-inset: 7.5%;
  --cbx-nav-size: clamp(17px, 1.27vw, 26px);
  --cbx-nav-gap: clamp(30px, 2.55vw, 54px);
  --cbx-gallery-inset: 9.1%;
  --cbx-gallery-width: 75.4%;
  --cbx-gallery-gap: 8.4vw;
  --cbx-card-radius: clamp(18px, 1.46vw, 32px);
  --cbx-stagger: 9.7vw;
  --cbx-cursor-size: clamp(78px, 5.37vw, 112px);
  --cbx-image-hover-scale: 1.035; /* Set to 1 to disable image zoom. */
  --cbx-ease-out: cubic-bezier(.19, 1, .22, 1);
  --cbx-font: Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

.cbx-header, .cbx-header *, .cbx-projects, .cbx-projects *, .cbx-cursor * {
  box-sizing: border-box;
}
.cbx-header a, .cbx-projects a { color: inherit; text-decoration: none; }
.cbx-header button, .cbx-header a { -webkit-tap-highlight-color: transparent; }
.cbx-header [hidden] { display: none !important; }

/* 01 / Header — white surface, wordmark, four links, black capsule. */
.cbx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--cbx-header-height);
  color: #000;
  background: #fff;
  font-family: var(--cbx-font);
}
.cbx-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  margin-inline: var(--cbx-header-inset);
  gap: var(--cbx-nav-gap);
}
.cbx-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.cbx-brand img {
  display: block;
  width: clamp(120px, 7.15vw, 148px);
  height: auto;
}
.cbx-nav {
  display: flex;
  align-items: center;
  gap: var(--cbx-nav-gap);
  margin-left: auto;
}
.cbx-nav__link {
  display: inline-flex;
  align-items: center;
  padding-block: 12px;
  font-size: var(--cbx-nav-size);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}
.cbx-roll { display: block; position: relative; overflow: hidden; }
.cbx-roll__first, .cbx-roll__second {
  display: block;
  transition: transform .65s var(--cbx-ease-out);
}
.cbx-roll__second { position: absolute; inset: 0; transform: translateY(115%); }
.cbx-header__actions { display: flex; align-items: center; flex-shrink: 0; gap: 12px; }
.cbx-contact {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  height: clamp(52px, 3.62vw, 76px);
  padding-inline: clamp(25px, 1.7vw, 36px);
  border: 1px solid #000;
  border-radius: 999px;
  background: #000;
  color: #fff !important;
  font-size: var(--cbx-nav-size);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  transform: translate3d(var(--cbx-magnet-x, 0px), var(--cbx-magnet-y, 0px), 0);
  transition: transform .5s var(--cbx-ease-out);
}
.cbx-contact::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: #fff;
  transform: translateY(103%);
  transition: transform .55s var(--cbx-ease-out);
}
.cbx-contact__label { position: relative; transition: color .28s; }
.cbx-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #dedede;
  border-radius: 50%;
  background: #fff;
  color: #000;
}
.cbx-menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s;
}
.cbx-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.cbx-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.cbx-header a:focus-visible, .cbx-menu-toggle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 7px;
  border-radius: 4px;
}
.cbx-contact:focus-visible { border-radius: 999px !important; }

/* 03 / Cursor — the white disk inverts the ACTUAL image under it.
 * IMPORTANT: the arrow is BLACK inside the white disk, and both are in the
 * same difference-blending layer. This reproduces the screenshot's cutout.
 * Do not replace this with an opaque black disk + white arrow.
 * Mount this node directly under <body>, not inside an isolated/filtered card.
 */
.cbx-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  width: 0;
  height: 0;
  color: #000;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .15s ease;
  will-change: transform;
  --cbx-cursor-scale: .09;
  --cbx-cursor-press: 1;
}
.cbx-cursor.is-visible { opacity: 1; }
.cbx-cursor.is-link { --cbx-cursor-scale: .29; }
.cbx-cursor.is-project { --cbx-cursor-scale: 1; }
.cbx-cursor.is-pressed { --cbx-cursor-press: .86; }
.cbx-cursor__stretch {
  width: var(--cbx-cursor-size);
  height: var(--cbx-cursor-size);
  position: absolute;
  left: calc(var(--cbx-cursor-size) * -.5);
  top: calc(var(--cbx-cursor-size) * -.5);
  will-change: transform;
}
.cbx-cursor__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transform: scale(calc(var(--cbx-cursor-scale) * var(--cbx-cursor-press)));
  transition: transform .55s var(--cbx-ease-out);
}
.cbx-cursor__arrow {
  width: 40%;
  height: 40%;
  color: #000;
  opacity: 0;
  transform: translate(-3px, 3px) scale(.7);
  transition: opacity .15s ease, transform .45s var(--cbx-ease-out);
}
.cbx-cursor.is-project .cbx-cursor__arrow { opacity: 1; transform: translate(0, 0) scale(1); }

@media (hover: hover) and (pointer: fine) {
  html.cbx-cursor-enabled [data-cbx-cursor-scope],
  html.cbx-cursor-enabled [data-cbx-cursor-scope] * { cursor: none !important; }
  .cbx-nav__link:hover .cbx-roll__first { transform: translateY(-115%); }
  .cbx-nav__link:hover .cbx-roll__second { transform: translateY(0); }
  .cbx-contact:hover::before { transform: translateY(0); }
  .cbx-contact:hover .cbx-contact__label { color: #000; }
  .cbx-project__media:hover .cbx-project__image { transform: scale(var(--cbx-image-hover-scale)); }
}

@media (min-width: 2200px) {
  .cbx-projects__grid { max-width: 1690px; margin-inline: auto; gap: 180px; }
  .cbx-header__inner { max-width: 1870px; margin-inline: auto; }
  .cbx-project:nth-child(even) { padding-top: 210px; }
}
@media (max-width: 1000px) {
  :root {
    --cbx-header-inset: 5%;
    --cbx-gallery-inset: 6%;
    --cbx-gallery-width: 88%;
    --cbx-gallery-gap: 6vw;
    --cbx-nav-gap: 24px;
  }
}
@media (max-width: 760px) {
  :root {
    --cbx-header-height: 76px;
    --cbx-header-inset: 24px;
    --cbx-gallery-inset: 24px;
    --cbx-gallery-width: calc(100% - 48px);
    --cbx-nav-size: 16px;
    --cbx-card-radius: 20px;
  }
  .cbx-header__inner { justify-content: space-between; gap: 12px; }
  .cbx-brand img { width: 110px; }
  .cbx-header__actions { margin-left: auto; gap: 10px; }
  .cbx-contact { height: 44px; padding-inline: 18px; font-size: 14px; }
  .cbx-menu-toggle { display: flex; }
  .cbx-nav {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    margin: 0;
    padding: 20px 24px 27px;
    border-top: 1px solid #eee;
    background: #fff;
  }
  .cbx-nav__link { min-height: 48px; padding-block: 10px; font-size: 19px; }
  .cbx-projects { padding-top: 30px; padding-bottom: 64px; }
  .cbx-projects__grid { grid-template-columns: 1fr; gap: 44px; }
  .cbx-project:nth-child(even) { padding-top: 0; }
  .cbx-project__caption { margin-top: 21px; font-size: 17px; line-height: 1.55; }
}
@media (max-width: 360px) {
  :root { --cbx-header-inset: 18px; --cbx-gallery-inset: 18px; --cbx-gallery-width: calc(100% - 36px); }
  .cbx-brand img { width: 98px; }
  .cbx-contact { padding-inline: 13px; }
  .cbx-header__actions { gap: 8px; }
}
@media (hover: none), (pointer: coarse) {
  .cbx-cursor { display: none !important; }
  .cbx-project__touch-arrow { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .cbx-header *, .cbx-projects *, .cbx-cursor * { transition-duration: .001ms !important; }
  .cbx-project__image, .cbx-contact { transform: none !important; }
}
@media (forced-colors: active) {
  .cbx-cursor { display: none !important; }
  html.cbx-cursor-enabled [data-cbx-cursor-scope],
  html.cbx-cursor-enabled [data-cbx-cursor-scope] * { cursor: auto !important; }
}


/* LINGFEI integration: the journey retains its original viewport and scroll geometry. */
html.lf-cbx-ready { scrollbar-gutter:stable; }
html.lf-cbx-ready .site-header { visibility:hidden!important;opacity:0!important;pointer-events:none!important; }
#lf-nav-v4-root.cbx-header { position:fixed;inset:0 0 auto;width:auto;z-index:980;margin:0;padding:0;border:0;box-shadow:none;letter-spacing:0; }
#lf-nav-v4-root.cbx-header a,#lf-nav-v4-root.cbx-header button { font-family:var(--cbx-font); }
#lf-nav-v4-root .cbx-brand { color:#000; }
.cbx-brand__art { display:block;width:clamp(120px,7.15vw,148px);overflow:hidden; }
#lf-nav-v4-root .cbx-brand__art img { width:116.55011655%;max-width:none;height:auto; }
.cbx-brand__fallback { font:750 24px/1 Arial,sans-serif;letter-spacing:-.06em; }
#lf-nav-v4-root .cbx-nav__link { color:#000;font-weight:400; }
#lf-nav-v4-root .cbx-contact { text-decoration:none; }
#lf-nav-v4-root .cbx-menu-toggle { flex-shrink:0;cursor:pointer; }
.cbx-nav__link:focus-visible .cbx-roll__first { transform:translateY(-115%); }
.cbx-nav__link:focus-visible .cbx-roll__second { transform:translateY(0); }
.cbx-contact:focus-visible::before { transform:translateY(0); }
.cbx-contact:focus-visible .cbx-contact__label { color:#000; }
/* Replace the old lift/bounce with the reference's gentle image-only zoom. */
.lf8 .lf-card-layer:not(.lf-is-moving) .lf-card-pos.lf-is-hovered .lf-card-surface,
.lf8 .lf-card-layer:not(.lf-is-moving) .lf-card-pos:focus-within .lf-card-surface { transform:none!important; }
.lf8 .lf-card .cbx-project__image,#lf5-module .poster .cbx-project__image {
 transform:scale(1);transition:transform 1.1s var(--cbx-ease-out);transform-origin:center;user-select:none;-webkit-user-drag:none;
}
.lf8 .lf-card:disabled .cbx-project__image { transform:scale(1)!important; }
@media (hover:hover) and (pointer:fine) {
 .lf8 .lf-card.cbx-project__media:not(:disabled):hover .cbx-project__image,
 #lf5-module .cbx-project__media:hover .cbx-project__image { transform:scale(var(--cbx-image-hover-scale)); }
}
.cbx-project__touch-arrow { display:none;position:absolute;right:18px;bottom:18px;width:45px;height:45px;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#000;mix-blend-mode:difference;pointer-events:none;z-index:5; }
.cbx-project__touch-arrow svg { width:18px;height:18px; }
.lf8 .cbx-project__touch-arrow { top:16px;right:14px;bottom:auto;width:36px;height:36px; }
/* Keep original section labels readable below the new persistent white header. */
html[data-lf-reference-copy="six"] #root .finale-kicker { top:max(3.8%,calc(var(--cbx-header-height) + 20px))!important; }
#lf5-module .motion .header { top:calc(var(--cbx-header-height) + 24px)!important; }
#lf5-module .static .viewport { padding-top:calc(var(--cbx-header-height) + 24px); }
#gallery { scroll-margin-top:0; }
@media (max-width:760px) {
 .cbx-brand__art { width:110px; }
 #lf-nav-v4-root .cbx-nav { max-height:calc(100svh - var(--cbx-header-height));overflow:auto;overscroll-behavior:contain; }
 #lf5-module .motion .header { top:calc(var(--cbx-header-height) + 16px)!important; }
}
@media (max-width:360px) { .cbx-brand__art { width:98px; } }
@media (hover:none),(pointer:coarse) { .cbx-project__touch-arrow { display:flex; } }
@media (prefers-reduced-motion:reduce) {
 .lf8 .lf-card .cbx-project__image,#lf5-module .poster .cbx-project__image { transition:none!important;transform:none!important; }
}