/*
 * Portfolio frames (inc/portfolio.php, js/mdz-portfolio.js). Every frame has a fixed size and a
 * background colour before its images arrive. Only transform moves, and a loop runs only while its
 * frame is live (on screen, tab visible).
 */

/* ---------- PortfolioWall ---------- */

.mdz-pf-wall {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, var(--mdz-night-abyss), var(--mdz-night));
  pointer-events: none;
}

.mdz-pf-wall__grid {
  position: absolute;
  inset: -35% -20%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  transform: rotate(-12deg);
}

.mdz-pf-wall[data-cols="6"] .mdz-pf-wall__grid {
  --cols: 6;
}

.mdz-pf-wall__col {
  animation: mdz-pf-drift var(--d, 70s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.mdz-pf-wall__col:nth-child(even) {
  margin-top: -140px;
  animation-direction: reverse;
}

.mdz-pf-wall__col.is-still {
  animation: none;
  will-change: auto;
}

/* Spacing as a margin on each tile, so half the column is exactly one copy of the list. */
.mdz-pf-wall__col img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  opacity: .85;
}

.mdz-pf-wall[data-live="true"] .mdz-pf-wall__col {
  animation-play-state: running;
}

/* Dark on the text side (right), and at the top and the bottom, in the night colours. */
.mdz-pf-wall__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(7, 7, 26, .95) 0%, rgba(7, 7, 26, .9) 40%, rgba(7, 7, 26, .58) 62%, rgba(7, 7, 26, .2) 86%),
    linear-gradient(0deg, rgba(17, 19, 51, .92), rgba(17, 19, 51, 0) 32%, rgba(7, 7, 26, 0) 72%, rgba(7, 7, 26, .85));
}

@keyframes mdz-pf-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

/* Ambient: behind a section, fainter and one and a half times slower. */
.mdz-pf-wall--ambient .mdz-pf-wall__col {
  animation-duration: calc(var(--d, 70s) * 1.5);
}

.mdz-pf-wall--ambient .mdz-pf-wall__col img {
  opacity: .28;
}

/* A hero that carries the wall: the text in one column on the right, the wall seen mostly on the left. */
.mdz-deep-hero--wall .mdz-deep-hero__grid {
  grid-template-columns: minmax(0, 640px);
}

.mdz-deep-hero--wall .mdz-deep-hero__moon {
  z-index: 0;
}

@media (max-width: 700px) {
  /* Tiles of about 150px: smaller than the heading, so the heading stays the largest thing painted. */
  .mdz-pf-wall:not(.mdz-pf-wall--mini) .mdz-pf-wall__grid {
    --cols: 5;
    inset: -30% -40%;
  }

  .mdz-pf-wall__shade {
    background:
      linear-gradient(180deg, rgba(7, 7, 26, .55), rgba(7, 7, 26, .82) 45%, rgba(17, 19, 51, .94)),
      rgba(7, 7, 26, .2);
  }
}

/* Mini: three small columns inside a card, twice as slow, no dark shade. On a light card the edges fade
   to white; on the night they are only clipped. */
.mdz-pf-wall--mini {
  z-index: 0;
  background: none;
}

.mdz-pf-wall--mini .mdz-pf-wall__grid {
  --cols: 3;
  inset: -70% auto;
  left: 50%;
  width: 568px;
  margin-left: -284px;
  gap: 8px;
}

.mdz-pf-wall--mini .mdz-pf-wall__col img {
  margin-bottom: 8px;
  border-radius: 4px;
  opacity: 1;
}

.mdz-pf-wall--mini .mdz-pf-wall__shade {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 84%, rgba(255, 255, 255, .96)),
    linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .9));
}

.mdz-on-night .mdz-pf-wall--mini .mdz-pf-wall__shade {
  background: none;
}

.mdz-on-night .mdz-pf-wall--mini .mdz-pf-wall__col img {
  opacity: .62;
}

/* A service card that carries a mini wall: a tall card in the second column, three rows high, with the
   wall under its text. The other cards fill the first column beside it, so no row is left half empty. */
.mdz-svc-grid:has(.mdz-svc--wall) {
  grid-auto-flow: dense;
}

.mdz-svc--wall {
  position: relative;
  order: -1;
  grid-column: 2;
  grid-row: span 3;
  align-items: flex-start;
  min-height: 240px;
  overflow: hidden;
}

.mdz-svc--wall .mdz-svc__arrow {
  align-self: flex-start;
  margin-top: 10px;
}

.mdz-svc__wall {
  position: absolute;
  inset: 84px 0 0;
  overflow: hidden;
  border-radius: 0 0 var(--mdz-radius) var(--mdz-radius);
}

/* "קשור": the social tile takes two places in the row, with the wall beside its text. */
body a.mdz-related__item--wall {
  position: relative;
  min-height: 170px;
  padding-inline-end: calc(46% + 20px);
  overflow: hidden;
}

.mdz-related__list > li:has(.mdz-related__item--wall) {
  grid-column: span 2;
}

.mdz-related__wall {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 46%;
  overflow: hidden;
}

.mdz-related__item--wall .mdz-pf-wall__shade {
  background:
    linear-gradient(90deg, rgba(251, 248, 255, .96), rgba(251, 248, 255, 0) 16%, rgba(251, 248, 255, 0) 84%, rgba(251, 248, 255, .96)),
    linear-gradient(0deg, rgba(251, 248, 255, .9), rgba(251, 248, 255, 0) 22%, rgba(251, 248, 255, 0) 78%, rgba(251, 248, 255, .9));
}

/* The hub's "מה בפנים" grid has three columns; with a tall card it takes two, like the other grids. */
.mdz-hub-inside__grid:has(.mdz-svc--wall) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Wherever the card grid is a single column, the tall card is an ordinary one with the wall below. */
@media (max-width: 900px) {
  .mdz-svc--wall {
    order: 0;
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  body a.mdz-related__item--wall {
    padding-inline-end: 20px;
    padding-bottom: 168px;
  }

  .mdz-related__list > li:has(.mdz-related__item--wall) {
    grid-column: auto;
  }

  .mdz-related__wall {
    inset: auto 0 0;
    width: auto;
    height: 150px;
  }
}

/* Home, industries: the ambient wall behind the heading, gone into the dark before the cards. */
.mdz-industries > .mdz-pf-wall--ambient {
  inset: 0 0 auto;
  z-index: 0;
  height: 560px;
  background: none;
}

.mdz-industries > .mdz-pf-wall--ambient .mdz-pf-wall__col img {
  opacity: .2;
}

/* Solid night well before the cards (they start about 420px down), so the cards stay the focus. */
.mdz-industries > .mdz-pf-wall--ambient .mdz-pf-wall__shade {
  background:
    linear-gradient(270deg, rgba(11, 11, 26, .75) 0%, rgba(11, 11, 26, .4) 55%, rgba(11, 11, 26, .2) 100%),
    linear-gradient(180deg, rgba(11, 11, 26, .5) 0%, rgba(11, 11, 26, 0) 22%, rgba(11, 11, 26, .55) 46%, rgba(12, 12, 29, 1) 68%);
}

.mdz-industries > .mdz-pf-wall ~ .mdz-industries__inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .mdz-industries > .mdz-pf-wall--ambient {
    height: 600px;
  }
}

/* ---------- FeedPhones ---------- */

/* Inside a content section the phones take the full width under the heading and the list. */
.mdz-hub-deep__extra {
  grid-column: 1 / -1;
  min-width: 0;
}

.mdz-pf-phones {
  margin-top: 24px;
}

/* Above the works on a hub: a little room before the work cards. */
.mdz-hub-works .mdz-pf-phones {
  margin-bottom: 48px;
}

.mdz-pf-phones__caption {
  margin: 0 0 6px;
  text-align: center;
  color: var(--mdz-muted);
  font-size: var(--mdz-fs-label);
  letter-spacing: var(--mdz-track-label);
}

.mdz-pf-phones__row {
  display: flex;
  gap: clamp(16px, 3vw, 36px);
  justify-content: center;
  align-items: flex-end;
  padding-top: 30px;
}

.mdz-pf-phone {
  flex: 0 0 auto;
  width: 210px;
  margin: 0;
}

.mdz-pf-phone:nth-child(odd) .mdz-pf-phone__body {
  transform: translateY(-26px) rotate(-3deg);
}

.mdz-pf-phone:nth-child(even) .mdz-pf-phone__body {
  transform: rotate(3deg);
}

.mdz-pf-phone {
  position: relative;
}

/* The shadow is a still gradient under the phone, not a blurred box shadow: a blur on the tilted frames
   made the first paint of the row heavy enough to delay a tap next to it. */
.mdz-pf-phone::before {
  content: "";
  position: absolute;
  inset: auto 6% 34px;
  height: 46px;
  background: radial-gradient(ellipse at center, rgba(17, 19, 51, .32), rgba(17, 19, 51, 0) 70%);
  pointer-events: none;
}

.mdz-pf-phone__body {
  position: relative;
  aspect-ratio: 9 / 19;
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(160deg, #2a2c55, var(--mdz-night));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  will-change: transform;
}

.mdz-pf-phone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 26px;
  background: var(--mdz-lavender);
}

.mdz-pf-phone__bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 8px;
  border-bottom: 1px solid var(--mdz-line-soft);
  background: var(--mdz-white);
  color: var(--mdz-ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mdz-pf-phone__bar > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdz-pf-phone__dots {
  display: inline-flex;
  gap: 3px;
}

.mdz-pf-phone__dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--mdz-ink);
}

/* Bottom padding of one gap makes half the feed exactly one copy of the list. */
.mdz-pf-phone__feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding-top: 44px;
  padding-bottom: 2px;
  animation: mdz-pf-drift var(--d, 40s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.mdz-pf-phone__feed img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.mdz-pf-phones[data-live="true"] .mdz-pf-phone__feed {
  animation-play-state: running;
}

/* Stops while the reader points at a phone or moves focus to its link. */
.mdz-pf-phones[data-live="true"] .mdz-pf-phone:hover .mdz-pf-phone__feed,
.mdz-pf-phones[data-live="true"] .mdz-pf-phone:focus-within .mdz-pf-phone__feed {
  animation-play-state: paused;
}

.mdz-pf-phone__name {
  margin-top: 14px;
  color: var(--mdz-muted);
  font-size: 12px;
  text-align: center;
}

.mdz-pf-phone__name a {
  color: var(--mdz-purple);
}

@media (max-width: 700px) {
  /* A row of its own that scrolls sideways; the page itself never does. */
  .mdz-pf-phones__row {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--mdz-gutter) * -1);
    padding: 8px var(--mdz-gutter) 12px;
  }

  .mdz-pf-phone {
    width: 168px;
    scroll-snap-align: center;
  }

  .mdz-pf-phone .mdz-pf-phone__body,
  .mdz-pf-phone:nth-child(odd) .mdz-pf-phone__body,
  .mdz-pf-phone:nth-child(even) .mdz-pf-phone__body {
    transform: none;
  }
}

/* ---------- BrandDesk ---------- */

.mdz-pf-desk {
  --p: .5;
  position: relative;
  height: 640px;
  overflow: hidden;
  border-radius: var(--mdz-radius-l);
  background:
    radial-gradient(circle at 30% 20%, rgba(124, 242, 194, .07), rgba(124, 242, 194, 0) 45%),
    radial-gradient(circle at 80% 80%, rgba(185, 140, 255, .1), rgba(185, 140, 255, 0) 50%),
    #0d0e27;
  box-shadow: inset 0 0 0 1px rgba(207, 200, 234, .14);
}

.mdz-pf-desk__table {
  position: absolute;
  inset: 0;
}

/* Depth rig (MOTION-SPEC [3]): 12px at most. */
.mdz-pf-desk__piece {
  --travel: 9px;
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: var(--w);
  max-width: 42%;
  aspect-ratio: var(--ratio, 1);
  border-radius: 6px;
  background: rgba(207, 200, 234, .06);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .4);
  transform: translate3d(0, calc((var(--p) - .5) * var(--travel)), 0) rotate(var(--r));
}

.mdz-pf-desk__piece--back {
  --travel: 6px;
}

.mdz-pf-desk__piece--front {
  --travel: -12px;
}

.mdz-pf-desk__piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

@media (max-width: 700px) {
  .mdz-pf-desk {
    height: 480px;
  }

  .mdz-pf-desk__piece--extra {
    display: none;
  }

  .mdz-pf-desk__piece {
    max-width: 46%;
    --travel: 6px;
  }

  .mdz-pf-desk__piece--front {
    --travel: -6px;
  }
}

/* A bare desk floats on a dark hero: no panel, a fixed frame, pieces on layers of their own so the
   depth on scroll only moves them. */
.mdz-pf-desk--bare {
  height: 540px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.mdz-pf-desk--bare .mdz-pf-desk__piece {
  box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .55);
  will-change: transform;
}

.mdz-svc-hero__desk {
  position: relative;
  min-width: 0;
}

@media (max-width: 900px) {
  .mdz-pf-desk--bare {
    height: 420px;
  }
}

@media (max-width: 700px) {
  .mdz-pf-desk--bare {
    height: 380px;
  }

  /* Narrow frame: a piece never starts so far along that it runs past the edge. */
  .mdz-pf-desk--bare .mdz-pf-desk__piece {
    max-width: 38%;
    inset-inline-start: min(var(--x), calc(100% - min(var(--w), 38%) - 6px));
  }
}

/* ---------- MosaicBackdrop ---------- */

.mdz-pf-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The sprite comes grey and soft already (scripts/portfolio-build.py); here it is only placed. */
.mdz-pf-mosaic {
  position: absolute;
  inset: -4%;
  z-index: -2;
  background-color: var(--mdz-white);
  background-position: center;
  background-size: cover;
  opacity: .2;
  transform: rotate(-4deg) scale(1.08);
}

.mdz-pf-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .82), rgba(255, 255, 255, .55));
}

.mdz-pf-backdrop__card {
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--mdz-radius-l);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 50px rgba(22, 20, 46, .12);
}

@media (prefers-reduced-motion: reduce) {
  .mdz-pf-wall__col,
  .mdz-pf-phone__feed {
    animation: none !important;
  }

  .mdz-pf-desk__piece {
    transform: rotate(var(--r));
  }
}