/* Animated hero stacks: the scene-host part of Josh's assets/css/jobs2.css
   (codex/jobs2-playground), without the settings drawer. Loaded after
   jobs.css, as jobs2.css is on /jobs2. */

.hero-stage {
  /* Clip sideways scroll overflow while incoming blocks pass behind the nav. */
  overflow: clip visible;
  clip-path: inset(-100vh 0 0);
}
.site-nav {
  position: relative;
  z-index: 2;
}
.hero-card { pointer-events: none; }
.hero-card > * { pointer-events: auto; }
.jobs2-scene {
  aspect-ratio: 1098/1120;
  transform: translate(var(--scene-x, 0px), var(--scene-y, 0px))
    scale(var(--scene-scale, 1));
  transform-origin: bottom center;
}
.jobs2-scene.hero-stack-right {
  aspect-ratio: 1020/1120;
}
.jobs2-scene [data-cell] {
  pointer-events: visiblePainted;
}
.jobs2-scene [role="button"] {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.jobs2-scene[data-interactive="true"] [role="button"][aria-disabled="false"] {
  cursor: pointer;
}
.jobs2-scene [role="button"]:focus-visible > [data-drop-target] {
  stroke: #3633c9;
  stroke-width: 3;
}
/* The PNG sits in a <picture> so phones never fetch it (index.html); the
   picture itself adds no box. */
.jobs2-scene > picture { display: contents; }
.jobs2-scene > picture > img {
  display: block;
  width: 100%;
  height: auto;
}
.jobs2-scene > svg {
  position: absolute;
  inset: auto 0;
  top: var(--paint-top, 0%);
  width: 100%;
  /* 360 extra SVG units of paint space, without resizing the resting artwork. */
  height: var(--paint-height, 132.142857%);
  overflow: visible;
  display: none;
}
.jobs2-scene.ready > svg {
  display: block;
}
.jobs2-scene.ready > picture > img {
  opacity: 0;
}
/* Hidden from the first paint while the animation is on its way (the inline
   script at the top of index.html), except in the review views. */
.hero-will-animate .jobs2-scene:not([data-view="original"]):not([data-view="overlay"]) > picture > img {
  opacity: 0;
}
.jobs2-scene[data-view="original"] > picture > img {
  opacity: 1;
}
.jobs2-scene[data-view="original"] > svg {
  display: none;
}
.jobs2-scene[data-view="overlay"] > picture > img {
  opacity: 0.5;
}
.jobs2-scene[data-view="overlay"] > svg {
  opacity: 0.5;
}
@media (max-width: 860px) {
  .jobs2-mobile-art .jobs2-scene {
    display: block;
    opacity: var(--jobs2-mobile-opacity, 0.25);
    width: 65%;
    bottom: -80px;
  }
}