/* Quiet grey-to-photograph transition, with a left-aligned identity. */
.hero .opening-message{position:fixed;inset:0;z-index:110;display:block;padding:0;background:#7c8489;color:#fff;pointer-events:none;overflow:hidden;animation:identity-dismiss 2.7s both}
.opening-identity{position:absolute;top:44px;left:40px;display:flex;flex-direction:column;gap:30px;align-items:flex-start;animation:identity-enter 2.2s both}
.opening-identity span{font:400 2rem/1.2 Georgia,serif;letter-spacing:.025em}
.opening-identity img{width:48px;height:48px;filter:brightness(0) invert(1)}
body:has(.opening-identity) .header>.menu{animation:identity-menu-enter .8s 4.2s both}
body:has(.opening-identity) .header>.brand{animation:identity-brand-enter .9s 2.6s both}
@keyframes identity-enter{0%,10%{opacity:0;transform:translateY(7px)}40%,70%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes identity-dismiss{0%,52%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes identity-menu-enter{0%{opacity:0;visibility:hidden;transform:translate(-50%,12px)}1%{visibility:visible}100%{opacity:1;visibility:visible;transform:translate(-50%,0)}}
@keyframes identity-brand-enter{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@media(max-width:700px){.opening-identity{top:32px;left:24px}.opening-identity span{font-size:1.75rem}}
@media(prefers-reduced-motion:reduce){.hero .opening-message{display:none}body:has(.opening-identity) .header>.menu,body:has(.opening-identity) .header>.brand{animation:none;opacity:1;visibility:visible}}