.case-hero__media--bare .case-hero__layer {
  animation: case-layer-in var(--duration-intro) var(--ease-out) backwards;
  animation-delay: calc(var(--layer-index) * 5 * var(--duration-stagger));
}

.case-hero__media--bare .case-hero__layer:nth-child(1) { --layer-index: 0; }
.case-hero__media--bare .case-hero__layer:nth-child(2) { --layer-index: 1; }
.case-hero__media--bare .case-hero__layer:nth-child(3) { --layer-index: 2; }
.case-hero__media--bare .case-hero__layer:nth-child(4) { --layer-index: 3; }

@keyframes case-layer-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-16));
  }
}

.case-hero__hit {
  display: none;
}

@media (width >= 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .case-hero__hit {
    position: absolute;
    display: block;
    animation: case-hit-ready 0s backwards;
    animation-delay: calc(var(--layer-index) * 5 * var(--duration-stagger) + var(--duration-intro));
  }

  .case-hero__hit:nth-of-type(1) { --layer-index: 0; }
  .case-hero__hit:nth-of-type(2) { --layer-index: 1; }
  .case-hero__hit:nth-of-type(3) { --layer-index: 2; }
  .case-hero__hit:nth-of-type(4) { --layer-index: 3; }

  @keyframes case-hit-ready {
    from {
      visibility: hidden;
    }
  }

  .case-hero__hit[data-brand="dma"] { inset: 0.1% 3.6% 24.4% 31.3%; }
  .case-hero__hit[data-brand="ebc"] { inset: 11.3% 14% 14% 21.2%; }
  .case-hero__hit[data-brand="lca"] { inset: 15% 21.5% 11.2% 14%; }
  .case-hero__hit[data-brand="centology"] { inset: 24.4% 31.3% 4.7% 5.3%; }

  .case-hero__hit[data-layer="screen"] { inset: 0 14.083% 15.156% 6.75%; }
  .case-hero__hit[data-layer="phone"] { inset: 3.75% 6.667% 3.125% 67.833%; }

  .case-hero__media--bare .case-hero__layer {
    transition: transform var(--duration-slow) var(--ease-out);
  }

  .case-hero__media--bare:has(.case-hero__hit[data-brand="dma"]:hover) .case-hero__layer[data-brand="dma"],
  .case-hero__media--bare:has(.case-hero__hit[data-brand="ebc"]:hover) .case-hero__layer[data-brand="ebc"],
  .case-hero__media--bare:has(.case-hero__hit[data-brand="lca"]:hover) .case-hero__layer[data-brand="lca"],
  .case-hero__media--bare:has(.case-hero__hit[data-brand="centology"]:hover) .case-hero__layer[data-brand="centology"],
  .case-hero__media--bare:has(.case-hero__hit[data-layer="screen"]:hover) .case-hero__layer[data-layer="screen"],
  .case-hero__media--bare:has(.case-hero__hit[data-layer="phone"]:hover) .case-hero__layer[data-layer="phone"] {
    transform: translateY(calc(-1 * var(--space-8)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-hero__media--bare .case-hero__layer {
    animation: none;
  }
}