/* Reserve the complete 3D sweep, rather than clipping a card-sized scene.
   Envelope includes both artwork rectangles, 8px thickness, every yaw,
   pitch +/-30deg, and the controller's -5deg roll. Load after layout.css. */
.hero.hero-with-key {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  column-gap: clamp(32px, 4.4vw, 64px);
  align-items: center;
  min-height: 0;
  padding-block: 32px 40px;
  overflow: visible;
}
.hero.hero-with-key .hero-copy {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: none;
}
.hero.hero-with-key .access-key-stage {
  width: 100%;
  max-width: 600px;
  min-width: 0;
  margin: 0;
  padding: 0;
  justify-self: end;
}
.hero.hero-with-key .key-card-scene {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  overflow: visible;
}
.hero.hero-with-key .key-card-tilt {
  width: 82%;
  margin: 0;
}
.access-key-stage.is-moving .key-card-rotor,
.access-key-stage.is-dragging .key-card-tilt { will-change: transform; }
.hero.hero-with-key .key-card-scene:focus-visible {
  outline-offset: -6px;
  box-shadow: none;
}
.hero.hero-with-key .key-card-scene::before {
  left: 16%;
  right: 16%;
  bottom: 23%;
  height: 10%;
}
.hero.hero-with-key .key-card-caption {
  margin: 12px 0 0;
}

@media (max-width: 820px) {
  .hero.hero-with-key {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    min-height: 0;
    padding: 32px var(--page-gutter) 40px;
  }
  .hero.hero-with-key .hero-copy { max-width: 680px; }
  .hero.hero-with-key .access-key-stage {
    /* The artwork may use the gutters while copy and controls keep their inset. */
    width: calc(100% + var(--page-gutter) * 2);
    max-width: 560px;
    margin-inline: calc(-1 * var(--page-gutter));
    justify-self: center;
  }
  .hero.hero-with-key .key-card-caption {
    width: calc(100% - var(--page-gutter) * 2);
    margin: 8px auto 0;
  }
  .hero.hero-with-key .key-card-scene { aspect-ratio: 1.45; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .hero.hero-with-key h1 { font-size: clamp(44px, 5.2vw, 58px); }
  .hero.hero-with-key .hero-description { font-size: 16px; line-height: 1.65; }
  .hero.hero-with-key .key-card-tilt { width: 86%; }
}
@media (max-width: 580px) {
  .hero.hero-with-key {
    row-gap: 18px;
    padding-block: 24px 28px;
  }
}
/* Keep the reverse actions inside their grid at the smallest physical card size. */
@container (max-width: 250px) {
  #access-key-back .key-products strong { font-size: 22px; margin-bottom: 3px; }
  #access-key-back .key-product-action { font-size: 10px; line-height: 1.2; }
  #access-key-back .key-products button { padding-block: 3px; }
}

/* A phone keeps the same card width and full turn, with a shallower manual tilt.
   The paired 14-degree controller limit leaves at least 7px vertical clearance. */
@media (max-width: 580px), (max-width: 1000px) and (max-height: 500px) {
  .hero.hero-with-key .key-card-scene { aspect-ratio: 1.4; }
  .hero.hero-with-key .key-card-scene::before { bottom: 16%; }
}
@media (min-width: 581px) and (max-width: 1000px) and (max-height: 500px) {
  .hero.hero-with-key .access-key-stage { max-width: 430px; }
}