/* The Lockstep Interactive intro (brand/lockstep/lockstep-logo-intro.html), about 3.5 s, CSS only. It plays once when the studio
   section scrolls into view (js/studio.js adds .play); without a script, with reduced motion, or before that, the logo rests as the
   still hero version. The animation rules are the brand file's own, scoped to .studio-intro.play. */
.studio-intro { display: block; width: 100%; max-width: 760px; height: auto; overflow: visible; }
.studio-intro.play .pL{animation:inL 1.05s steps(4,end) both} .studio-intro.play .pS{animation:inS 1.05s steps(4,end) both}
@keyframes inL{from{transform:translate(-150px,150px);opacity:.0}25%{opacity:1}to{transform:none;opacity:1}}
@keyframes inS{from{transform:translate(150px,-150px);opacity:0}25%{opacity:1}to{transform:none;opacity:1}}
.studio-intro.play .glow{animation:glow 1.2s ease-out 1.05s both} @keyframes glow{from{opacity:0}25%{opacity:1}to{}}
.studio-intro.play .flash{transform-box:fill-box;transform-origin:center;animation:flash .5s ease-out 1.02s both}
@keyframes flash{from{opacity:0;transform:scale(.2)}20%{opacity:.95;transform:scale(2.2)}to{opacity:0;transform:scale(5)}}
.studio-intro.play .sheen{animation:sheen 1.3s cubic-bezier(.45,0,.25,1) 1.2s both} @keyframes sheen{from{transform:translate(-160px,0)}to{transform:translate(960px,0)}}
.studio-intro.play .w1{animation:wipe .7s cubic-bezier(.2,.7,.2,1) 1.35s both} .studio-intro.play .w2{animation:wipe2 .8s cubic-bezier(.2,.7,.2,1) 1.75s both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);transform:translateX(-14px)}to{clip-path:inset(0 -5% 0 0);transform:none}}
@keyframes wipe2{from{clip-path:inset(0 100% 0 0);opacity:.2;letter-spacing:0}to{clip-path:inset(0 -5% 0 0);opacity:1}}
.studio-intro.play .tglow{animation:tg 1.4s ease-out 2.2s both} @keyframes tg{from{opacity:0}40%{opacity:.9}to{opacity:.55}}
.studio-intro.play .pL,.studio-intro.play .pS{transform-box:view-box}
.studio-intro .pL, .studio-intro .pS { transform-box: view-box; }
@media (prefers-reduced-motion: reduce) { .studio-intro * { animation: none !important; } }
/* at rest (no animation): the flash and the sheen are effects only, never part of the still logo */
.studio-intro:not(.play) .flash, .studio-intro:not(.play) .sheen { visibility: hidden; }
/* armed by js/studio.js (motion allowed): the pieces wait off stage until the intro plays */
.studio-intro.armed:not(.play) .pL, .studio-intro.armed:not(.play) .pS, .studio-intro.armed:not(.play) .w1, .studio-intro.armed:not(.play) .w2 { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .studio-intro.armed:not(.play) .pL, .studio-intro.armed:not(.play) .pS, .studio-intro.armed:not(.play) .w1, .studio-intro.armed:not(.play) .w2 { opacity: 1; } }