.case-home-focus {
  overflow: visible;
}

.case-home-focus-word {
  display: inline-block;
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(0, .22em, -72px) scale(.95);
  transform-origin: 50% 100%;
  transition:
    opacity .52s ease var(--case-focus-delay, 0ms),
    filter .9s var(--ease) var(--case-focus-delay, 0ms),
    transform .95s var(--ease) var(--case-focus-delay, 0ms);
  will-change: opacity, filter, transform;
}

.case-home-focus.is-focused .case-home-focus-word {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.case-home-highlight {
  --case-highlight-muted: .2;
}

.case-home-highlight-word {
  display: inline;
  opacity: var(--case-word-alpha, var(--case-highlight-muted));
  filter: blur(var(--case-word-blur, 1.8px));
  transition: opacity .08s linear, filter .08s linear;
  will-change: opacity, filter;
}

.case-home-depth {
  --case-depth-z: 0px;
  --case-depth-y: 0px;
  --case-depth-scale: 1;
  --case-depth-blur: 0px;
  --case-depth-opacity: 1;
  transform:
    translate3d(0, var(--case-depth-y), var(--case-depth-z))
    scale(var(--case-depth-scale));
  transform-origin: 50% 50%;
  filter: blur(var(--case-depth-blur));
  opacity: var(--case-depth-opacity);
  will-change: transform, filter, opacity;
  backface-visibility: hidden;
}

.case-home-reveal {
  --case-pointer-rx: 0deg;
  --case-pointer-ry: 0deg;
  opacity: 0;
  filter: blur(13px);
  transform:
    perspective(1400px)
    translate3d(0, 52px, -110px)
    rotateX(var(--case-pointer-rx))
    rotateY(var(--case-pointer-ry))
    scale(.955);
  transition:
    opacity .68s ease var(--case-reveal-delay, 0ms),
    filter .9s var(--ease) var(--case-reveal-delay, 0ms),
    transform 1s var(--ease) var(--case-reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}

.case-home-reveal.is-home-visible {
  opacity: 1;
  filter: blur(0);
  transform:
    perspective(1400px)
    translate3d(0, 0, 0)
    rotateX(var(--case-pointer-rx))
    rotateY(var(--case-pointer-ry))
    scale(1);
}

.case-visual,
.project-index-card,
.case-media-frame {
  --case-pointer-x: 0px;
  --case-pointer-y: 0px;
  --case-pointer-rx: 0deg;
  --case-pointer-ry: 0deg;
  transform-style: preserve-3d;
}

.case-visual .case-featured-media,
.project-index-card .project-index-media,
.case-media-frame .case-media-object {
  translate: var(--case-pointer-x) var(--case-pointer-y);
}

.case-visual.case-reveal {
  transform:
    perspective(1400px)
    translate3d(0, 44px, -80px)
    rotateX(var(--case-pointer-rx))
    rotateY(var(--case-pointer-ry));
}

.case-visual.case-reveal.is-visible {
  transform:
    perspective(1400px)
    translate3d(0, 0, 0)
    rotateX(var(--case-pointer-rx))
    rotateY(var(--case-pointer-ry));
}

.case-media-frame {
  transform:
    perspective(1400px)
    rotateX(var(--case-pointer-rx))
    rotateY(var(--case-pointer-ry));
}

/* No project page links back to the legacy portfolio. */
.case-source-link,
.case-visual-meta a {
  display: none !important;
}

/* New scroll scenes own their transforms; legacy hover/depth transforms stay out. */
.case-expansion-hero::before,
.case-expansion-hero::after {
  position: absolute !important;
}

.case-expansion-visual .case-featured-media {
  translate: none !important;
}

.case-expansion-visual .case-visual-meta {
  opacity: .9;
}

.case-zoom-parallax .case-media-frame,
.case-zoom-parallax .case-media-object {
  transform: none;
  translate: none !important;
}

.case-header {
  transition:
    width .6s var(--ease),
    top .6s var(--ease),
    background .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;
}

.case-header.is-case-scrolled {
  top: 10px;
  width: min(920px, calc(100vw - 28px));
  background: rgba(11,11,11,.82);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 22px 70px rgba(0,0,0,.24);
}

@media (pointer: fine) {
  .case-media-frame {
    transition: transform .65s var(--ease), border-color .35s ease;
  }
}

@media (max-width: 820px) {
  .case-home-focus-word {
    filter: blur(12px);
    transform: translate3d(0, .16em, -44px) scale(.97);
  }

  .case-header.is-case-scrolled {
    top: 8px;
    width: calc(100vw - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-home-focus-word,
  .case-home-highlight-word,
  .case-home-depth,
  .case-home-reveal,
  .case-visual,
  .case-media-frame {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
  }
}