/* The hero wall on conference-2026.html: the WebGL wall behind the hero, its CSS-only
   fallback, and the pointer bits (label, the View Transition ghost, the landing outline).
   The wall itself is js/wall.js. Assets in assets/wall/ come from marketing/build_hero_wall.py. */

.hero--wall{min-height:88svh}
.hero--wall .hero-media{pointer-events:auto}
.hero--wall .hero-media::after{
  pointer-events:none;
  /* lighter than the old video's scrim: the shader darkens the band behind the headline itself */
  background:linear-gradient(180deg,rgba(5,10,26,.40) 0%,rgba(5,10,26,.30) 45%,rgba(5,10,26,.84) 100%);
}
.hero--wall .hero-media canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hero--wall .hero-media canvas.is-link{cursor:pointer}

/* the sprite video is a texture source, never seen directly; kept in the layout so iOS keeps decoding it */
.wall-clips{position:fixed;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none}

/* pointer label on a faculty tile */
.wall-tip{
  position:absolute;z-index:2;pointer-events:none;white-space:nowrap;
  font-family:var(--text);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory);background:rgba(5,10,26,.78);border:1px solid rgba(217,179,108,.5);
  padding:9px 12px;border-radius:8px;transform:translate(16px,18px);
}
.wall-tip small{display:block;margin-top:3px;font-weight:400;letter-spacing:.08em;text-transform:none;color:var(--dim)}

/* the ghost that carries a face from the wall to its card (View Transitions) */
.wall-ghost{position:fixed;z-index:60;object-fit:cover;border-radius:4px;pointer-events:none;margin:0}
::view-transition-group(spk){animation-duration:.62s;animation-timing-function:cubic-bezier(.19,1,.22,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s}
.spk-card.is-target{outline:2px solid var(--gold);outline-offset:4px;transition:outline-color 1.2s ease}
.spk-card.is-target.fade{outline-color:transparent}

/* CSS-only fallback wall (no WebGL2, or ?nogl=1). The [hidden] rule matters: without it this
   layer's own display rule wins over the browser's [hidden] and it sits over the canvas eating the pointer. */
.wall-css[hidden]{display:none}
.wall-css{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:12px;perspective:1100px;perspective-origin:50% 50%}
.wall-css .row{display:flex;justify-content:center;gap:12px;transform-style:preserve-3d}
.wall-css .t{
  flex:0 0 auto;width:clamp(72px,9.5vw,132px);aspect-ratio:4/5;
  background-repeat:no-repeat;filter:brightness(.72);
  transform:rotateY(var(--ry)) translateZ(var(--tz));
}
.wall-css .t.spk{filter:brightness(.86)}