/* Hero visual: portrait + column of six app icons. Sized with container units so
   the photo and the icon column always share the same height (photo ≈ 4:5):
   width 100 − g − s = 0.78 × (6s + 5g)  →  g = 2.4cqw, s ≈ 15.5cqw. */
.hero-visual {
  position: relative; width: min(560px, 100%); justify-self: end; min-width: 0;
  container-type: inline-size;
}
.hs { --g: 2.4cqw; --s: 15.5cqw; display: grid; grid-template-columns: minmax(0, 1fr) var(--s); gap: var(--g); align-items: stretch; }
.hs-photo {
  position: relative; margin: 0; height: calc(var(--s) * 6 + var(--g) * 5); border-radius: var(--r);
  overflow: hidden; background: var(--sunken); box-shadow: 0 0 0 1px var(--hair);
}
.hs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.hs-photo .hs-photo-next { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s var(--ease); }
.hs-photo .hs-photo-next.on { opacity: 1; }
.hs-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(6, var(--s)); gap: var(--g); }
.hs-apps li { position: relative; }
.hs-app, .hs-skel {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 23%; background: var(--sunken);
}
.hs-app img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform 0.35s var(--ease); }
.hs-app:hover img, .hs-app:focus-visible img { transform: translateY(-2px) scale(1.03); }
.hs-app:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hs-skel { animation: hs-pulse 1.4s ease-in-out infinite; }
@keyframes hs-pulse { 50% { opacity: 0.55; } }

/* Hover label: a light pill to the right of the icon (flips left when there's no room) */
.hs-tip {
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 2;
  padding: 7px 12px; border-radius: 9px; white-space: nowrap;
  background: var(--raised); color: var(--ink); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2;
  box-shadow: 0 0 0 1px var(--hair), 0 6px 18px -8px rgba(11, 13, 18, 0.18);
  display: none; transform: translate(0, -50%); pointer-events: none;
}
/* Only laid out while shown, so hidden labels never widen the page */
.hs-app.show .hs-tip { display: block; animation: hs-tip-in 0.18s var(--ease); }
.hs-app.flip .hs-tip { left: auto; right: calc(100% + 10px); }
@keyframes hs-tip-in { from { opacity: 0; transform: translate(-4px, -50%); } }
.hs-app.flip.show .hs-tip { animation-name: hs-tip-in-l; }
@keyframes hs-tip-in-l { from { opacity: 0; transform: translate(4px, -50%); } }

/* Brief highlight on the section an icon jumps to */
.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }

@media (max-width: 920px) {
  .hero-visual { justify-self: center; width: min(520px, 100%); margin-bottom: 18px; }
}
@media (hover: none) { .hs-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .hs-skel, .flash { animation: none; } }