/* ITTI — wspólna warstwa animacji (/ i /aws/) nad /styles.css. Wszystko wyłącza body.motion-off. */

/* ---------- intro: monogram rysuje się, kurtyna z 4 kolumn ---------- */
.m-intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;cursor:pointer}
.m-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.m-cols i{background:var(--ink);margin-right:-1px}
.m-intro svg{position:relative;width:min(34vw,240px);height:auto;overflow:visible}
.m-intro polygon{fill:var(--paper);fill-opacity:0;stroke:var(--paper);stroke-width:6}
.m-intro-meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.1em;font-weight:500;color:var(--paper);opacity:.6}

/* ---------- podział nagłówków na słowa ---------- */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .16em .26em;margin:-.08em -.16em -.26em}
.m-wi{display:inline-block;transition:transform .95s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
.m-split:not(.is-in) .m-wi{transform:translateY(118%)}
.motion-off .m-wi{transform:none!important}

/* ---------- elementy list wjeżdżają po kolei ---------- */
.m-rise{transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--r,0) * 90ms)}
.m-rise:not(.is-in){opacity:0;transform:translateY(36px)}
.motion-off .m-rise{opacity:1!important;transform:none!important}

/* ---------- marquee ---------- */
.m-marquee{overflow:hidden;border-top:1px solid var(--line);padding:clamp(26px,4vw,48px) 0;user-select:none}
.m-track{display:flex;width:max-content;will-change:transform}
.m-item{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);padding-right:clamp(18px,2.4vw,36px);font-size:clamp(54px,9vw,150px);font-weight:500;letter-spacing:-.065em;line-height:1.05;white-space:nowrap}
.m-item:nth-child(even) b{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.m-item b{font-weight:inherit}
.m-item svg{width:.42em;height:auto;flex:none;fill:var(--ink)}
.motion-off .m-track{transform:none!important}

/* ---------- wiersze katalogu: wypełnienie od lewej ---------- */
.directory-row{isolation:isolate}
.directory-row::before{content:"";position:absolute;inset:0;z-index:-1;background:#22221e;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.directory-row:hover{background:transparent}
.directory-row:hover::before{transform:scaleX(1)}
.directory-row:not(:hover)::before{transform-origin:right}

/* ---------- magnetyczne elementy ---------- */
.m-mag{transition:translate .5s var(--ease)}
.m-mag.is-pulling{transition:translate .12s linear}

/* ---------- nagłówek chowa się przy scrollu w dół ---------- */
.header{transition:transform .45s var(--ease)}
.m-header-hidden .header{transform:translateY(-101%)}
.m-header-hidden.motion-off .header{transform:none}

/* ---------- litery falują po najechaniu ---------- */
.m-ch{display:inline-block;transition:transform .5s var(--ease);transition-delay:calc(var(--c,0) * 35ms)}
.contact h2>a:hover .m-ch,.aws-big-type:hover .m-ch{transform:translateY(-.12em)}
.contact h2>a:hover .m-ch:nth-child(even),.aws-big-type:hover .m-ch:nth-child(even){transform:translateY(.06em)}

/* ---------- zmiana motywu: koło z przycisku ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:m-reveal .75s cubic-bezier(.7,0,.2,1) both}
@keyframes m-reveal{from{clip-path:circle(0 at var(--m-x,100%) var(--m-y,0))}to{clip-path:circle(var(--m-r,150vmax) at var(--m-x,100%) var(--m-y,0))}}

/* ---------- pasek postępu ---------- */
.m-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;background:var(--ink);transform-origin:left;transform:scaleX(0);pointer-events:none}
.aws-page .m-progress{background:var(--aws-rule)}
.motion-off .m-progress{display:none}

/* ---------- /aws: wielkie AWS, linia akcentu, certyfikaty ---------- */
.aws-big-type .m-ch{transition:transform .9s var(--ease),opacity .6s;transition-delay:calc(var(--c,0) * 90ms)}
.aws-big-type:not(.is-in) .m-ch{transform:translateY(60%) rotate(8deg);opacity:0}
.aws-profile-note{position:relative;border-top-color:transparent}
.aws-profile-note::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--aws-rule);transform-origin:left;transition:transform 1.1s var(--ease) .2s}
.aws-profile-note:not(.is-in)::before{transform:scaleX(0)}
.aws-certs li{position:relative;isolation:isolate}
.aws-certs li::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -.35);z-index:-1;background:var(--contact-bg);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.aws-certs li:hover::before{transform:scaleX(1)}
.aws-certs li:not(:hover)::before{transform-origin:right}
.aws-certs li h3{transition:translate .45s var(--ease)}
.aws-certs li:hover h3{translate:10px 0}
.aws-skills article>span{transition:color .3s}
.aws-button{transition:outline-offset .3s var(--ease),translate .5s var(--ease)}
.motion-off .aws-big-type .m-ch{transform:none!important;opacity:1!important}
.motion-off .aws-profile-note::before{transform:none!important}