/* A2 Digital Works — Einstieg „Ori schiebt das A2 an seinen Platz“ (Paket 80) */
.a2l{--W:min(460px,84vw);--lh:clamp(76px,min(22vw,12vh),108px);--lw:calc(var(--lh) * .933);--oh:calc(var(--lh) * 1.06);--ow:calc(var(--oh) * 1.0016);--tr:calc(var(--W) * .4);
  position:fixed;inset:0;z-index:300;overflow:hidden;background:var(--bg,#F7F8FA);color:var(--text,#0B1320);opacity:1;
  transition:opacity .7s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;touch-action:none}
.a2l *{box-sizing:border-box}
.a2l-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 42% at 50% 54%,rgba(37,99,235,.11),transparent 72%)}
.a2l-stage{--p:0;position:absolute;left:50%;top:56%;width:var(--W);height:0;translate:-50% 0;transition:scale .7s cubic-bezier(.4,0,.2,1)}
.a2l-floor{position:absolute;left:-6%;right:-6%;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text,#0B1320) 16%,transparent) 22%,color-mix(in srgb,var(--text,#0B1320) 16%,transparent) 78%,transparent)}
/* Spur hinter Ori = echter Ladefortschritt */
.a2l-trail{position:absolute;left:0;top:-1px;height:3px;border-radius:3px;transform-origin:0 50%;
  width:max(0px,calc(50% - var(--tr) * (1 - var(--p)) - var(--lw) / 2 - var(--ow) * .62));
  background:linear-gradient(90deg,rgba(37,99,235,0),#2563EB 60%,#5B8CFF);box-shadow:0 0 14px rgba(37,99,235,.45)}
.a2l-grp{position:absolute;left:50%;bottom:0;width:0;height:0;transform:translate3d(calc(var(--tr) * (var(--p) - 1)),0,0);will-change:transform}
.a2l:not(.go) .a2l-grp,.a2l:not(.go) .a2l-trail{visibility:hidden}
.a2l.go .a2l-grp{animation:a2l-in .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes a2l-in{from{opacity:0}to{opacity:1}}

.a2l-logo{position:absolute;left:calc(var(--lw) / -2);bottom:0;width:var(--lw);height:var(--lh);transform-origin:50% 100%}
.a2l-logo img{display:block;width:100%;height:100%;filter:drop-shadow(0 14px 18px rgba(29,78,216,.26)) drop-shadow(0 3px 5px rgba(11,19,32,.16))}
.a2l-logo:after{content:"";position:absolute;left:8%;right:8%;bottom:-5px;height:10px;border-radius:50%;background:radial-gradient(closest-side,rgba(11,19,32,.22),transparent);z-index:-1}

/* Ori als Bildfolge (Sprite): Schieben 30 Bilder (6×5, 12 fps, Higgsfield-Video freigestellt) · Winken 14 Bilder (1 Reihe, aus run-ori-loop) */
.a2l-ori{position:absolute;left:calc(var(--lw) / -2 - var(--oh) * .78);bottom:0;width:0;height:0}
.a2l-osh{position:absolute;left:calc(var(--oh) * -.02);bottom:-5px;width:calc(var(--oh) * .78);height:calc(var(--oh) * .09);border-radius:50%;background:radial-gradient(closest-side,rgba(11,19,32,.2),transparent);transition:opacity .4s}
.a2l-push,.a2l-wave{position:absolute;bottom:0;background-repeat:no-repeat;will-change:background-position}
.a2l-push{left:0;width:calc(var(--oh) * .937);height:calc(var(--oh) * 1.06);bottom:calc(var(--oh) * -.045);background-image:url(/img/intro/ori-push-sheet.webp?v=80);background-size:600% 500%;background-position:0 0}
.a2l.go .a2l-push{animation:a2l-px .5s steps(6,jump-none) infinite,a2l-py 2.5s steps(5,jump-none) infinite}
@keyframes a2l-px{from{background-position-x:0%}to{background-position-x:100%}}
@keyframes a2l-py{from{background-position-y:0%}to{background-position-y:100%}}
.a2l-wave{left:calc(var(--oh) * .02);width:calc(var(--oh) * .996);height:calc(var(--oh) * 1.43);bottom:calc(var(--oh) * -.08);opacity:0;background-image:url(/img/intro/ori-wave-sheet.webp?v=80);background-size:1400% 100%;background-position:0 0;transform-origin:50% 100%}
.a2l-say{position:absolute;left:calc(var(--oh) * .62);bottom:calc(var(--oh) * 1.06 + 6px);padding:8px 14px 9px;border-radius:16px 16px 16px 4px;background:var(--surface,#fff);color:var(--text,#0B1320);
  border:1px solid var(--line,#E4E7EE);box-shadow:0 14px 30px -16px rgba(11,19,32,.45);font:650 clamp(13px,1.6vw,15px)/1 'Space Grotesk',InterVar,system-ui,sans-serif;white-space:nowrap;
  opacity:0;scale:.4;transform-origin:0 100%}

/* Angekommen */
.a2l.is-there .a2l-push{opacity:0;transition:opacity .25s ease}
.a2l.is-there .a2l-wave{opacity:1;transition:opacity .25s ease;animation:a2l-wx 1.17s steps(14,jump-none) .1s forwards,a2l-wv 2.6s cubic-bezier(.45,0,.55,1) 1.4s infinite}
@keyframes a2l-wx{from{background-position-x:0%}to{background-position-x:100%}}
@keyframes a2l-wv{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
.a2l.is-there .a2l-say{animation:a2l-pop .55s cubic-bezier(.3,1.45,.5,1) .9s both}
@keyframes a2l-pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.a2l.is-there .a2l-logo{animation:a2l-settle .7s cubic-bezier(.3,.7,.4,1)}
@keyframes a2l-settle{0%,100%{scale:1 1}30%{scale:1.03 .95}62%{scale:.99 1.02}}
.a2l.is-there .a2l-trail{width:calc(50% - var(--lw) / 2 - var(--ow) * .62);transition:width .5s ease}

.a2l-wm{position:absolute;left:0;right:0;top:clamp(22px,3.6vh,36px);margin:0;text-align:center;font:600 clamp(14px,2vw,22px)/1 'Space Grotesk',InterVar,system-ui,sans-serif;
  letter-spacing:.3em;padding-left:.3em;color:var(--text,#0B1320);opacity:0;translate:0 6px;}
.a2l.is-there .a2l-wm{opacity:1;translate:0 0;transition:opacity .6s ease .25s,translate .8s cubic-bezier(.2,.8,.2,1) .25s}


.a2l-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.a2l.is-out{opacity:0;pointer-events:none}
.a2l.is-out .a2l-stage{scale:1.04}
@media (max-width:620px){.a2l{--tr:calc(var(--W) * .3)}}
@media (max-height:520px) and (orientation:landscape){.a2l{--lh:clamp(60px,20vh,96px)}.a2l-stage{top:60%}}
@media (prefers-reduced-motion:reduce){.a2l{display:none!important}}