/* Dome geometry adapted from KAOPU-XiaoPu/web-design and David Haz's
   DomeGallery. Copyright and license notices are in avatar-gallery.js. */
.avatar-gallery {
  --avatar-background: var(--stone-900, #25231C);
  --avatar-copy-color: rgba(245, 243, 239, .74);
  --avatar-caption-color: rgba(250, 248, 243, .6);
  position: relative;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 56px);
  background: var(--avatar-background);
  color: var(--paper);
  font-family: var(--sans);
  isolation: isolate;
}
.avatar-gallery-copy {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px var(--body-gap, 64px);
  width: min(var(--content-width, 1240px), calc(100% - 2 * var(--page-gutter, 24px)));
  max-width: 1240px;
  padding: 0;
  margin: 0 auto 24px;
}
.avatar-gallery-heading { display: contents; }
.avatar-gallery-intro { grid-column: 2; grid-row: 2; align-self: start; }
.avatar-gallery-kicker {
  grid-column: 1;
  grid-row: 1;
  display: block;
  margin-bottom: 18px;
  color: var(--green-400);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.avatar-gallery h2 {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--sans);
  font-size: clamp(36px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.avatar-gallery h2 em {
  display: block;
  font-family: var(--sans);
  font-weight: 450;
  font-size: 1.06em;
  letter-spacing: -.025em;
}
@media (min-width: 1101px) {
  .avatar-gallery-copy { grid-template-columns: minmax(0, 1fr) 340px; }
  .avatar-gallery h2 em { display: inline; }
}
.avatar-gallery-copy p {
  max-width: 340px;
  margin: 0 0 24px;
  color: var(--avatar-copy-color);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
.avatar-gallery-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 13px 23px;
  border: 1px solid var(--action);
  border-radius: 999px;
  background: var(--action);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}
.avatar-gallery-cta:hover { background: var(--action-hover); border-color: var(--action-hover); }
.avatar-gallery-cta span { font-size: 20px; line-height: 1; }
.avatar-gallery-stage { position: relative; padding: 28px 24px 48px; }
/* Reserve the dome height while its decorative copies wait for Hero readiness.
   The grid without JavaScript keeps its natural height and all 40 portraits. */
html.has-js .avatar-gallery:not(.is-interactive) .avatar-gallery-stage { height:clamp(640px,70svh,720px); padding:0; overflow:hidden; }
html.has-js .avatar-gallery:not(.is-interactive) .avatar-gallery-deck { visibility:hidden; }
@media(max-width:800px){html.has-js .avatar-gallery:not(.is-interactive) .avatar-gallery-stage{height:560px}}
@media(max-width:700px){html.has-js .avatar-gallery:not(.is-interactive) .avatar-gallery-stage{height:520px}}
.avatar-gallery-deck {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin: auto;
}
.avatar-portrait { position: relative; margin: 0; aspect-ratio: 1; }
.avatar-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--on-dark-line, #3B3830);
  color: inherit;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 650ms ease;
  -webkit-tap-highlight-color: transparent;
}
.avatar-tile:disabled { cursor: default; }
.avatar-tile img, .avatar-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.avatar-tile video { position: absolute; inset: 0; opacity: 0; }
.avatar-tile video.is-ready { opacity: 1; }
.avatar-portrait.is-previewing .avatar-tile {
  transform: translateZ(0) scale(1.1);
  box-shadow: 0 0 0 2px var(--action-on-dark), 0 14px 32px #0008;
}
.is-dome .avatar-portrait.is-selected .avatar-tile {
  /* Full-size surface from the first frame. Only its transform is animated;
     scale(.5) restores the thumbnail size while the return motion runs. */
  width: calc(var(--dome-tile-size) * 2 - var(--dome-tile-inset) * 4);
  height: calc(var(--dome-tile-size) * 2 - var(--dome-tile-inset) * 4);
  left: calc(var(--dome-tile-inset) * 2 - var(--dome-tile-size) / 2);
  top: calc(var(--dome-tile-inset) * 2 - var(--dome-tile-size) / 2);
  transform: translateZ(0) scale(.5);
  border-radius: 24px;
  transition: box-shadow 800ms ease;
}
.is-dome.has-selection .avatar-portrait.is-selected .avatar-tile {
  transform: translateZ(32px) scale(1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--action-on-dark) 50%, transparent), 0 22px 60px #0009;
}
.is-dome.has-selection .avatar-portrait:not(.is-selected) .avatar-tile {
  opacity: .5;
}
/* The soft background is a shared 128px WebP, prepared at build time.
   Cross-fading the sharp poster avoids 175 animated GPU blur filters. */
.is-dome .avatar-tile { background-image: var(--avatar-blur); background-size: cover; }
.is-dome .avatar-tile > img { transition: opacity 650ms ease; }
.is-dome.has-selection .avatar-portrait:not(.is-selected) .avatar-tile > img { opacity: 0; }
.is-dome.has-selection .avatar-rear { opacity: .3; }
.avatar-gallery-controls { display: none; }
.avatar-gallery-focus { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
.avatar-gallery-focus[hidden] { display: none; }
.avatar-gallery-focus video { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-gallery-profile {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: min(360px, calc(100% - 32px));
  padding: 8px 20px 14px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  background: radial-gradient(ellipse, #25231cf2 25%, #25231caa 58%, transparent 75%);
  text-shadow: 0 2px 8px #000;
  transition: opacity 260ms ease, transform 360ms ease, visibility 260ms;
}
.avatar-gallery-profile.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.avatar-profile-name { margin: 0; color: var(--paper); font: 500 24px/1.2 var(--sans); letter-spacing: -.02em; }
.avatar-profile-role { margin: 8px 0 0; color: var(--green-400); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.avatar-profile-date { margin: 9px 0 0; color: var(--avatar-caption-color); font-size: 11px; line-height: 1.5; }
.avatar-static-profile { display: grid; gap: 5px; padding: 12px 0 4px; text-align: center; line-height: 1.4; }
.avatar-static-profile strong { font-size: 14px; font-weight: 500; }
.avatar-static-profile span { font-size: 11px; color: var(--green-400); }
.avatar-static-profile small { font-size: 10px; color: var(--avatar-caption-color); }
.is-dome .avatar-static-profile { display: none; }
.avatar-gallery:not(.is-dome) .avatar-portrait { aspect-ratio: auto; }
.avatar-gallery:not(.is-dome) .avatar-tile { height: auto; aspect-ratio: 1; }
.avatar-hint-touch { display: none; }

/* Perspective and tile positions are fixed; only the parent rotates. */
.is-dome .avatar-gallery-stage {
  --dome-radius: 680px;
  --dome-tile-size: calc(var(--dome-radius) * 6.28318530718 / 35);
  --dome-tile-inset: 12px;
  height: clamp(640px, 70svh, 720px);
  padding: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}
.is-dome .avatar-gallery-viewport {
  position: absolute;
  inset: 0;
  perspective: calc(var(--dome-radius) * 2);
  perspective-origin: 50% 50%;
  contain: layout paint size;
}
.is-dome .avatar-gallery-deck {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  transform-style: preserve-3d;
}
.is-rotating .avatar-gallery-deck,
.is-focusing .avatar-gallery-deck,
.is-dragging .avatar-gallery-deck { will-change: transform; }
.is-dome .avatar-portrait {
  position: absolute;
  width: var(--dome-tile-size);
  height: var(--dome-tile-size);
  top: calc(var(--dome-tile-size) / -2);
  left: calc(var(--dome-tile-size) / -2);
  transform-style: preserve-3d;
  pointer-events: none;
}
.is-dome .avatar-tile, .is-dome .avatar-rear {
  position: absolute;
  inset: var(--dome-tile-inset);
  width: calc(100% - var(--dome-tile-inset) * 2);
  height: calc(100% - var(--dome-tile-inset) * 2);
  backface-visibility: hidden;
  pointer-events: none;
}
.is-dome .avatar-portrait.is-front .avatar-tile:not(:disabled) { pointer-events: auto; }
.is-dome .is-front-culled .avatar-tile,
.is-dome .is-rear-culled .avatar-rear { visibility: hidden; }
.is-dome.has-selection .avatar-gallery-stage { cursor: default; }
.is-dome .avatar-rear {
  border-radius: 12px;
  object-fit: cover;
  transform: rotateY(180deg) translateZ(1px);
  opacity: .45;
  transition: opacity 650ms ease;
  user-select: none;
  -webkit-user-select: none;
}
.is-dome .avatar-gallery-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(var(--avatar-background), transparent 11%, transparent 83%, var(--avatar-background) 98%);
}
.is-dragging, .is-dragging .avatar-tile { cursor: grabbing; }
.is-dome .avatar-gallery-controls {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.avatar-gallery-hint { margin: 0; color: var(--avatar-caption-color); font-size: 11px; letter-spacing: .04em; }
.avatar-hint-selected, .has-selection .avatar-gallery-hint > .avatar-hint-pointer,
.has-selection .avatar-gallery-hint > .avatar-hint-touch { display: none; }
.has-selection .avatar-hint-selected { display: inline; }
.avatar-gallery-pause {
  border: 1px solid var(--on-dark-line);
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  color: var(--action-on-dark);
  font: 600 11px var(--sans);
  cursor: pointer;
}
.avatar-gallery-pause:hover { border-color: var(--action-on-dark); color: var(--action-on-dark-hover); }
.avatar-gallery-pause[hidden] { display: none; }
.avatar-tile:focus-visible, .avatar-gallery-pause:focus-visible,
.avatar-gallery-cta:focus-visible, .avatar-gallery-stage:focus-visible {
  outline: 2px solid var(--action-on-dark);
  outline-offset: 4px;
}
.avatar-gallery-stage:focus-visible { outline-offset: -5px; }
@media (max-width: 800px) {
  .is-dome .avatar-gallery-stage { height: 560px; }
  .avatar-gallery-copy { grid-template-columns: 1fr; row-gap: 16px; padding: 0; text-align: left; }
  .avatar-gallery-intro { grid-column: 1; grid-row: 3; margin-top: 8px; }
  .avatar-gallery-copy p { margin: 0 0 18px; }
}
@media (max-width: 700px) {
  .avatar-gallery-copy { margin-bottom: 20px; row-gap: 16px; }
  .avatar-gallery h2 { font-size: clamp(30px, 9vw, 36px); }
  .avatar-gallery-copy p { max-width: 300px; font-size: 15px; }
  .avatar-gallery-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .is-dome .avatar-gallery-stage { height: 520px; --dome-tile-inset: 8px; }
  .is-dome .avatar-tile, .is-dome .avatar-rear { border-radius: 8px; }
  .is-dome .avatar-portrait.is-selected .avatar-tile { border-radius: 16px; }
  .is-dome .avatar-gallery-controls { gap: 12px; left: 12px; right: 12px; flex-wrap: wrap; }
  .avatar-gallery-hint { font-size: 10px; }
  .avatar-gallery-pause { font-size: 10px; padding: 8px 10px; }
  .avatar-profile-name { font-size: 22px; }
  .avatar-profile-role { font-size: 11px; }
}
@media (hover: none) {
  .avatar-hint-pointer { display: none; }
  .avatar-hint-touch { display: inline; }
}