/* ═══════════════════════════════════════════════════════════════
   motion.css — motion-design pass (loaded AFTER index.css)
   Every rule here is additive; see MOTION-CHANGES.md for the log.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════ V3 HERO ═══════════════ */
/* the building is now the centrepiece: crisp, warm brass, fully present */
.backdrop-layer {
  -webkit-mask-image: radial-gradient(130% 100% at 50% 60%, #000 62%, transparent 100%);
          mask-image: radial-gradient(130% 100% at 50% 60%, #000 62%, transparent 100%);
}
.backdrop-layer.is-dark { filter: sepia(.78) saturate(1.55) hue-rotate(-12deg) contrast(1.02); }
/* V5 — the Lab's plate: the engraving inverted (pale lines) and turned to
   oxidised-brass verdigris, so it reads as a blueprint on the green ground */
.backdrop-layer.is-blue { filter: invert(1) sepia(.6) saturate(.7) hue-rotate(88deg) brightness(.9) contrast(.95); opacity: .9; }

/* the geometric field — fixed, under the building, over the wash */
.field {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  pointer-events: none; will-change: transform, opacity;
}
.field-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* no construction lines behind the type column: fade them in from 26% to 44% */
  -webkit-mask-image: linear-gradient(90deg, transparent 0 26%, #000 44%);
          mask-image: linear-gradient(90deg, transparent 0 26%, #000 44%);
}
@media (max-width: 859px) { .field-lines { -webkit-mask-image: none; mask-image: none; opacity: .6; } }
.fshape {
  position: absolute; mix-blend-mode: multiply;
  will-change: transform; backface-visibility: hidden;
}
/* paper wear: a static turbulence grain multiplied over the whole field */
.field-grain {
  position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .36  0 0 0 0 .30  0 0 0 .55 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}

/* the type column: three-line name, narrow enough to clear the building */
@media (min-width: 860px) {
  /* in from the edge; centred between the nav band and the ground's surface */
  .hero-inner { padding: 96px 2rem 26vh 6vw; }
  .hero-copy { max-width: min(32rem, 31vw); }
}
.eyebrow { margin-bottom: 1.6rem; }
/* V3.3: "Zhimin Barbara" on one line, "Zhang" on the next */
.hero-title { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; margin-bottom: 1.4rem; text-wrap: initial; }
.hero-title .t-2 { margin-left: .04em; }
.hero-desc { font-size: clamp(15px, 1.35vw, 18px); line-height: 1.6; max-width: 24rem; min-height: 4.8em; margin-bottom: 2.2rem; }
.hero .eyebrow { color: var(--terra-deep); font-size: 13px; letter-spacing: .2em; }   /* 4.6:1 on the paper */
.hero .btn { font-size: 16px; }
.actions { gap: .9rem; }

/* V3.1 — the smoke canvas is a fixed layer under the building */
.scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }   /* after .backdrop in the DOM → above it */
/* ═══════════════ PROJECTS — owner's lock-ins ═══════════════
   The watch's small gear and the microscope turrets stay still on hover; only
   the hands, the press flywheel and the lens discs move. */
.pcard:hover .pcard-part.is-static,
.pcard:focus-visible .pcard-part.is-static { animation: none; }

/* ═══════════════ V5 — three chapters, one building ═══════════════ */
/* hero copy sits on the engraving: a soft paper halo keeps the type on paper */
.hero-copy { position: relative; isolation: isolate; }
/* V5.1: a uniform translucent pane (80% paper) with soft blurred edges,
   instead of a radial blob that showed its shape when the hero scrolled */
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -6% -9% -8% -8%;
  background: rgba(246,236,219,.20); border-radius: 28px;   /* V5.4: 20% to try */
  filter: blur(14px);
  pointer-events: none;
}
/* the Lab is now a dark chapter on verdigris, transparent like Projects so
   the fixed blueprint shows through; cream cards pin onto the drawing */
.section-lab { background: transparent; overflow: visible; color: #faf3e4; }
.section-lab h2 { color: #faf3e4; }
.section-lab .eyebrow { color: #f3c4a6; }
.section-lab .section-lead { color: #efe6d3; }
.section-lab .lcard { box-shadow: 0 12px 34px rgba(8,20,18,.35); }
.section-lab .lcard:hover, .section-lab .lcard:focus-visible { box-shadow: 0 26px 54px rgba(8,20,18,.5); }

/* ═══════════════ V5.1 — the Lab's own machine ═══════════════ */
.backdrop-inner > svg.lab-hands { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lab-hands .hand { fill: #ddd6c2; transform-box: view-box; transform-origin: 0 0;
                   transform: translate(var(--hub-x), var(--hub-y)) rotate(var(--a)); }
.lab-hands .boss { fill: #ddd6c2; transform-box: view-box; transform-origin: 0 0; }
.lab-hands .hand.hour   { animation: handspin 720s linear infinite; }
.lab-hands .hand.minute { animation: handspin 60s  linear infinite; }
@keyframes handspin { from { transform: translate(var(--hub-x), var(--hub-y)) rotate(var(--a)); }
                      to   { transform: translate(var(--hub-x), var(--hub-y)) rotate(calc(var(--a) + 360deg)); } }
@media (prefers-reduced-motion: reduce) { .lab-hands .hand { animation: none; } }

/* ═══════════════ V5.3 — footer wears the navbar's dark look ═══════════════ */
.footer {
  background: rgba(56, 42, 30, .84);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top-color: rgba(242, 229, 207, .15);
  color: #cfc2ab;
}
.footer .footer-link, .footer .footer-li, .footer .foot-li { color: #f2e5cf; }
.footer .footer-link:hover, .footer .footer-li:hover, .footer .foot-li:hover { color: #e9b492; }