/* Optional opening studies; activated only by the openingMotion preview query. */
.motion-demo .identity-frame{isolation:isolate}
.motion-demo .identity-frame>h1,.motion-demo .identity-frame>p{position:relative;z-index:2}
.motion-flash,.motion-seed,.motion-lens{pointer-events:none;position:absolute;opacity:0;z-index:1}
.motion-flash{inset:-22px;background:radial-gradient(ellipse at 60% 40%,#fff0d7,transparent 72%);border-radius:40%;mix-blend-mode:screen}
.motion-seed{height:1px;width:100%;background:var(--accent);left:0;top:0;transform-origin:center}
.motion-lens{width:260px;aspect-ratio:1;border:1px solid #b86a554f;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.motion-lens:before,.motion-lens:after{content:'';position:absolute;border-radius:50%}
.motion-lens:before{inset:12px;border:1px dashed #c8c0ac55}
.motion-lens:after{inset:33px;border:1px solid #c8c0ac33;clip-path:polygon(0 0,75% 0,75% 100%,0 100%)}
.motion-demo[data-motion="frame"] .identity-frame:before{transform-origin:top right;animation:frame-grow .75s cubic-bezier(.16,1,.3,1) both}
.motion-demo[data-motion="frame"] .identity-frame:after{transform-origin:bottom left;animation:frame-grow .75s .08s cubic-bezier(.16,1,.3,1) both}
.motion-demo[data-motion="frame"] h1{animation:soft-rise .7s .12s both}
.motion-demo[data-motion="frame"] .refined-role{animation:soft-rise .6s .22s both}
.motion-demo[data-motion="frame"] .refined-story{animation:soft-rise .5s .48s both}
.motion-demo[data-motion="flash"] .motion-flash{animation:warm-flash .95s both}
.motion-demo[data-motion="flash"] h1,.motion-demo[data-motion="flash"] .refined-role{animation:flash-reveal .8s both}
.motion-demo[data-motion="flash"] .identity-frame:before,.motion-demo[data-motion="flash"] .identity-frame:after{animation:flash-reveal .75s both}
.motion-demo[data-motion="flash"] .refined-story{animation:soft-rise .55s .4s both}
.motion-demo[data-motion="reveal"] h1{animation:edge-reveal .8s cubic-bezier(.2,.75,.25,1) both}
.motion-demo[data-motion="reveal"] .refined-role{animation:edge-reveal .65s .2s both}
.motion-demo[data-motion="reveal"] .refined-story{animation:edge-reveal .55s .4s both}
.motion-demo[data-motion="reveal"] .identity-frame:before,.motion-demo[data-motion="reveal"] .identity-frame:after{animation:quiet-in .3s both}
.motion-demo[data-motion="cut"] h1,.motion-demo[data-motion="cut"] .refined-role{animation:quiet-in .32s both}
.motion-demo[data-motion="cut"] .identity-frame:before{animation:corner-cut .85s cubic-bezier(.2,.8,.2,1) both}
.motion-demo[data-motion="cut"] .identity-frame:after{animation:quiet-in .35s both}
.motion-demo[data-motion="cut"] .refined-story{animation:soft-rise .4s .6s both}
.motion-demo[data-motion="story"] .motion-seed{animation:story-line 1.1s cubic-bezier(.2,.75,.2,1) both}
.motion-demo[data-motion="story"] .identity-frame:before,.motion-demo[data-motion="story"] .identity-frame:after{animation:story-corner .8s .3s both}
.motion-demo[data-motion="story"] h1{animation:soft-rise .6s .28s both}
.motion-demo[data-motion="story"] .refined-role{animation:soft-rise .5s .42s both}
.motion-demo[data-motion="story"] .refined-story{animation:soft-rise .5s .62s both}
.motion-demo[data-motion="lens"] .motion-lens{animation:lens-turn 1.25s cubic-bezier(.2,.6,.3,1) both}
.motion-demo[data-motion="lens"] h1{animation:find-focus 1.05s both}
.motion-demo[data-motion="lens"] .identity-frame:before,.motion-demo[data-motion="lens"] .identity-frame:after{animation:focus-frame 1.8s .1s ease-in-out both}
.motion-demo[data-motion="lens"] .refined-role{animation:quiet-in .55s .35s both}
.motion-demo[data-motion="lens"] .refined-story{animation:soft-rise .45s .7s both}
@keyframes frame-grow{from{opacity:0;transform:scale(.08)}to{opacity:1;transform:scale(1)}}
@keyframes soft-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes quiet-in{from{opacity:0}to{opacity:1}}
@keyframes warm-flash{0%{opacity:0;transform:scale(.95)}18%{opacity:.18}100%{opacity:0;transform:scale(1.05)}}
@keyframes flash-reveal{0%{opacity:0}20%{opacity:.75}100%{opacity:1}}
@keyframes edge-reveal{from{clip-path:inset(0 0 100% 0);transform:translateY(13px);opacity:.3}to{clip-path:inset(0);transform:translateY(0);opacity:1}}
@keyframes corner-cut{0%{opacity:0;transform:translate(13px,-8px)}25%,55%{opacity:1;transform:translate(13px,-8px)}100%{opacity:1;transform:translate(0)}}
@keyframes story-line{0%{opacity:0;transform:scaleX(.025)}15%{opacity:1;transform:scaleX(.06)}65%{opacity:.7;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes story-corner{0%{opacity:0;transform:scale(.75)}100%{opacity:1;transform:scale(1)}}
@keyframes lens-turn{0%{opacity:0;transform:translate(-50%,-50%) rotate(-26deg) scale(.91)}22%{opacity:.7}65%{opacity:.3}100%{opacity:0;transform:translate(-50%,-50%) rotate(12deg) scale(1)}}
@keyframes find-focus{0%{opacity:0;filter:blur(3px);transform:scale(1.025)}35%{opacity:.85;filter:blur(1px)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes focus-frame{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.motion-demo *,.motion-demo *:before,.motion-demo *:after{animation:none!important;transition:none!important}.motion-flash,.motion-seed,.motion-lens{display:none}}