/* =============================================
   ZRO PAGE - colour palette and mockups block
   ---------------------------------------------
   Moved over from the Figma build of the Zro page (css/zro-figma.css),
   keeping its alignment and spacing. Everything is scoped to .zp so it
   can't touch the rest of the page.

   Sizes are in --px, the design pixel: exactly 1px from 1440 wide up, so
   type keeps its size while the block spreads across the screen, and
   shrinking in proportion below 1440 so nothing overlaps. Horizontal
   positions are Figma's own calc(P% + Npx).
   ============================================= */

.zp {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  --px: min(1px, calc(100cqw / 1440));
  background: transparent;   /* the page is black anyway; lets the scroll backdrop show */
  /* room between the last piece and the Context section below */
  padding-bottom: calc(var(--pb, 0) * var(--px));
}

/* A row of fixed height: everything in it is placed against its top edge. */
/* Everything here sits on the hero image's edges: it starts at --col and ends
   where the hero ends (--lead from the right). Both are set on .zro. */
.zp .row {
  position: relative;
  height: calc(var(--h) * var(--px));
  margin-top: calc(var(--mt, 0) * var(--px));
  margin-left: var(--col);
  width: calc(100% - var(--col) - var(--lead));
}

.zp .a {
  position: absolute;
  left: var(--l, 0px);
  top: calc(var(--t, 0) * var(--px));
}

/* Neue Haas Grotesk Display 55 Roman (400) and 65 Medium (500). */
.zp .t {
  width: calc(var(--w) * var(--px));
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--fs, 20) * var(--px));
  line-height: 1.2;
  color: #fff;
  word-break: break-word;
}
.zp .t.black { color: #000; }
.zp .t.mid   { font-weight: 500; }

/* Colour swatches: full-width bands whose height is fixed. */
.zp .band { width: var(--wp); height: calc(var(--h) * var(--px)); background: var(--c); }
.zp .palette { list-style: none; margin: 0; padding: 0; }

/* Pieces that stretch with the screen: a percentage of the block's width,
   at the design's aspect ratio. */
.zp .fl {
  position: relative;
  margin-left: var(--col);
  margin-top: calc(var(--mt, 0) * var(--px));
  width: calc(100% - var(--col) - var(--lead));
  aspect-ratio: var(--w) / var(--h);
}
.zp .fl img, .zp .fl video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* The gradient and the close-up sit side by side, and the pair is as tall
   as the gradient. The symbol sits over the gradient at the design's spot. */
/* The pair spans the hero's width; its two halves keep the design's proportions
   (588 and 586 wide with 50 between, out of 1224). */
.zp .pair {
  position: relative;
  margin-top: calc(var(--mt, 0) * var(--px));
  margin-left: var(--col);
  width: calc(100% - var(--col) - var(--lead));
}
.zp .grad-hero {
  position: relative;
  width: calc((100% - 7 * var(--px)) / 2);   /* the gap between the two = the 7 above them, in the same unit */
  aspect-ratio: 588 / 532;
  background-image: linear-gradient(180deg, rgb(217,217,217) 0%, rgb(176,192,199) 37.981%, rgb(89,103,110) 76.442%, rgb(66,73,76) 100%);
}
.zp .pair-photo {
  position: absolute;
  left: calc((100% + 7 * var(--px)) / 2);
  top: 0;                                  /* level with the panel beside it */
  width: calc((100% - 7 * var(--px)) / 2);
  height: 100%;                            /* exactly as tall as the panel, so both share top and bottom edges */
  overflow: hidden;
}
.zp .pair-photo img {
  position: absolute;
  display: block;
  height: 100%;
  width: 120.71%;
  left: -10.85%;
  top: 0;
  max-width: none;
  object-fit: fill;
}
.zp .pair-logo {
  position: absolute;
  left: 40.4762%;
  top: 38.9098%;
  width: 21.5629%;                       /* 126.79 of the gradient's 588 */
  aspect-ratio: 126.79 / 113.32;
}
.zp .pair-logo img { display: block; width: 100%; height: 100%; }

/* ---------- narrow screens: stack it ---------- */

@media (max-width: 820px) {
  .zp { --px: 1px; padding: 0 6% 40px; }   /* the same 6% side margins as the hero and the text */
  .zp .row, .zp .pair { height: auto; margin-left: 0; width: auto; margin-bottom: 20px; }
  .zp .a { position: static; }
  .zp .t { width: auto; font-size: clamp(11px, calc(var(--fs, 20) * 0.8px), 30px); margin: 0; }
  .zp .band { display: none; }
  .zp .palette li {
    background: var(--c);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 16px;
    align-items: baseline;
  }
  /* name | RGB, HEX labels | their values (child 1 is the hidden band) */
  .zp .palette li > :nth-child(2) { grid-column: 1; grid-row: 1 / span 2; }
  .zp .palette li > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .zp .palette li > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .zp .palette li > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .zp .palette li > :nth-child(6) { grid-column: 3; grid-row: 2; }
  .zp .fl { margin: 0 0 20px; width: 100%; }
  .zp .grad-hero { margin: 0 0 20px; width: 100%; }
  .zp .pair-photo { position: relative; left: auto; top: auto; width: 100%; margin-bottom: 20px; }
  .zp .pair-logo { display: none; }
}

/* =============================================
   SPLIT (project-zro.html, after the aperture paragraph)
   A full-screen black stage. One cool-gray block sits in the middle; the
   palette colours slide out from behind it into a column, which then open to
   the full width. Each band is the same size as the block.
   ============================================= */
.zsplit {
  --band-h: calc(9.5 * var(--sh, 1vh));
  --gap: max(2px, calc(0.3 * var(--sh, 1vh)));
  position: relative;
  width: 100vw;                    /* exact width set by the script */
  height: calc(100 * var(--sh, 1vh));
  margin-top: calc(240 * var(--px, 1px));   /* left edge set by the script */
  background: #000;
  overflow: hidden;
}
.zsplit-stage { position: absolute; inset: 0; }
.zsplit-seed,
.zsplit-band {
  position: absolute;
  height: var(--band-h);
  will-change: transform, opacity;
}
.zsplit-seed {
  left: 50%;
  top: 50%;
  width: calc(var(--band-h) * 1.7);
  margin: calc(var(--band-h) / -2) 0 0 calc(var(--band-h) * -0.85);
  background: #bfccd7;
}
.zsplit-band {
  left: 0;
  width: 100%;
  /* cool gray (--i:3) sits where the block was; darker above, lighter below */
  top: calc(50% - var(--band-h) / 2 + (var(--i) - 3) * (var(--band-h) + var(--gap)));
}
.zsplit-band > i {
  position: absolute;
  inset: 0;
  background: var(--c);
  opacity: 0;
  will-change: transform, opacity;
}
.zsplit.is-static .zsplit-seed { display: none; }
.zsplit.is-static .zsplit-full { opacity: 1; }
/* Labels, laid out like the palette at the bottom of the page */
.zsplit-band > span {
  position: absolute;
  top: calc(var(--band-h) * 0.12);
  z-index: 1;
  color: #000;
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: calc(var(--band-h) * 0.16);
  line-height: 1.15;
  opacity: 0;
  will-change: transform, opacity;
}
.zsplit-band.is-dark > span { color: #fff; }
.zsplit-name { left: 10.125%; font-weight: 500; }
.zsplit-keys { left: 61.04%; }
.zsplit-vals { left: 71.5%; }
.zsplit.is-static .zsplit-band > span { opacity: 1; }

/* The top image collection (mockup photo, the pair, the motion video): each
   piece has slightly rounded corners. */
#palette .fl img, #palette .fl video, #palette .grad-hero, #palette .pair-photo {
  overflow: hidden;
  border-radius: calc(10 * var(--px));
}




/* Glow band behind the motion video: a full-width horizontal band of muted grey-blue
   light that starts above the video and is back to black by its bottom, so
   the video's black frame doesn't simply dissolve into the black page. The
   script places it on the video and fades it in as the video nears the
   middle of the screen. */
#palette > .fl, #palette > .pair { position: relative; z-index: 1; }
.zp-glow {
  position: absolute;
  left: 0; right: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgb(8, 9, 12) 8.3%,
    rgb(28, 34, 44) 16.7%,
    rgb(56, 69, 88) 25%,
    rgb(84, 103, 132) 33.3%,
    rgb(104, 129, 164) 41.7%,
    rgb(112, 138, 176) 50%,
    rgb(104, 129, 164) 58.3%,
    rgb(84, 104, 132) 66.7%,
    rgb(56, 69, 88) 75%,
    rgb(28, 34, 44) 83.3%,
    rgb(8, 9, 12) 91.7%,
    rgba(0, 0, 0, 0) 100%);   /* a smooth bell (sin²) from black to a soft blue-grey and back: no ridge at the peak */
  /* kept to the image column: full strength across the images, falling off
     softly just outside them on an eased ramp (no visible edge) - fully black
     by the side contents on the left and by the right edge */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.000) 13.0%, rgba(0,0,0,0.016) 14.9%, rgba(0,0,0,0.104) 16.8%, rgba(0,0,0,0.275) 18.6%, rgba(0,0,0,0.500) 20.5%, rgba(0,0,0,0.725) 22.4%, rgba(0,0,0,0.896) 24.3%, rgba(0,0,0,0.984) 26.1%, rgba(0,0,0,1.000) 28.0%, rgba(0,0,0,0.965) 88.3%, rgba(0,0,0,0.790) 90.7%, rgba(0,0,0,0.500) 93.0%, rgba(0,0,0,0.210) 95.3%, rgba(0,0,0,0.035) 97.7%, rgba(0,0,0,0.000) 100.0%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.000) 13.0%, rgba(0,0,0,0.016) 14.9%, rgba(0,0,0,0.104) 16.8%, rgba(0,0,0,0.275) 18.6%, rgba(0,0,0,0.500) 20.5%, rgba(0,0,0,0.725) 22.4%, rgba(0,0,0,0.896) 24.3%, rgba(0,0,0,0.984) 26.1%, rgba(0,0,0,1.000) 28.0%, rgba(0,0,0,0.965) 88.3%, rgba(0,0,0,0.790) 90.7%, rgba(0,0,0,0.500) 93.0%, rgba(0,0,0,0.210) 95.3%, rgba(0,0,0,0.035) 97.7%, rgba(0,0,0,0.000) 100.0%);
  will-change: opacity;
}

/* The left panel of the pair holds the logo animation: it fills the panel,
   its height fitted and its sides cropped (the logo stays centred). */
.zp .grad-hero video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.zp .grad-hero { background: #000; }