html[data-tbm="intro"],html[data-tbm="intro"] body{overflow:hidden}
html[data-tbm="intro"]::before{content:"";position:fixed;inset:0;background:#fbf8f4;z-index:9998}
#tbm-curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
#tbm-curtain .tbm-p{position:absolute;top:-2px;bottom:-2px;width:50.4%;background:#fbf8f4;will-change:transform;transition:transform 1.25s cubic-bezier(.76,0,.24,1)}
#tbm-curtain .tbm-l{left:0}
#tbm-curtain .tbm-r{right:0}
#tbm-curtain.tbm-go .tbm-l{transform:translateX(-101%)}
#tbm-curtain.tbm-go .tbm-r{transform:translateX(101%)}
#tbm-cv{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#tbm-logo{position:absolute;top:50%;left:50%;width:min(58vw,440px);z-index:3;opacity:0;will-change:transform,opacity;transform:translate(-50%,-50%) scale(.94)}
#tbm-curtain.tbm-in #tbm-logo{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .8s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
#tbm-curtain.tbm-out #tbm-logo{opacity:0;transform:translate(-50%,-50%) scale(1.3);transition:opacity .7s ease,transform 1.1s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){#tbm-curtain{display:none}html[data-tbm="intro"]::before{display:none}}

#tbm-flies{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden;pointer-events:none;z-index:6}
#tbm-flies .tbm-b{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--w);animation:tbm-drift var(--d) linear var(--dl) infinite}
#tbm-flies .tbm-b i{display:block;width:100%;height:100%;opacity:var(--o);background:url(/images/butterfly.svg) center/contain no-repeat;animation:tbm-flutter var(--f) ease-in-out var(--dl) infinite alternate}
@keyframes tbm-drift{
0%{transform:translate3d(0,7vh,0) rotate(calc(var(--dir) * -9deg));opacity:0}
12%{opacity:1}
28%{transform:translate3d(calc(var(--dir) * 7vw),-3vh,0) rotate(calc(var(--dir) * 11deg))}
52%{transform:translate3d(calc(var(--dir) * 16vw),8vh,0) rotate(calc(var(--dir) * -6deg))}
76%{transform:translate3d(calc(var(--dir) * 26vw),-5vh,0) rotate(calc(var(--dir) * 13deg))}
88%{opacity:1}
100%{transform:translate3d(calc(var(--dir) * 34vw),3vh,0) rotate(calc(var(--dir) * -7deg));opacity:0}
}
@keyframes tbm-flutter{from{transform:scaleX(.68)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){#tbm-flies{display:none}}
@media (max-width:720px){#tbm-flies .tbm-b:nth-child(n+6){display:none}}
