/* Newest work: the two prospect demos as large device panels. Owner: newest-work agent.
   Markup: source/sections/newwork.py. Contract: docs/portfolio-review-06/BUILD-CONTRACT.md.
   Builds on kinetic.css (.kt, .pill, .tag, .device-phone, .device-browser, .look-paper) and motion.js (--c).
   Motion: .nw-stage and .nw-meta carry data-cam; motion.js sets --c (0 far from centre, 1 centred, 1 with no JS).
   Devices tilt in depth while --c < 1 and flatten at 1. Text rises and tags and pills spring in, 50 ms (3 frames)
   apart, once the text block passes the arrival point. That switch is a step of --c, so each arrival plays as one
   CSS transition. Arrival uses the translate and scale properties, leaving transform to the shared pill hover. */

.newwork{
  --nw-ink:#262725;--nw-muted:#55564F;
  --nw-copper:#AD6B4A;       /* type 24 px and up on paper */
  --nw-copper-sm:#8A4E32;    /* smaller text on paper */
  --nw-stage-light:#E9E3D8;--nw-stage-dark:#1E201D;
  --nw-ease:var(--approach,cubic-bezier(.16,1,.3,1));   /* fast arrival, soft landing */

  --nw-step:50ms;
  padding-bottom:clamp(88px,12vw,168px);
  overflow-x:clip;
}
.newwork .eyebrow{color:var(--nw-copper-sm);margin:0 0 clamp(14px,1.6vw,22px)}

/* Heading: two kinetic lines. On desktop the first line runs off the left edge; "takes shape." stays in frame. */
.nw-head{margin-bottom:clamp(44px,6.5vw,96px)}
.newwork .nw-title{max-width:none}
.newwork .nw-title .kt-line{white-space:nowrap}
/* Below desktop the shared kt-xxl floor (64 px) would push the full stop of "takes shape." past a 390 px screen. */
@media (max-width:999px){.newwork .nw-title{font-size:clamp(40px,14.6vw,150px)}}
@media (min-width:1000px){
  /* Pull the first line past the page edge: the wrap's left offset plus a slice of the first letter. */
  .newwork .nw-title .nw-bleed{margin-left:calc((min(100vw - 2 * var(--gutter), var(--max)) - 100vw) / 2 - .16em)}
}

/* Panels: stacked on phones, two columns on desktop. */
.nw-panels{display:grid;gap:clamp(72px,12vw,104px)}
@media (min-width:1000px){.nw-panels{grid-template-columns:1fr 1fr;gap:clamp(36px,3.4vw,52px);align-items:start}}
.nw-panel{min-width:0}

/* Stage: the coloured ground the devices sit on. */
.nw-stage{
  --nw-t:calc(1 - var(--c, 1));
  position:relative;container-type:inline-size;aspect-ratio:5/4;
  border-radius:clamp(18px,2vw,26px);overflow:hidden;isolation:isolate;
  background:var(--nw-stage-light);
}
.nw-dark .nw-stage{background:var(--nw-stage-dark)}
@media (min-width:700px){.nw-stage{aspect-ratio:16/10}}

/* Devices: dark bezels, soft shadows, sized in stage units (cqi) so the composite scales as one piece. */
.newwork .device-browser{
  position:absolute;border-radius:max(8px,1.7cqi);background:#262725;
  box-shadow:0 2px 6px -2px rgb(38 39 37 / .3),0 40px 70px -34px rgb(38 39 37 / .62);
}
.newwork .device-browser > .dots{height:max(18px,4cqi);padding:0;background:#262725}
.newwork .device-browser > .dots::before{
  left:max(9px,2cqi);width:max(6px,1.25cqi);height:max(6px,1.25cqi);margin-top:min(-3px,-.625cqi);
  background:#5E5F59;box-shadow:max(10px,2.1cqi) 0 #5E5F59,max(20px,4.2cqi) 0 #5E5F59;
}
.newwork .device-phone{
  --bezel:max(4px,1.05cqi);--radius:max(16px,4.6cqi);
  position:absolute;background:#1E201D;
  box-shadow:0 2px 6px -2px rgb(38 39 37 / .35),0 40px 60px -26px rgb(38 39 37 / .7);
}
.newwork .device-phone > img{border-radius:calc(var(--radius) - var(--bezel))}
.nw-dark .device-browser{box-shadow:0 0 0 1px rgb(244 240 232 / .1),0 40px 70px -30px rgb(0 0 0 / .9)}
.nw-dark .device-phone{background:#0E0E0D;box-shadow:0 0 0 1px rgb(244 240 232 / .12),0 40px 60px -26px rgb(0 0 0 / .9)}

/* Composite positions (phone first: bigger devices on a taller stage). */
.newwork .nw-browser{left:4%;top:21%;width:76%;transform-origin:60% 50%;z-index:1}
.newwork .nw-phone{right:4.5%;top:7%;width:32%;transform-origin:50% 60%;z-index:2;--nw-rz:5deg}
.newwork .nw-dark .nw-phone{top:5%;width:30%;--nw-rz:-4deg}
@media (min-width:700px){
  .newwork .nw-browser{left:5%;top:13%;width:70%}
  .newwork .nw-phone{right:5.5%;top:8%;width:24.5%}
  .newwork .nw-dark .nw-phone{top:6%;width:23.5%}
}

/* Depth tilt from the scroll camera: tilted while away from the centre, flat at the centre. */
.newwork .nw-browser{
  --nw-rx:9deg;
  transform:
    translate3d(calc(var(--nw-t) * -4%), calc(var(--nw-t) * 9%), 0)
    perspective(1400px)
    rotateY(calc(var(--nw-t) * 26deg))
    rotateX(calc(var(--nw-t) * var(--nw-rx)))
    rotateZ(calc(var(--nw-t) * -3deg))
    scale(calc(1 - var(--nw-t) * .06));
  will-change:transform;
}
.newwork .nw-dark .nw-browser{--nw-rx:-8deg;top:24%}
@media (min-width:700px){.newwork .nw-dark .nw-browser{top:14%}}
.newwork .nw-phone{
  transform:
    translate3d(calc(var(--nw-t) * 10%), calc(var(--nw-t) * 26%), 0)
    perspective(1000px)
    rotateY(calc(var(--nw-t) * -24deg))
    rotateZ(calc(var(--nw-rz) + var(--nw-t) * 7deg));
  will-change:transform;
}

/* Text block. --nw-on steps from 0 to 1 once the block passes the arrival point (--c about .3). */
.nw-meta{--nw-on:clamp(0, (var(--c, 1) - .3) * 1000, 1);padding-top:clamp(22px,2.4vw,30px)}
.nw-kicker{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0}
.nw-num{font:800 clamp(32px,3.2vw,46px)/.9 var(--kt-font,var(--sans));letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.4px var(--nw-copper);font-variant-numeric:lining-nums}
.nw-label{font:600 12px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--nw-copper-sm)}
.newwork .nw-meta h3{margin:clamp(10px,1.2vw,14px) 0 0;max-width:22ch;font:800 clamp(28px,2.9vw,42px)/1.02 var(--kt-font,var(--sans));letter-spacing:-.035em;color:var(--nw-ink);text-wrap:balance}
.nw-tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin:clamp(16px,1.8vw,22px) 0 0}
.nw-actions{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(18px,1.8vw,22px) 0 0}
/* Labels, not pills (2026-10-03): copper small text on paper; "Live demo" in ink after a copper dot. */
.newwork .tag{color:var(--nw-copper-sm)}
.newwork .tag.solid{background:none;color:var(--nw-ink)}
.newwork .tag.solid::before{background:var(--nw-copper-sm)}
.newwork .pill{padding:0 20px;gap:8px}
.newwork .pill:focus-visible{outline:2px solid var(--nw-copper-sm);outline-offset:3px}

.newwork .nw-close{margin:clamp(56px,7vw,96px) 0 0;max-width:560px;color:var(--nw-muted)}

/* Arrival: text rises with the approach easing; tags and pills spring in, one after another. */
.newwork .nw-rise{
  translate:0 calc((1 - var(--nw-on)) * 30px);
  opacity:var(--nw-on);
  transition:translate .72s var(--nw-ease) calc(var(--k, 0) * var(--nw-step)),opacity .36s linear calc(var(--k, 0) * var(--nw-step));
}
.newwork .nw-k{
  translate:0 calc((1 - var(--nw-on)) * 22px);
  scale:calc(.82 + var(--nw-on) * .18);
  opacity:var(--nw-on);
  transition:
    translate .6s var(--spring) calc(var(--k, 0) * var(--nw-step)),
    scale .6s var(--spring) calc(var(--k, 0) * var(--nw-step)),
    opacity .24s linear calc(var(--k, 0) * var(--nw-step)),
    transform .5s var(--spring),background-color .2s,color .2s,border-color .2s;
}
.newwork .nw-k.tag{transform-origin:0 50%}

/* Motion off, or reduced motion: everything settled and flat, nothing tilts or springs. */
html[data-motion="off"] .newwork [data-cam]{--c:1 !important}
html[data-motion="off"] .newwork .nw-k,html[data-motion="off"] .newwork .nw-rise{transition:none}
@media (prefers-reduced-motion:reduce){
  .newwork [data-cam]{--c:1 !important}
  .newwork .nw-k,.newwork .nw-rise{transition:none}
}
@media print{
  .newwork [data-cam]{--c:1 !important}
  .newwork .nw-k,.newwork .nw-rise{transition:none}
}