/* A shallow perspective arc: the smaller outer doors sit behind Claude
   artifacts, which is the one the page is for. Being the front door is
   three things together — bigger orb, stepped toward the viewer, and over
   its neighbours — and they belong to whichever class is in the middle of
   .door-bubbles, not to a position, so moving a door means moving all
   three with it. */
/* The doors are the centrepiece: the row takes all the height the copy
   leaves and centres the three balls in it, with the gems placed around. */
.door-row { flex: 1 1 auto; justify-content: center; }
.door-bubbles {
  --door-size: clamp(130px, min(17vw, 30vh), 230px);
  gap: clamp(12px, 3vw, 40px);
  flex-wrap: nowrap;
  padding-bottom: calc(var(--door-size) * .26);
}
.hero-bubble {
  --door-depth: .84;
  --orb-size: calc(var(--door-size) * var(--door-depth));
  position: relative;
  flex: 0 0 calc(var(--orb-size) * 1.38);
  width: calc(var(--orb-size) * 1.38);
  gap: 0;
  padding-top: calc(var(--orb-size) * .10);
  padding-bottom: calc(var(--orb-size) * .40);
}
.hero-bubble .bubble { width: var(--orb-size); }
.hero-bubble .nav-pedestal {
  inset: auto;
  left: var(--stand-left);
  top: var(--stand-top);
  width: var(--stand-width);
  max-width: none;
  height: auto;
}
.hero-folder {
  --door-depth: 1;
  transform: translateY(calc(var(--door-size) * .22));
  z-index: 2;
}
.hero-bubble .hb-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.hero-bubble:focus-visible { outline: 1px dashed #b8dce4; outline-offset: 5px; border-radius: 8px; }
.hero-bubble:hover .bubble-ball,
.hero-bubble:focus-visible .bubble-ball {
  filter: drop-shadow(0 12px 22px rgba(0,0,8,.55)) brightness(1.04) saturate(1.03);
}
@media (max-width: 600px) {
  .door-bubbles {
    /* A third of the available row, including the wide painted plaques.
       Container units keep all three links inside even a narrow embed. */
    container-type: inline-size;
    width: 100%;
    gap: clamp(4px, 1.5vw, 9px);
    --door-size: clamp(68px, 23vw, 112px);
    padding-bottom: calc(var(--door-size) * .26);
  }
  .hero-bubble {
    --door-size: min(112px, calc((100cqw - 18px) / 3.7));
    flex: 0 0 calc(var(--orb-size) * 1.38);
    width: calc(var(--orb-size) * 1.38);
  }
  .hero-folder {
    transform: translateY(calc(var(--door-size) * .16));
  }
}