/* Selected B depth surface: only the homepage image, never its frame or caption. */
.hero-portrait:has(> .depth-stage) { width: 100%; }
.hero-portrait > .depth-stage {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  contain: layout paint;
  filter: saturate(.82);
  transition: filter .55s ease;
}
.hero-portrait > .depth-stage > img {
  display: block;
  width: 100%;
  height: auto;
  filter: none !important;
  transform: none !important;
}
.hero-portrait > .depth-stage > .annika-depth-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: none !important;
  transform: none !important;
  opacity: 0;
  pointer-events: none;
}
.hero-portrait > .depth-stage[data-state="active"] > .annika-depth-canvas { opacity: 1; }
.hero-portrait:is(:hover, :focus-within) > .depth-stage { filter: saturate(1); }
@media (prefers-reduced-motion: reduce) {
  .hero-portrait > .depth-stage { transition: none; }
}
@media (hover: none), (pointer: coarse) {
  .hero-portrait > .depth-stage:not([data-depth-pointer="mouse"]):not([data-depth-pointer="pen"]) > .annika-depth-canvas { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-portrait > .depth-stage > .annika-depth-canvas { display: none !important; }
}
@media print {
  .hero-portrait > .depth-stage > .annika-depth-canvas { display: none !important; }
}