/* motion.css: the shared movement (reveal.js) and the white-logo treatment (clients.js).
   transform + opacity only; reduced motion shows everything at rest. */

/* reveal: an element rises into place the first time it is seen; --i staggers siblings */
.rv [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.22,.8,.24,1);transition-delay:calc(var(--i,0) * 90ms)}
.rv [data-reveal].in{opacity:1;transform:none}

/* a white cut-out logo; its own colours on hover, on a light chip so dark logos still read */
.lg{position:relative;display:inline-grid;place-items:center;flex:none;height:64px;padding:10px 18px;border-radius:14px}
/* an explicit height: a percentage here would size against the image itself */
.lg img{grid-area:1/1;height:44px;width:auto;max-width:170px;object-fit:contain;transition:opacity .35s ease}
.lg__c{opacity:0}
.lg::before{content:"";grid-area:1/1;position:absolute;inset:0;border-radius:inherit;background:oklch(98% .006 260);
  opacity:0;transform:scale(.9);transition:opacity .35s ease,transform .35s cubic-bezier(.22,.8,.24,1)}
.lg img{position:relative}
.lg--mono img:first-child{opacity:.78}
@media (hover:hover){
  .lg--mono:hover::before{opacity:1;transform:none}
  .lg--mono:hover img:first-child{opacity:0}
  .lg--mono:hover .lg__c{opacity:1}
}
@media (prefers-reduced-motion:reduce){.lg::before,.lg img{transition:none}}

/* the reading-progress line, just under the sticky header */
.readbar{position:fixed;top:0;inset-inline:0;height:3px;z-index:30;background:var(--cyan);transform:scaleX(0);transform-origin:right;pointer-events:none}
html[dir=ltr] .readbar{transform-origin:left}

/* a heading rising word by word (motion.js wraps each word) */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block:.08em;margin-block:-.08em}
.sw > span{display:inline-block}
.rv [data-split][data-reveal]{opacity:1;transform:none}
.rv [data-split] .sw > span{transform:translateY(105%);transition:transform .8s cubic-bezier(.22,.8,.24,1);transition-delay:calc(var(--w,0) * 70ms)}
.rv [data-split].in .sw > span{transform:none}

/* magnetic buttons and tilting cards ease back when the pointer leaves */
[data-magnet]{transition:transform .35s cubic-bezier(.22,.8,.24,1)}
[data-tilt]{transform-style:preserve-3d;will-change:transform}

/* the light under the pointer on a dark section */
[data-spot]{position:relative;overflow:hidden}
.spot{position:absolute;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(closest-side,oklch(80.8% .139 209 / .16),transparent);transition:opacity .5s ease}
[data-spot]:hover > .spot{opacity:1}

/* ── the character (renders of the 3D one, public/brand/darjo) ────────────
   .buddy: two stacked renders taking turns read as a wave; it floats on a shadow */
.buddy{position:relative;margin:0;justify-self:center;width:min(62vw,300px);aspect-ratio:418/699}
.buddy img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}
.buddy__b{opacity:0}
.buddy__shadow{position:absolute;left:18%;right:18%;bottom:-6px;height:18px;border-radius:50%;background:oklch(5% .03 272 / .6);filter:blur(6px)}
@media (prefers-reduced-motion:no-preference){
  .buddy img{animation:buddy-float 4s ease-in-out infinite}
  .buddy__a{animation:buddy-float 4s ease-in-out infinite,buddy-a 2.4s steps(1) infinite}
  .buddy__b{animation:buddy-float 4s ease-in-out infinite,buddy-b 2.4s steps(1) infinite}
  .buddy__shadow{animation:buddy-shadow 4s ease-in-out infinite}
}
@keyframes buddy-float{50%{transform:translateY(-14px)}}
@keyframes buddy-shadow{50%{transform:scaleX(.82);opacity:.6}}
@keyframes buddy-a{0%,100%{opacity:1}55%{opacity:0}85%{opacity:1}}
@keyframes buddy-b{0%,100%{opacity:0}55%{opacity:1}85%{opacity:0}}
.buddy--sm{width:min(30vw,120px)}
.buddy--lost .buddy__a{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.buddy--lost .buddy__a{animation:buddy-float 4s ease-in-out infinite,buddy-look 5s ease-in-out infinite}}
@keyframes buddy-look{0%,100%{rotate:0deg}30%{rotate:-4deg}60%{rotate:4deg}}

/* ── content that arrives after load (job cards, tracked applications) ── */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .jobs .job{animation:rise .55s cubic-bezier(.22,.8,.24,1) both;animation-delay:calc(min(var(--i,0),12) * 45ms)}
  .apps .app{animation:rise .55s cubic-bezier(.22,.8,.24,1) both}
  .apps .app:nth-child(2){animation-delay:.08s} .apps .app:nth-child(3){animation-delay:.16s} .apps .app:nth-child(n+4){animation-delay:.24s}
  /* a tracked application's stages light up one after the other */
  .app .steps li{animation:rise .45s ease both}
  .app .steps li:nth-child(1){animation-delay:.2s} .app .steps li:nth-child(2){animation-delay:.3s} .app .steps li:nth-child(3){animation-delay:.4s}
  .app .steps li:nth-child(4){animation-delay:.5s} .app .steps li:nth-child(5){animation-delay:.6s} .app .steps li:nth-child(n+6){animation-delay:.7s}
  .app .steps li.now i{animation:now-pulse 1.8s ease-in-out infinite .9s}
}
@keyframes now-pulse{50%{transform:scale(1.25)}}

/* ── success: the tick pops and sends out a ring ─────────────────────── */
.done .tick{position:relative}
.done .tick::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ok);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .done:not([hidden]) .tick{animation:tick-pop .55s cubic-bezier(.22,.8,.24,1) both}
  .done:not([hidden]) .tick::after{animation:tick-ring 1.1s ease-out .35s both}
  .done:not([hidden]) .tick svg{animation:rise .4s ease .2s both}
}
@keyframes tick-pop{from{transform:scale(.5) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@keyframes tick-ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.done .buddy{margin-bottom:-6px}

/* ── a photo that settles in, and a character peeking from its corner ── */
@media (prefers-reduced-motion:no-preference){.settle{animation:settle 1.4s cubic-bezier(.22,.8,.24,1) both}}
@keyframes settle{from{transform:scale(1.07);opacity:.4}to{transform:none;opacity:1}}
.peek{position:relative}
.peek .buddy{position:absolute;inset-inline-end:-10px;bottom:-14px;width:clamp(78px,11vw,128px);z-index:2}
/* the hero's photo rule (crop, rounded) must not reach the character inside it */
.hero .peek .buddy img{aspect-ratio:auto;width:100%;height:100%;object-fit:contain;border-radius:0}
.hero .peek > img{display:block;height:auto}   /* the height="1200" attribute would win over the 4:3 ratio */