/* A short desktop-only introduction before the exhibition cover. */
.selfie-intro{display:none}
@media (min-width:1025px) and (orientation:portrait),(min-width:768px) and (orientation:landscape){
  html.intro-pending .selfie-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:#fff;color:#111;animation:selfie-intro-fallback .45s ease 9s forwards}
  html.intro-running .selfie-intro{animation:selfie-intro-exit .55s ease 6.3s both}
  .selfie-intro__line{position:absolute;max-width:calc(100vw - 48px);margin:0;text-align:center;white-space:nowrap;font:400 clamp(18px,1.3vw,27px)/1.35 Poppins,Arial,sans-serif;letter-spacing:-.025em;opacity:0}
  html.intro-running .selfie-intro__line{animation:selfie-intro-phrase 2.1s cubic-bezier(.22,1,.36,1) both}
  html.intro-running .selfie-intro__line:nth-child(2){animation-delay:2.1s}
  html.intro-running .selfie-intro__line:nth-child(3){animation-name:selfie-intro-last;animation-delay:4.2s}
}
@keyframes selfie-intro-phrase{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-6px)}12%{opacity:1}40%,80%{opacity:1;clip-path:inset(0);transform:translateX(0)}100%{opacity:0;clip-path:inset(0);transform:translateX(0)}}
@keyframes selfie-intro-last{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-6px)}12%{opacity:1}40%,100%{opacity:1;clip-path:inset(0);transform:translateX(0)}}
@keyframes selfie-intro-exit{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes selfie-intro-fallback{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.selfie-intro{display:none!important;animation:none!important}}