/* A black matte with a real window into the existing film behind it. */
html.intro-redirect,html.intro-redirect body{background:#000;color:#f5f1e9;}
.portfolio-intro{display:none;}
.intro-active .portfolio-intro{
  display:block;position:fixed;inset:0;z-index:9000;
  overflow:hidden;touch-action:none;color:#f5f1e9;
}
.intro-curtain{position:absolute;inset:0;width:100%;height:100%;fill:#000;opacity:1;}
.intro-name{font-family:'DM Sans',Arial,sans-serif;font-weight:900;letter-spacing:-.025em;}
.intro-logo-stage{position:absolute;inset:0;display:grid;place-items:center;background:#000;}
.intro-logo{width:clamp(96px,9vw,140px);height:auto;opacity:0;}
.intro-running .intro-logo{animation:intro-logo-flash 1.1s ease both;}
.intro-running .intro-logo-stage{animation:intro-logo-out 1.35s ease both;}
.intro-active .portfolio-nav,.intro-active .portfolio-social-footer,.intro-active .cinema-list{opacity:0;}
.intro-active #cur{visibility:hidden;}
.intro-active body.cursor-ready,.intro-active body.cursor-ready button{cursor:auto;}
.intro-active.intro-revealing .intro-curtain{opacity:0;transition:opacity 2.1s cubic-bezier(.4,0,.2,1);}
.intro-active.intro-revealing .portfolio-nav,
.intro-active.intro-revealing .portfolio-social-footer,
.intro-active.intro-revealing .cinema-list{opacity:1;transition:opacity 1.65s ease .35s;}
@keyframes intro-logo-flash{
  0%{opacity:0;transform:scale(.96);}
  16%,68%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(1);}
}
@keyframes intro-logo-out{0%,70%{opacity:1;}100%{opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .intro-active .portfolio-intro{display:none;}
  .intro-active .portfolio-nav,.intro-active .portfolio-social-footer,.intro-active .cinema-list{opacity:1;}
  .intro-active #cur{visibility:visible;}
}