/* ZOOM "200+" — the number is a window cut into a white veil; scroll flies through the "+" onto the show floor */
.zoom{position:relative;background:#fff}
.zoom-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.zoom-stage{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--ink);isolation:isolate}

.zoom-photo{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.zoom-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.zoom-shade{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,16,32,.78) 0%,rgba(11,16,32,.45) 48%,rgba(11,16,32,.12) 100%),
    linear-gradient(180deg,rgba(5,7,11,.08) 38%,rgba(5,7,11,.94) 100%)}

.zoom-mask{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.zoom-mask text{font-family:var(--display);font-weight:600}
/* LCP (JPC SEO review L1): the veil + "200+" stays unpainted until zoom.js has laid it out and the section is
   about to scroll in (.zoom-ready), so the giant glyph is not painted during load. Same frame once it shows. */
html.js .zoom-stage:not(.zoom-ready) .zoom-mask{visibility:hidden}

.zoom-top{position:absolute;left:0;right:0;top:118px;display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:var(--max);margin:0 auto;padding:0 var(--gut);color:var(--ink-2);pointer-events:none}
.zoom-cap{position:absolute;left:var(--gut);right:var(--gut);top:calc(50% - 34px + var(--zfs,300px) * .36 + 32px);text-align:center;font-size:clamp(16px,1.35vw,20px);font-weight:500;letter-spacing:-.01em;color:var(--ink-2);pointer-events:none}
.zoom-hint{position:absolute;left:50%;bottom:clamp(28px,5vh,48px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--ink-3);white-space:nowrap;pointer-events:none}
.zoom-hint i{display:block;width:1px;height:44px;background:linear-gradient(var(--ink-3),transparent);transform-origin:top;animation:zhint 2.2s var(--ease) infinite}
@keyframes zhint{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.zoom-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(36px,7vh,72px);max-width:var(--max);margin:0 auto;padding:130px var(--gut) clamp(32px,6vh,56px);color:#fff;pointer-events:none}
.zoom-lines{font-size:clamp(40px,6.2vw,100px)}
@media (min-width:901px){.zoom-lines .zl{white-space:nowrap}.zbr{display:none}}
.zoom-lines .zl{line-height:1;overflow:hidden;padding:.02em 0 .1em;margin-bottom:-.08em}
.zoom-lines .zl span{display:inline-block;transform:translateY(110%)}
.zoom-lines .zl em{font-style:normal;color:#FF4FA8}

.zoom-proof{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px;padding-top:26px;opacity:0}
.zoom-rule{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.34);transform-origin:left}
.zoom-proof > div{padding:0 24px;border-left:1px solid rgba(255,255,255,.16)}
.zoom-proof > div:first-of-type{padding-left:0;border-left:0}
.zoom-proof .n{font-family:var(--display);font-weight:600;font-size:clamp(36px,3.6vw,60px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.zoom-proof .mono{display:block;margin-top:12px;color:rgba(255,255,255,.72)}

@media (max-width:900px){
  .zoom-top{top:100px}
  .zoom-copy{padding-top:96px;gap:28px;justify-content:flex-start}
  /* margin-top:auto = bottom-aligned while it fits, but never grows up under the fixed nav when the
     lines run long (translated / larger text); also cap the size by height for short phones */
  .zoom-lines{margin-top:auto;font-size:clamp(30px,min(10.6vw,5.6svh),64px)}
  .zoom-proof{padding-top:22px}
  .zoom-proof > div{padding:0 12px}
  .zoom-proof .n{font-size:32px}
  .zoom-proof .mono{font-size:10.5px;letter-spacing:.12em;margin-top:8px}
}

/* Before JS / reduced motion: the finished frame, static and readable */
html:not(.js) .zoom-mask,html:not(.js) .zoom-top,html:not(.js) .zoom-cap,html:not(.js) .zoom-hint{display:none}
html:not(.js) .zoom-shade,html:not(.js) .zoom-proof{opacity:1}
html:not(.js) .zoom-lines .zl span{transform:none}
@media (prefers-reduced-motion:reduce){
  .zoom-mask,.zoom-top,.zoom-cap,.zoom-hint{display:none}
  .zoom-shade,.zoom-proof{opacity:1}
  .zoom-lines .zl span{transform:none}
  .zoom-hint i{animation:none}
}