/* Every 5s: 180ms gate/RGB slip and 300ms film wear; 900ms initial delay. */
.hero-photo{--gate-shift:2px;--gate-dim:.46;animation:portrait-gate 5s steps(1,end) .9s infinite}
.hero-photo.rgb-split{opacity:0;pointer-events:none;mix-blend-mode:screen;--rgb-opacity:.15;animation:portrait-rgb 5s steps(1,end) .9s infinite}
.hero-photo.rgb-red{--rgb-shift:3px;filter:grayscale(1) contrast(1.48) brightness(.77) url(#portrait-posterize) url(#portrait-red)}
.hero-photo.rgb-cyan{--rgb-shift:-3px;filter:grayscale(1) contrast(1.48) brightness(.77) url(#portrait-posterize) url(#portrait-cyan)}
.film-wear{position:absolute;z-index:-2;pointer-events:none;right:-12px;top:-36px;height:115%;width:51%;max-width:460px;opacity:0;--wear-strength:.12;background:url("assets/film-wear.svg") center/100% 100% no-repeat;-webkit-mask-image:radial-gradient(ellipse 63% 69% at 69% 46%,#000 42%,transparent 100%);mask-image:radial-gradient(ellipse 63% 69% at 69% 46%,#000 42%,transparent 100%);animation:film-wear 5s steps(1,end) .9s infinite}
@keyframes portrait-gate{0%,49.99%,53.6%,100%{transform:none;opacity:.5}50%{transform:translateX(var(--gate-shift));opacity:.48}51.2%{transform:translateX(calc(-1 * var(--gate-shift)));opacity:var(--gate-dim)}52.4%{transform:translateX(1px);opacity:.49}}
@keyframes portrait-rgb{0%,49.99%,53.6%,100%{opacity:0;transform:none}50%{opacity:var(--rgb-opacity);transform:translateX(var(--rgb-shift))}51.2%{opacity:var(--rgb-opacity);transform:translateX(calc(-.5 * var(--rgb-shift)))}52.4%{opacity:calc(var(--rgb-opacity) * .6);transform:translateX(var(--rgb-shift))}}
@keyframes film-wear{0%,49.39%,55.4%,100%{opacity:0;transform:none}49.4%{opacity:var(--wear-strength);transform:translateY(-2px)}51.8%{opacity:calc(var(--wear-strength) * .55);transform:translate(1px,1px)}54.2%{opacity:var(--wear-strength);transform:translateY(2px)}}
@media(max-width:550px){.hero-photo{--gate-shift:1px;--gate-dim:.48}.hero-photo.rgb-split{--rgb-opacity:.09}.hero-photo.rgb-red{--rgb-shift:1.5px}.hero-photo.rgb-cyan{--rgb-shift:-1.5px}.film-wear{right:-30px;top:-10px;width:61%;height:108%;--wear-strength:.065;-webkit-mask-image:radial-gradient(ellipse 70% 67% at 65% 48%,#000 34%,transparent 100%);mask-image:radial-gradient(ellipse 70% 67% at 65% 48%,#000 34%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){.hero-photo{animation:none!important;transform:none;opacity:.5}.hero-photo.rgb-split,.film-wear{animation:none!important;opacity:0;transform:none}}