/* photo-hero (client tokens only) */
.hero{ position:absolute; inset:0; overflow:clip; }
.hero-expr{ position:absolute; right:-4%; top:-8%; width:74%; height:116%; opacity:0; transform:scale(.96); transform-origin:70% 50%;
  transition:opacity .3s var(--ease), transform .6s var(--ease); mix-blend-mode:multiply; pointer-events:none; }
.hero-expr svg{ width:100%; height:100%; display:block; }
.hero-expr svg path, .hero-expr svg circle{ fill:var(--c-accent); opacity:.9; }
.hero.is-expr .hero-expr{ opacity:1; transform:none; }
/* watermark expression: the symbol large, in the on-photo colour, translucent, centred on the picture */
.hero-expr--wm{ right:auto; left:var(--vx); width:var(--vw); top:3%; height:94%; mix-blend-mode:normal; transform-origin:50% 50%;
  transition:opacity .45s var(--ease), transform .6s var(--ease), left .7s var(--ease), width .7s var(--ease); }
.hero-expr--wm svg path, .hero-expr--wm svg circle{ fill:var(--c-on-photo); opacity:1; }
.hero.is-expr .hero-expr--wm{ opacity:.35; }
/* a switcher option's own photo, crossfaded over the stage photo */
.hero-alt{ position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease); }
.hero-alt.is-on{ opacity:1; }
.hero-mark{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:48%;   /* in the sky, above the horizon */ display:grid; place-items:center; color:var(--c-on-photo);
  transition:left .7s var(--ease), width .7s var(--ease); pointer-events:none; }
.hero-mark .lg{ width:56%; height:30%; filter:drop-shadow(0 6px 30px rgba(0,0,0,.25)); }
.hero-caption{ position:absolute; right:33px; bottom:33px; margin:0; max-width:320px; font:500 13px/1.5 var(--c-body); color:var(--c-on-photo); opacity:.85; text-align:right; }