/* ---------- 6 · MOTION ---------------------------------------------------- */

/* seções que deslizam como folhas de vidro empilhadas */
#smooth{position:fixed;top:0;left:0;width:100%;z-index:1;will-change:transform;}
#smooth > section{position:relative;}
#smooth > section:not(#hero){margin-top:-46px;border-radius:46px 46px 0 0;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
body.notes #smooth > section:not(#hero){margin-top:0;border-radius:0;}

/* reveal */
.rv{opacity:0;transform:translateY(34px);
  transition:opacity .8s var(--e-soft),transform .8s var(--e-soft);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
.mask{clip-path:inset(0 0 100% 0 round 26px);
  transition:clip-path 1.1s var(--e-out),opacity .8s var(--e-soft),transform .8s var(--e-soft);}
.mask.in{clip-path:inset(0 0 0 0 round 26px);}
.lm{display:block;overflow:hidden;padding-bottom:.08em;}
.lm > span{display:block;transform:translateY(112%);transition:transform 1.05s var(--e-out);}
h2.in .lm > span{transform:none;}

/* preloader */
#pre{position:fixed;inset:0;z-index:200;background:var(--void);display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:var(--s5);transition:transform .9s var(--e-io);}
#pre.done{transform:translateY(-100%);}
#pre .ptri{width:54px;height:63px;background:var(--vio);
  clip-path:polygon(50% 0,100% 100%,62% 100%,50% 32%,38% 100%,0 100%);
  filter:drop-shadow(0 0 30px rgb(var(--m-nucleo) / .9));
  animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.7}}
#pre .pct{font-family:var(--f-disp);font-size:15vw;line-height:1;font-weight:700;color:transparent;
  font-variant-numeric:tabular-nums;-webkit-text-stroke:1.5px rgb(var(--m-claro) / .5);
  position:absolute;bottom:4vh;right:5vw;}
#pre .plabel{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--vios);}

/* cursor */
#cur{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--vios);
  z-index:210;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;
  box-shadow:0 0 14px rgb(var(--m-claro) / .9);}
#curring{position:fixed;top:0;left:0;width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgb(var(--m-claro) / .6);z-index:209;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.1em;color:#fff;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:width .25s,height .25s,background .25s,border-color .25s,opacity .3s;}
body.mv #cur,body.mv #curring{opacity:1;}
#curring.on{width:74px;height:74px;background:rgb(var(--m-nucleo) / .18);border-color:var(--vio);}
#curring.txt{border-color:var(--vios);background:rgb(var(--m-nucleo) / .22);}
/* o rótulo sai de dentro do anel: no centro ele ficava embaixo da bolinha do
   cursor e não dava para ler. Vira balão acima, com bico apontando de volta. */
#curring span{position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(5px);
  background:var(--vio);color:#fff;border:1px solid rgba(255,255,255,.22);
  padding:7px 13px;border-radius:100px;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 12px 30px rgba(3,2,12,.6);
  opacity:0;transition:opacity .18s,transform .18s var(--e-out);}
#curring span::after{content:"";position:absolute;left:50%;top:100%;
  width:7px;height:7px;margin:-4px 0 0 -3.5px;transform:rotate(45deg);
  background:var(--vio);border-right:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);}
#curring.txt span{opacity:1;transform:translateX(-50%);}
/* perto do topo da tela o balão cairia fora: desce para baixo do cursor */
#curring.baixo span{bottom:auto;top:calc(100% + 9px);
  transform:translateX(-50%) translateY(-5px);}
#curring.baixo.txt span{transform:translateX(-50%);}
#curring.baixo span::after{top:auto;bottom:100%;margin:0 0 -4px -3.5px;
  border:0;border-left:1px solid rgba(255,255,255,.22);
  border-top:1px solid rgba(255,255,255,.22);}
@media(pointer:coarse){#cur,#curring{display:none;}}

/* menu fullscreen */
#menubtn{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;padding:11px 18px;border-radius:100px;
  transition:background .25s,border-color .25s;}
#menubtn:hover{background:rgb(var(--m-nucleo) / .25);border-color:var(--vio);}
#menubtn .bars{display:flex;flex-direction:column;gap:4px;}
#menubtn .bars i{display:block;width:15px;height:1.5px;background:#fff;}
#menu{position:fixed;inset:0;z-index:150;background:var(--void);display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--gut);pointer-events:none;
  clip-path:circle(0px at calc(100% - 96px) 42px);transition:clip-path .9s var(--e-io);}
#menu .maur{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60vw 50vw at 84% 12%,rgb(var(--m-luz) / .3),transparent 64%),
  radial-gradient(50vw 44vw at 8% 90%,rgb(var(--m-apoio) / .16),transparent 66%);}
body.menu #menu{clip-path:circle(160% at calc(100% - 96px) 42px);pointer-events:auto;}
#menu .mlist{display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;}
#menu a.ml{font-family:var(--f-disp);font-weight:500;font-size:clamp(32px,6.4vw,86px);
  letter-spacing:-.038em;color:#f6f4ff;text-decoration:none;line-height:1.12;display:block;
  width:max-content;position:relative;opacity:0;transform:translateY(46px);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out),color .3s;}
body.menu #menu a.ml{opacity:1;transform:none;}
body.menu #menu a.ml:nth-child(1){transition-delay:.30s}
body.menu #menu a.ml:nth-child(2){transition-delay:.36s}
body.menu #menu a.ml:nth-child(3){transition-delay:.42s}
body.menu #menu a.ml:nth-child(4){transition-delay:.48s}
body.menu #menu a.ml:nth-child(5){transition-delay:.54s}
body.menu #menu a.ml:nth-child(6){transition-delay:.60s}
body.menu #menu a.ml:nth-child(7){transition-delay:.66s}
#menu a.ml .mi{font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--vios);
  vertical-align:super;margin-right:16px;opacity:.7;}
#menu a.ml::after{content:"";position:absolute;left:0;right:100%;bottom:.14em;height:2px;
  background:linear-gradient(90deg,var(--vio),var(--vios));transition:right .5s var(--e-out);}
#menu a.ml:hover{color:var(--vios);}
#menu a.ml:hover::after{right:0;}
#menuclose{position:absolute;top:26px;right:var(--gut);z-index:2;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--f-mono);font-size:11.5px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:11px 18px;border-radius:100px;
  transition:background .25s,border-color .25s;}
#menuclose:hover{background:rgb(var(--m-nucleo) / .25);border-color:var(--vio);}
#menu .mfoot{position:absolute;left:var(--gut);right:var(--gut);bottom:6vh;z-index:1;display:flex;
  justify-content:space-between;gap:var(--s5);flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;color:#7a749b;}
#menu .mfoot b{color:var(--vios);font-weight:500;}

/* cortina */
#curtain{position:fixed;inset:0;z-index:170;background:linear-gradient(140deg,rgb(var(--m-vivo)),rgb(var(--m-profundo)));
  transform:translateY(101%);pointer-events:none;}
#curtain.in{transform:translateY(0);transition:transform .58s var(--e-io);}
#curtain.out{transform:translateY(-101%);transition:transform .58s var(--e-io);}
#curtain .ctri{position:absolute;left:50%;top:50%;width:46px;height:54px;margin:-27px 0 0 -23px;
  background:#fff;clip-path:polygon(50% 0,100% 100%,62% 100%,50% 32%,38% 100%,0 100%);opacity:.9;}

/* tilt + marquee dirigido por js
   .empurra: superfícies que afundam sob o ponteiro. A volta é por transition;
   a ida é inline, escrita a cada frame pelo SiteMotion. */
/* sem transition no transform de propósito: quem suaviza a ida e a volta é o
   laço do SiteMotion, e uma transition por cima brigaria com ele */
.empurra{transform-style:preserve-3d;
  transition:border-color .35s,box-shadow .35s;}
body.jsmq .mq,body.jsmq .heromq span{animation:none;}