/* motion.css: thematic motion layer ("slide in a digital pathology viewer").
   .mx = motion.js ran (injected decor shown in FINAL state; used by ?still and reduced motion)
   .mo = animations enabled (pre-animation states live only under .mo)
   Easing: on-screen cubic-bezier(.2,0,0,1), entrances cubic-bezier(.05,.7,.1,1). No overshoot. */

:root{--e-on:cubic-bezier(.2,0,0,1);--e-in:cubic-bezier(.05,.7,.1,1)}

/* ---------- generic reveals (main.js sets --d for batch staggers) ---------- */
.mo [data-reveal]{transform:translateY(12px);transition:opacity .5s var(--e-on) var(--d,0ms),transform .6s var(--e-in) var(--d,0ms)}
.mo [data-reveal].in{opacity:1;transform:none}
/* containers whose children run their own orchestrated reveal */
.mo .group[data-reveal],.mo .micro[data-reveal]{opacity:1;transform:none;transition:none}

/* ---------- 1. section titles: focus pull + autofocus reticle ---------- */
.mx .sec-title.has-ret::before{content:none}
.ret{position:relative;flex:none;width:12px;height:12px;transform:translateY(2px)}
.ret i{position:absolute;width:6px;height:6px;border:0 solid var(--cyan)}
.ret i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;--x:-6px;--y:-6px}
.ret i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;--x:6px;--y:-6px}
.ret i:nth-child(3){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;--x:6px;--y:6px}
.ret i:nth-child(4){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;--x:-6px;--y:6px}
.mo .sec-title .ret i{opacity:0;transform:translate(var(--x),var(--y))}
.mo .sec-title.go .ret i{animation:mo-reticle .62s var(--d,0ms) both}
@keyframes mo-reticle{
  0%{opacity:0;transform:translate(var(--x),var(--y)) scale(.6);animation-timing-function:var(--e-on)}
  32%{opacity:1;transform:translate(var(--x),var(--y));animation-timing-function:var(--e-in)}
  100%{opacity:1;transform:none}
}
.st{display:block}
.mo .sec-title .st{opacity:.12;filter:blur(6px);transform:translateY(8px);letter-spacing:.03em}
.mo .sec-title.go .st{opacity:1;filter:none;transform:none;letter-spacing:-.01em;
  transition:opacity .5s var(--e-on) calc(var(--d,0ms) + 120ms),filter .6s var(--e-on) calc(var(--d,0ms) + 120ms),
  transform .6s var(--e-in) calc(var(--d,0ms) + 120ms),letter-spacing .7s var(--e-on) calc(var(--d,0ms) + 120ms)}

/* ---------- 2. percurso: scroll-linked scan track ---------- */
.mx .timeline::before{background:var(--line)}
.mx .timeline::after{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(rgba(98,224,230,.25),var(--cyan));box-shadow:0 0 6px rgba(98,224,230,.35);
  transform-origin:50% 0;transform:scaleY(var(--tl,1))}
.mx .timeline li::before{z-index:1;background:var(--ink);box-shadow:inset 0 0 0 1px #3A4D70}
.mx .timeline li.lit::before{box-shadow:inset 0 0 0 1px var(--cyan)}
.mx .timeline li.lit:first-child::before{background:var(--cyan)}
.mo .timeline li::before{transform:scale(.8);transition:box-shadow .45s var(--e-on),background-color .45s var(--e-on),transform .45s var(--e-in)}
.mo .timeline li.lit::before{transform:none}
.mo .timeline li::after{content:"";position:absolute;left:-36px;top:7px;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--cyan);opacity:0;pointer-events:none}
.mo .timeline li.lit::after{animation:mo-ping .9s var(--e-on) both}
@keyframes mo-ping{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}

/* ---------- 3. projetos: slide-scanner sweep ---------- */
.scan{display:none}
.mo .group{position:relative}
.mo .scan{display:block;position:absolute;left:-16px;right:-16px;top:0;height:100%;pointer-events:none;opacity:0;z-index:2}
.mo .scan::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(98,224,230,0),var(--cyan) 10%,var(--cyan) 90%,rgba(98,224,230,0));
  box-shadow:0 0 10px 1px rgba(98,224,230,.3)}
.mo .scan::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:72px;
  background:linear-gradient(rgba(98,224,230,0),rgba(98,224,230,.06));
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mo .group.go .scan{animation:mo-scanY var(--scan,900ms) var(--e-on) both,mo-scanO var(--scan,900ms) linear both}
@keyframes mo-scanY{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes mo-scanO{0%{opacity:0}8%{opacity:1}78%{opacity:1}100%{opacity:0}}
.mo .group .group-head,.mo .group .projects>li,.mo .group .note{opacity:0;transform:translateY(8px)}
.mo .group.go .group-head.rv,.mo .group.go .projects>li.rv,.mo .group.go .note.rv{opacity:1;transform:none;
  transition:opacity .5s var(--e-on) var(--d,0ms),transform .6s var(--e-in) var(--d,0ms),background .25s}

/* ---------- 4. tecnicas: line-scan wipe on micrographs, corner ticks draw ---------- */
.wipe{display:none}
.mwin{display:block;width:100%;height:100%;overflow:hidden}
/* sliding window (all transforms, so the cyan edge stays locked to the reveal on the compositor) */
.mo .mic:not(.go) .mwin{transform:translateX(-100%)}
.mo .mic:not(.go) .mwin img{transform:translateX(100%)}
.mo .mic.go .mwin{animation:mo-winA .7s var(--e-in) var(--d,0ms) backwards}
.mo .mic.go .mwin img{animation:mo-winB .7s var(--e-in) var(--d,0ms) backwards}
@keyframes mo-winA{from{transform:translateX(-100%)}to{transform:none}}
@keyframes mo-winB{from{transform:translateX(100%)}to{transform:none}}
.mo .mic .mic-frame{border-color:rgba(34,49,77,.6)}
.mo .mic.go .mic-frame{border-color:var(--line);transition:border-color .5s var(--e-on) calc(var(--d,0ms) + 300ms),outline-color .25s}
.mo .mic .wipe{display:block;position:absolute;left:0;top:0;width:100%;aspect-ratio:1;pointer-events:none;opacity:0;transform:translateX(-100%);z-index:1}
.mo .mic .wipe::before{content:"";position:absolute;right:0;top:0;bottom:0;width:28px;background:linear-gradient(90deg,rgba(98,224,230,0),rgba(98,224,230,.14))}
.mo .mic .wipe::after{content:"";position:absolute;right:-1px;top:-4px;bottom:-4px;width:1px;background:var(--cyan);box-shadow:0 0 8px 1px rgba(98,224,230,.55)}
.mo .mic.go .wipe{animation:mo-edgeX .7s var(--e-in) var(--d,0ms) both,mo-edgeO .7s linear var(--d,0ms) both}
@keyframes mo-edgeX{from{transform:translateX(-100%)}to{transform:none}}
@keyframes mo-edgeO{0%{opacity:0}8%{opacity:1}60%{opacity:1}100%{opacity:0}}
.mo .mic::after{clip-path:inset(0 100% 100% 0)}
.mo .mic.go::after{clip-path:inset(0);transition:clip-path .45s var(--e-on) calc(var(--d,0ms) + 380ms)}
.mo .mic .mic-cap,.mo .micro figcaption{opacity:0;transform:translateY(6px)}
.mo .mic.go .mic-cap,.mo .micro figcaption.go{opacity:1;transform:none;
  transition:opacity .5s var(--e-on) calc(var(--d,0ms) + 200ms),transform .6s var(--e-in) calc(var(--d,0ms) + 200ms)}
.mo .tech::after{clip-path:inset(0 100% 100% 0);transition:clip-path .45s var(--e-on) calc(var(--d,0ms) + 300ms)}
.mo .tech.in::after{clip-path:inset(0)}

/* ---------- 5. producao: DAB develops on the accepted marker ---------- */
.mo .papers .status.accepted{color:var(--muted);transition:color .6s var(--e-on) calc(var(--d,0ms) + 700ms)}
.mo .papers li.in .status.accepted{color:var(--dab)}
.mo .papers .status.accepted::before{background:transparent;border-color:var(--muted)}
.mo .papers li.in .status.accepted::before{background:var(--dab);border-color:var(--dab);animation:mo-dab 1.2s var(--e-on) calc(var(--d,0ms) + 450ms) both}
@keyframes mo-dab{
  0%{background-color:rgba(192,138,85,0);border-color:var(--muted);box-shadow:0 0 1px 0 rgba(192,138,85,.6);transform:scale(.8)}
  100%{background-color:var(--dab);border-color:var(--dab);box-shadow:0 0 10px 7px rgba(192,138,85,0);transform:none}
}

/* ---------- 6. nav: gliding indicator + scan progress ---------- */
.mx .nav li a.on::after{content:none}
.mx .nav nav{position:relative}
.nav-ind{position:absolute;left:0;top:0;width:1px;height:1px;background:var(--cyan);transform-origin:0 0;opacity:0;pointer-events:none}
.nav-ind.vis{opacity:1}
.mo .nav-ind{transition:transform .5s var(--e-on),opacity .35s var(--e-on)}
.mo .nav-ind.snap{transition:none}
.nav-prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(98,224,230,.5);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- 7. section seams: changing field of view ---------- */
.mx .sec{position:relative}
.seam-wrap{position:absolute;left:0;right:0;top:calc(min(16vh,140px) * .42);height:0;pointer-events:none}
.seam{display:block;position:relative;height:1px;background:linear-gradient(90deg,#2C3E61,rgba(34,49,77,0) 72%)}
.seam::before{content:"";position:absolute;left:0;top:-3px;width:1px;height:7px;background:var(--cyan)}
.seam::after{content:"";position:absolute;left:0;top:0;width:40px;height:1px;background:linear-gradient(90deg,var(--cyan),rgba(98,224,230,0))}
.mo .seam{clip-path:inset(-4px 100% -4px 0)}
.mo .seam.go{clip-path:inset(-4px 0 -4px 0);transition:clip-path .9s var(--e-on) 80ms}
.mo .seam::before{transform:scaleY(0)}
.mo .seam.go::before{transform:none;transition:transform .4s var(--e-in)}

/* ---------- mobile: cheaper (no letter-spacing reflow, lighter blur) ---------- */
@media (max-width:760px){
  .mo .sec-title .st{letter-spacing:-.01em;filter:blur(4px)}
  .mo .scan{left:-12px;right:-12px}
}

/* ---------- safety net ---------- */
@media (prefers-reduced-motion:reduce){
  .mo *,.mo *::before,.mo *::after{animation:none!important;transition:none!important}
}