/* Featured Work ProjectItem, scoped to PrintGats' four own examples. */
html[data-inertia-scope="native"] {
  scroll-behavior: auto;
}

#trabajos[data-examples-world] {
  isolation: isolate;
}

#trabajos[data-examples-world] .projects-lusion-canvas {
  border: 0;
  height: 100%;
  inset: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  z-index: 5;
}

#trabajos[data-examples-world] .work-track {
  scroll-behavior: auto;
  z-index: 6;
}
#trabajos[data-examples-world] .work-title { z-index: 7; }
#trabajos[data-examples-world] .horizontal-progress { z-index: 8; }

#trabajos[data-examples-world].motion-horizontal .work-title {
  opacity: clamp(0, calc(1 - var(--horizontal-progress, 0) * 4.75), 1);
  transform: translateY(-50%) translateX(calc(var(--horizontal-progress, 0) * -5vw));
  will-change: opacity, transform;
}

#trabajos[data-examples-world] [data-example-world-card] .work-card__media {
  background: transparent;
  bottom: auto;
  display: block;
  font-size: inherit;
  inset: 0;
  letter-spacing: inherit;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-transform: none;
}

#trabajos[data-examples-world] [data-example-world-card] .work-card__media > img {
  filter: none;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  position: absolute;
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
  visibility: visible;
  width: 100%;
}

#trabajos[data-examples-world][data-lusion-project-handoff="ready"] [data-example-world-card][data-lusion-transition-source="true"] .work-card__media > img {
  opacity: 0;
  visibility: hidden;
}

#trabajos[data-examples-world] [data-example-world-card][data-lusion-texture-ready="true"] {
  background: transparent;
}

#trabajos[data-examples-world] [data-example-world-card]::before {
  content: none;
  display: none;
}

#trabajos[data-examples-world] [data-example-world-card],
#trabajos[data-examples-world] [data-example-world-card]:hover {
  border: 0;
  box-shadow: none;
  outline: 0;
}

#trabajos[data-examples-world] [data-example-world-card]:focus-visible {
  border: 0;
  box-shadow: none;
  outline: 2px solid rgba(240, 238, 232, .88);
  outline-offset: 4px;
}

#trabajos[data-examples-world] [data-example-world-card] .work-card__open {
  opacity: 0;
  transform: none;
  transition: none;
  visibility: hidden;
}

#trabajos[data-examples-world][data-horizontal-active="true"] [data-example-world-card] .work-card__open {
  opacity: .9;
  transition: opacity .28s ease;
  visibility: visible;
}

#trabajos[data-examples-world] [data-example-world-card]:hover .work-card__open,
#trabajos[data-examples-world] [data-example-world-card]:focus-visible .work-card__open,
#trabajos[data-examples-world] [data-example-world-card]:hover .work-card__open b,
#trabajos[data-examples-world] [data-example-world-card]:focus-visible .work-card__open b {
  transform: none;
}

#trabajos[data-examples-world] [data-example-world-card][data-lusion-texture-ready="true"]:hover,
#trabajos[data-examples-world] [data-example-world-card][data-lusion-texture-ready="true"]:focus-visible {
  transform: none;
}

html.examples-atlas-transitioning,
html.examples-atlas-transitioning body {
  overflow: hidden;
  overscroll-behavior: none;
}

html.examples-atlas-transitioning body {
  padding-right: var(--examples-atlas-scrollbar, 0);
}

.examples-atlas-transition[hidden] {
  display: none;
}

.examples-atlas-transition {
  --examples-atlas-progress: 0;
  --examples-atlas-zoom: 0;
  --examples-atlas-page-opacity: 1;
  contain: layout paint style;
  inset: 0;
  isolation: isolate;
  pointer-events: none;
  position: fixed;
  z-index: 1400;
}

.examples-atlas-transition__shade {
  -webkit-backdrop-filter: blur(calc(var(--examples-atlas-progress) * 18px)) saturate(.84);
  backdrop-filter: blur(calc(var(--examples-atlas-progress) * 18px)) saturate(.84);
  background: rgba(7, 8, 9, .94);
  inset: 0;
  opacity: calc(1 - var(--examples-atlas-page-opacity));
  position: absolute;
  z-index: 0;
}

.projects-lusion-canvas.is-lusion-project-transition {
  clip-path: none !important;
  height: 100svh !important;
  inset: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 100vw !important;
  z-index: 1 !important;
}

.projects-lusion-canvas.is-lusion-project-transition.is-lusion-project-transition-ready {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 700px) {
  #trabajos[data-examples-world].motion-horizontal .work-title {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .examples-atlas-transition__shade {
    -webkit-backdrop-filter: blur(calc(var(--examples-atlas-progress) * 10px)) saturate(.9);
    backdrop-filter: blur(calc(var(--examples-atlas-progress) * 10px)) saturate(.9);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .examples-atlas-transition__shade {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #0a0b0c;
  }
}

@media (prefers-reduced-motion: reduce) {
  #trabajos[data-examples-world] .projects-lusion-canvas,
  .projects-lusion-canvas.is-lusion-project-transition,
  .examples-atlas-transition {
    display: none !important;
  }

  #trabajos[data-examples-world] [data-example-world-card] .work-card__media > img {
    opacity: 1 !important;
    transition: none !important;
  }

  #trabajos[data-examples-world] [data-example-world-card] {
    background: #1a1c1e;
  }

  #trabajos[data-examples-world].motion-horizontal .work-title {
    opacity: 1;
    transform: none;
  }
}