/* Homepage intro: outline traces, fills, one shine (same sweep as the About page logo), then the logo lands in the nav. */
#jsi-intro{display:none}
html.intro-on #jsi-intro{display:block;position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden}
html.intro-on,html.intro-on body{overflow:hidden}
html.intro-on nav .logo-img{opacity:0}
.ji-stage{position:absolute;inset:0;display:grid;place-items:center}
.ji-lw{position:relative;width:min(46vw,400px);aspect-ratio:373/170}
.ji-lw img{position:absolute;display:block}
.ji-base{position:relative!important;width:100%;visibility:hidden}
.ji-fl{left:0;top:0;width:100%;-webkit-mask-image:linear-gradient(100deg,#000 var(--p),transparent calc(var(--p) + 10%));mask-image:linear-gradient(100deg,#000 var(--p),transparent calc(var(--p) + 10%));--p:-12%}
.ji-ol{left:-2.68%;top:-5.88%;width:105.36%;-webkit-mask-image:linear-gradient(100deg,#000 var(--p),transparent calc(var(--p) + 10%));mask-image:linear-gradient(100deg,#000 var(--p),transparent calc(var(--p) + 10%));--p:-12%;filter:drop-shadow(0 0 7px rgba(255,255,255,.9)) drop-shadow(0 0 22px rgba(255,255,255,.45))}
.ji-sub{position:absolute;left:-50vw;right:-50vw;top:calc(100% + 1.2rem);text-align:center;font:500 clamp(.85rem,2vw,1.2rem) 'Inter',sans-serif;letter-spacing:.55em;text-transform:uppercase;color:#cfcfcf;opacity:0;padding-left:.55em;white-space:nowrap;background:linear-gradient(105deg,#cfcfcf 38%,#fff 50%,#cfcfcf 62%) no-repeat;background-size:300% 100%;background-position:93% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ji-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 40%,#fff 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:93% 0;-webkit-mask:url(/images/jsi-logo-mark.png) center/100% 100% no-repeat;mask:url(/images/jsi-logo-mark.png) center/100% 100% no-repeat}
@property --p{syntax:'<percentage>';inherits:true;initial-value:0%}
@media(max-width:600px){.ji-sub{letter-spacing:.4em;padding-left:.4em}}

.ji-shw{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(255,255,255,.35))}

/* One shine, same CSS animation and timing as the About page logo (layout-play.css abShine/abGlow), played once.
   CSS keyframes rather than element.animate() so Safari animates the background position. */
.ji-sheen.ji-go{opacity:1;animation:jiShine 1.4s ease-in-out 1 both}
.ji-sub.ji-go{animation:jiShine 1.4s ease-in-out 1 both,jiGlow 1.4s ease-in-out 1 both}
@keyframes jiShine{0%{background-position:93% 0}85%,100%{background-position:7% 0}}
@keyframes jiGlow{0%,85%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}42.5%{filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}}

html.intro-on,html.intro-on body{background:#000}