/* Portfolio rendering boundary and phased, decoded scene activation. */
.portfolio,
.portfolio-accordion,
.portfolio-row {
  max-width: 100%;
  min-width: 0;
}

.portfolio { overflow-x: hidden; }
@supports (overflow: clip) { .portfolio { overflow-x: clip; } }

.portfolio-slide {
  position: relative;
  overflow: visible;
  contain: none;
  cursor: pointer;
}

.portfolio-slide.is-active { z-index: 10; }

.portfolio-slide::before,
.portfolio-slide__idle,
.portfolio-slide__preview,
.portfolio-slide img,
.portfolio-slide__preview-content {
  pointer-events: none;
}

.portfolio-slide__category {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .portfolio-row {
    transition: grid-template-columns 220ms cubic-bezier(.22, 1, .36, 1) !important;
  }

  .portfolio-row:not(:has(.portfolio-slide.is-expanded)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .portfolio-row:has(.portfolio-slide:first-child.is-expanded) {
    grid-template-columns: minmax(0, 3.2fr) minmax(260px, 1fr) !important;
  }
  .portfolio-row:has(.portfolio-slide:last-child.is-expanded) {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 3.2fr) !important;
  }

  .portfolio-slide__preview {
    visibility: hidden;
    opacity: 0 !important;
    clip-path: none !important;
    transform: translate3d(10%, 0, 0) !important;
    transition: opacity 320ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 520ms !important;
  }
  .portfolio-slide.is-active .portfolio-slide__preview {
    visibility: visible;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    transition-delay: 0s !important;
  }

  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .portfolio-slide__idle {
    opacity: 1 !important;
    transform: none !important;
  }
  .portfolio-slide.is-active .portfolio-slide__idle {
    opacity: 0 !important;
    transform: translate3d(-35px, 0, 0) !important;
  }

  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .portfolio-slide__preview-content {
    opacity: 0 !important;
    transform: translate3d(0, 25px, 0) !important;
  }
  .portfolio-slide.is-active .portfolio-slide__preview-content {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .portfolio-slide:not(.is-active):hover .portfolio-slide__link span { transform: none !important; }
  .portfolio-slide.is-active .portfolio-slide__link span { transform: translate(5px, -5px) !important; }

  .urdiamant-scene__background,
  .mkk-scene__background,
  .cpe-scene__background,
  .espresso-scene__background {
    transform: none !important;
    transition: none !important;
  }
  .urdiamant-scene__background { filter: brightness(.88) saturate(1.06) !important; }
  .mkk-scene__background { filter: brightness(.84) saturate(.98) !important; }
  .cpe-scene__background { filter: brightness(.84) saturate(1.1) contrast(1.05) !important; }
  .espresso-scene__background { filter: brightness(.8) saturate(1) contrast(1.05) !important; }

  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .urdiamant-scene__tool {
    opacity: 0 !important; transform: translate3d(120px, -90px, 0) rotate(4deg) scale(.84) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .urdiamant-scene__screen--home {
    opacity: 0 !important; transform: translate3d(0, 150px, 0) rotate(-4deg) scale(.9) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .urdiamant-scene__screen--catalog {
    opacity: 0 !important; transform: translate3d(0, 170px, 0) rotate(5deg) scale(.88) !important;
  }
  .portfolio-slide--urdiamant.is-active .urdiamant-scene__tool { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(0) scale(1) !important; }
  .portfolio-slide--urdiamant.is-active .urdiamant-scene__screen--home { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(-5deg) scale(1) !important; }
  .portfolio-slide--urdiamant.is-active .urdiamant-scene__screen--catalog { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(6deg) scale(1) !important; }

  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .mkk-scene__plaque {
    opacity: 0 !important; transform: translate3d(-140px, -90px, 0) rotate(-5deg) scale(.82) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .mkk-scene__screen--home {
    opacity: 0 !important; transform: translate3d(0, 170px, 0) rotate(-4deg) scale(.9) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .mkk-scene__screen--online {
    opacity: 0 !important; transform: translate3d(0, 180px, 0) rotate(5deg) scale(.88) !important;
  }
  .portfolio-slide--mkk.is-active .mkk-scene__plaque { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(-1deg) scale(1) !important; }
  .portfolio-slide--mkk.is-active .mkk-scene__screen--home { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(-4deg) scale(1) !important; }
  .portfolio-slide--mkk.is-active .mkk-scene__screen--online { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(5deg) scale(1) !important; }

  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .cpe-scene__panel {
    opacity: 0 !important; transform: translate3d(150px, -100px, 0) rotate(5deg) scale(.82) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .cpe-scene__screen--home {
    opacity: 0 !important; transform: translate3d(0, 170px, 0) rotate(-4deg) scale(.9) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .cpe-scene__screen--info {
    opacity: 0 !important; transform: translate3d(0, 180px, 0) rotate(6deg) scale(.88) !important;
  }
  .portfolio-slide--cpe.is-active .cpe-scene__panel { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(0) scale(1) !important; }
  .portfolio-slide--cpe.is-active .cpe-scene__screen--home { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(-4deg) scale(1) !important; }
  .portfolio-slide--cpe.is-active .cpe-scene__screen--info { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(6deg) scale(1) !important; }

  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .espresso-scene__banner {
    opacity: 0 !important; transform: translate3d(-130px, -70px, 0) rotate(-6deg) scale(.82) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .espresso-scene__coffee {
    opacity: 0 !important; transform: translate3d(145px, -95px, 0) rotate(5deg) scale(.8) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .espresso-scene__screen--home {
    opacity: 0 !important; transform: translate3d(0, 170px, 0) rotate(-4deg) scale(.9) !important;
  }
  .portfolio-slide:not(.is-active):is(:hover, :focus-visible) .espresso-scene__screen--info {
    opacity: 0 !important; transform: translate3d(0, 180px, 0) rotate(6deg) scale(.88) !important;
  }
  .portfolio-slide--espresso.is-active .espresso-scene__banner { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(-2deg) scale(1) !important; }
  .portfolio-slide--espresso.is-active .espresso-scene__coffee { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(0) scale(1) !important; }
  .portfolio-slide--espresso.is-active .espresso-scene__screen--home { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(-4deg) scale(1) !important; }
  .portfolio-slide--espresso.is-active .espresso-scene__screen--info { opacity: 1 !important; transform: translate3d(0, 0, 0) rotate(6deg) scale(1) !important; }

  .portfolio-slide.is-animating .portfolio-slide__preview,
  .portfolio-slide.is-animating .portfolio-slide__preview-content,
  .portfolio-slide.is-animating :is(.urdiamant-scene__tool,.urdiamant-scene__screen,.mkk-scene__plaque,.mkk-scene__screen,.cpe-scene__panel,.cpe-scene__screen,.espresso-scene__banner,.espresso-scene__coffee,.espresso-scene__screen) {
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  .portfolio-slide :is(.urdiamant-scene__tool,.urdiamant-scene__screen,.mkk-scene__plaque,.mkk-scene__screen,.cpe-scene__panel,.cpe-scene__screen,.espresso-scene__banner,.espresso-scene__coffee,.espresso-scene__screen) {
    transition-duration: 320ms, 560ms !important;
    transition-timing-function: ease, cubic-bezier(.22, 1, .36, 1) !important;
  }
}

@media (max-width: 900px) {
  .portfolio-slide { overflow: hidden; contain: paint; }
  @supports (overflow: clip) { .portfolio-slide { overflow: clip; } }
  .portfolio-slide__preview { clip-path: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-row { transition: none !important; }
  .portfolio-slide__preview { transform: none !important; }
}